기본폰트 설정 및 변경

기본 폰트 정의

홈페이지에서 사용될 기본 폰트를 정의합니다.

한번에 전체적인 폰트의 종류 및 사이즈를 쉽게 변경할 수 있습니다.

또한 개별적으로도 변경이 가능합니다.

 

 

 

■ 수정 파일 위치

> www > bizdemoXXXXXX > img > _css > nStyle_user.css

 

 

 

■ 수정 파일

nStyle_user.css

/*****************************************************************
전체폰트크기조절 : 14px 기본크기
*****************************************************************/
.ft_reset {
    font-weight: 400;/* 300, 400 ... */
    font-size: 13px;/* 14px, 15px, 16px ... */
    font-family: "Noto Sans KR", sans-serif;
/*    font-family: "Nanum Gothic", sans-serif;*/
}
.
.
.

 

 

 

■ 사용된 폰트 종류

1. Noto Sans KR

2. Nanum Gothic

 

노토산스(=본고딕)과 나눔고딕을 사용할 수 있도록 세팅되어 있습니다.

노토산스 폰트가 기본적으로 사용할 수 있으며,

나눔고딕 폰트를 사용 하시려면... 주석으로 묶여 있는 부분을 삭제해 주시면 됩니다.

 

폰트 사이즈는 14px로 되어 있으며, 13px, 14px, 15px, 16px 등 다양하게 변경해서 사용이 가능 합니다.

 

 

 

■ 폰트 css 의 사용 예제

- "de01" 슬라이드 모듈의 한부분을 예로 들어 보겠습니다.

 

- 예제

.de01 {

    letter-spacing: -1px;          >          폰트 자간을 조절

    font-size: 2.0em;               >          폰트 크기를 조절

    font-weight: 700;               >          폰트 두께를 조절 

    color: #ffffff;                       >          폰트 컬러를 조절

}

 

 

위 예제를 보면 폰트의 종류에 대해서는 정의하고 있지 않습니다.

이유는...

사이트에 사용되는 전체적으로 적용될 폰트( Noto Sans KR)를

윗부분에서 이미 정의했기 때문입니다.

 

그 외에...

특정 부분에서 폰트를 다르게 사용하고 싶을 때에는

아래와 같이 해당 요소에 빨간색 부분의 css 내용을 추가해 주시면 됩니다.

 

- 예제

.de01 {

    letter-spacing: -1px;

    font-size: 2.0em;

    font-weight: 700;

    color: #ffffff;

    color: #ffffff;

    font-family: "Nanum Gothic", sans-serif;

}

 

(위 예제는 특정 부분에서 나눔고딕 폰트를 사용할 수 있도록 css 부분을 수정한 예제 입니다.)

 

 

 

 

 

 

다른 폰트 적용하기

기본적으로 노토산, 나눔고딕을 사용할 수 있도록 적용되어 있지만...

그외의 다른 폰트도 사용할 수 있습니다.

 

■  다른 폰트 사용 방법

1.

nStyle_reset.css

위 파일에서 원하시는 폰트를 연결하는 소스를 추가합니다.(cdn)

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);

 

2.

사용하고자 하는 폰트를 정의합니다.

/*****************************************************************
전체폰트크기조절 : 14px 기본크기
*****************************************************************/
.ft_reset {
    font-weight: 400;/* 300, 400 ... */
    font-size: 13px;/* 14px, 15px, 16px ... */
    font-family: "Noto Sans KR", sans-serif;
/*    font-family: "Nanum Gothic", sans-serif;*/

    font-family: 'NanumSquare', sans-serif;

}