Safari(사파리) 에서 폰트가 이상하게 보일경우 해결법 / CSS font-family 속성 총정리

비 개발자 관점에서의 해결법

개발자 관점에서의 해결법

font-family 의 원리

  1. [1순위]의 폰트가 OS 에 있는지 확인한다. 있으면 그것을 바로 적용한다.
  2. 없으면 웹서버에 정의된 웹폰트가 있는지 확인한다.
  3. 웹서버에 웹폰트가 있으면 다운을 받고, 없으면 [1순위]의 폰트는 없다 간주하고 [2순위]의 폰트를 검사하기 시작한다.
  4. 1~3의 작업을 반복한다.

default font 설정

language-script 별 default font 설정

Chrome 에서의 설정

Safari 에서의 설정

정리

  1. A, B, C 각각을 웬만하면 아래와 같은 방식으로 웹폰트로 정의한다.

결론

넋두리

--

--

--

Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
seop

seop

Developer

More from Medium

Styling an input range to have different track heights before and after the thumb

Day150 — Embedding font in HTML or SVG

SETTING UP A SIMPLE BUILD PROCESS IN CSS WITH NPM SCRIPTS

What the glitch