Mong dev blog

🙂 이번 시간에는 글꼴 랜더링 방식을 컨트롤 하는, font-display에 대해 알아보았다! 1. 글꼴 랜더링 방식 우리가 어떤 사이트에 들어갔을 때 글자가 늦게 나타나거나, 혹은 글꼴이 나중에 적용되는 경우를 볼 수 있다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, 설명은 아래와 같다. 방식 설명 Flash of Invisible Text (FOIT) 브라우저가 글꼴을 다운로드하기 전까지 글자를 보여주지 않음 Flash of Unstyled Text (FOUT) 브라우저가 글꼴을 다운로드하기 전까지 글꼴이 적용되지 않음 그런데 서비스 특성에 따라 글꼴 랜더링 방식을 변경할 순 없을까? font-display를 사용하면 가능하다 🙂 2. font-display란? 💡 font-dis..

😃 이번시간에는 웹폰트 로딩을 최적화하는 5가지 방법을 알아보았다! (참고1, 참고2, 참고3) 1. 들어가기에 앞서 1) FOIT, FOUT ? 우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며, Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다. 그런데 이 두 현상은 왜 일어나는걸까? 브라우저 동작과 함께 살펴보자! 2) 브라우저 동작과 웹 폰트 폰트에서 FOIT, FOUT가 일어나는 이유를..