[CSS] 폰트 메모

출처: https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-5-%EC%9B%B9-%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94
https://velog.io/@chaerin00/CSS-local-font

@font-face

---

latin: 일반 미국, 유럽 영어 버전
latin-ext: 미국, 유럽 외 영어 포함 버전
vetnam: 베트남 영어 버전

font-weight에 따라 나눠져 있으므로
font-weight는 여러개를 같이 써줌

as-is
font-weight: 200

font-weight: 400

to-be
font-weight: 200, 400

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500, 700, 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

웹폰트 파일형식

---

압축률이 가장 좋은 woff2 하나만 되어있는데
woff2 방식은 구형 브라우저에서 동작하지 않아
추가적으로 더 넣어줌

https://cloudconvert.com/woff2-converter

위 사이트에서 woff2 파일을 woff, ttf, otf, eot 형식으로 변경 가능

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500, 700, 900;
    font-display: swap;
    src: 
        url('../assets/fonts/Inter-Normal.woff2') format('woff2'),
        url('../assets/fonts/Inter-Normal.woff') format('woff'),
        url('../assets/fonts/Inter-Normal.ttf') format('truetype'),
        url('../assets/fonts/Inter-Normal.otf') format('opentype'),
        url('../assets/fonts/Inter-Normal.eot') format('embeded-opentype');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }

브라우저는 폰트 파일 형식을 format 부분을 보고 판단하기 때문에 url 뒤에 format 명시 필수

font-display

---

FOIT : 폰트를 다 다운로드 완료 된 후 텍스트가 보임
FOUT : fallback 폰트를 보여주고 폰트 다운로드 완료 후 다운로드 한 폰트로 보임

크롬, 사파리, 파이어폭스 브라우저는 FOIT
엣지, IE 브라우저는 FOUT 방식 사용

FOIT은 폰트 다운로드 중 텍스트가 안보일수 있으며
FOUT은 fallback 폰트에서 다운로드 폰트 적용 시 달라 보일수있음

Fallback 방식은 FOIT, FOUT의 중간 방법 폰트 다운로드 시간을 0.1초로 하는 방법

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500, 700, 900;
    font-display: fallback;
    src: 
        url('../assets/fonts/Inter-Normal.woff2') format('woff2'),
        url('../assets/fonts/Inter-Normal.woff') format('woff'),
        url('../assets/fonts/Inter-Normal.ttf') format('truetype'),
        url('../assets/fonts/Inter-Normal.otf') format('opentype'),
        url('../assets/fonts/Inter-Normal.eot') format('embeded-opentype');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }