css - 3

fonts 의 종류

• serif
• sans-serif
• cursive (scirpt or decorative fonts)
• fantasy (decorative fonts)
• monospace

web fonts

1. web safe font - 일반적으로 시스템에 설치된 폰트. 다운로드 없이 사용자에게 의도대로 표현이 할 수 있음. (Arial, Helvetica 등)
2. web font - 설치되어 있지 않아서 브라우저에서 다운로드해야 하는 폰트

web safe fonts 를 알 수 있는 사이트
cssfontstack.com

웹폰트 확장자의 종류

1. EOT: IE8 이하
2. TTF: 구형 안드로이드버전(4.4)에서 필요.
3. WOFF: 대부분의 모던 브라우저에서 지원
4. WOFF2: WOFF보다 압축률이 30%정도 더 좋음

@font-face

어떤 스타일 코드든 @font-face 가 가장 먼저 나와야 한다.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

font shorthand

/* shorthand */
font: italic small-caps bold 24px/1.5 Helvetica, sans-serif;

/* longhand */
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 24px;
line-height: 1.5;
font-family: Helvetica, sans-serif

font display

@font-face의 속성

• auto - 브라우저의 기본동작에 맡기는 방식이다.
• block - FOIT 즉, 타임아웃까지 텍스트를 보여주지 않음
• swap - 응답이 올 때까지 무한정 기다리고 그 전까진 바로 기본폰트를 보여준다. 꼭 적용해야만 하는 중요폰트일 경우에 쓸 수 있다.
• fallback - 100ms 내외의 시간 동안만 block을 하고 기본폰트를 보여준다. 응답이 오면 해당 폰트로 swap 하지만 짧은 시간(3s)만 기다린다.
• optional - 100ms 내외의 시간 동안만 block을 하고 기본폰트를 보여준다. 그 후에는 대체하지 않는다. => 폰트가 상관이 없을 때

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}