개발 공부 기록하기

DAY 8. Web Font 본문

프밍/CSS

DAY 8. Web Font

태영(泰伶) 2022. 11. 1. 23:43

Web font를 사용하면,

사용자가 가지고 있지 않은 글꼴이어도,

font-family 속성을 사용하지 않아도,

웹 페이지를 만든 사람이 원하는 글꼴로 보일 수 있다..!

 

 

 

 

@font-face {

      font-family: '글꼴 이름';

      src: local('글꼴 이름'),

             url('글꼴 다운로드 위치 1') format('woff'),

             url('글꼴 다운로드 위치 2') format('truetype'),

             url('글꼴 다운로드 위치 3') format('svg');

}

 

 

 

 

 

font-family: 'blah blah'

앞으로 이 글꼴은 'blah blah'란 이름으로 부를 거야.

 

src

source의 약자. 파일의 경로를 지칭한다.

 

local('글꼴 이름')

사용자의 컴퓨터에 이 글꼴이 있나 먼저 찾아봐!

 

url('글꼴 다운로드 위치') format('글꼴 형식')

사용자의 컴퓨터에 글꼴이 없으면 URL의 위치로 가서 format의 형식인 글꼴을 다운로드해!

먼저 쓰여진 위치와 형식을 우선적으로 찾아봐!

(대부분의 브라우저에서 지원하는 woff 포맷을 먼저 선언 하고 보통 용량이 큰 ttf 포맷은 나중에 선언한다.)

 

 

 

예제.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
            @font-face {
               font-family: 'Ostrich';
               src: local('Ostrich Sans'),
               url('fonts/ostrich-sans-bold.woff') format('woff')
               url('fonts/ostrich-sans-bold.ttf') format('truetype'),
               url('fonts/ostrich-sans-bold.svg') format('svg');
            }
            .wfont {
               font-family: 'Ostrich', sans-serif;		/* 웹 폰트 지정 */
            }
            p {
               font-size: 30px;					/* 글자 크기 */
            }
         </style>
      </head>
      <body>
         <p>Using Default Fonts</p>
         <p class="wfont">Using Web Fonts</p>
      </body>
   </html>

↓

 

 

 

 

 

실제로, 나도 티스토리 스킨 편집 → HTML 편집에서

아래와 같이 D2Coding.woff2 파일을 업로드하고, CSS 부분에 코드를 넣어주었다.

그랬더니, 제어판의 글꼴에 D2Coding이 설치되어 있지 않음에도

이 포스팅이

요로코롬 폰트 반영이 되어있다는 것을 확인했다!ㅎㅎㅎ

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 9. 텍스트 관련 스타일(1): color  (0) 2022.11.03
DAY 9. Google Font  (0) 2022.11.02
DAY 8. 글꼴 관련 스타일(3): font-style, font-weight  (0) 2022.11.01
DAY 7. 글꼴 관련 스타일(2): font-size  (0) 2022.10.31
DAY 6. 글꼴 관련 스타일(1): font-family  (0) 2022.09.04
'프밍/CSS' Related Articles more
Comments