2017-11-09

in Studynote

테마를 적용한 Jekyll 블로그의 웹 페이지 폰트를 변경하고 싶었다.
font-face, font-family 등등 헷갈리는 요소가 너무 많아 이 기회에 정리하려고 한다.

Web Fonts in Jekyll 지킬 웹 폰트

표시하려는 폰트가 시스템에 없어도, 특정 서버에 저장된 폰트를 불러와 웹에서 보여줄 수 있다.

font-face

CSS에서 커스텀 폰트를 쓰기 위해 지정된 룰.
- 원문 : font-face is the CSS at-rule to use to define custom fonts to be made available to your web pages.
아래의 속성을 사용할 수 있다.
- font-family, src, font-style, font-weight, unicode-range 속성을 사용.
- W3C 권장 형식은 *.woff 이다.
- IE 6~8버전은 *.eot 지원, *.woff 미지원. 9버전부터 둘다 지원한다.
- 크롬, 사파리, 파이어폭스, 오페라는 *.eot 미지원, *.woff 지원.

font-family

CSS 문서에서 사용할 웹폰트 패밀리명.

@font-face {
  font-family: NanumSquareWeb; /*폰트 이름과 반드시 같지 않아도 되나, 동일하게 하는것이 관리하기 용이*/
  src: url(NanumSquareR.woff) format('woff')
}

src

폰트를 가져올 경로. 이미 설치된 폰트는 local()에서 가져오고, 다운로드 해야할 웹폰트는 url() 주소에서 가져온다. ,를 사용하여 경로를 순서대로 찾도록 지정할 수 있으며, 마지막 경로에만 ;을 붙여준다.

@font-face {
  font-family: NanumSquareWeb;
  src: local(NanumSquareR),
       local(NanumSquare),
       url(NanumSquareR.eot),
       url(NanumSquareR.woff),
       url(NanumSquareR.ttf);
}

font-weight, font-style

하나의 폰트명에서 여러 스타일을 적용.

Reference

http://wit.nts-corp.com/2017/02/13/4258
https://milooy.wordpress.com/2015/08/21/web-font-tutorial/
https://alligator.io/css/font-face/

Tags: github, jekyll