폰트2

• 

  [HTML] 폰트 미리 로드하여 레이아웃 개선하기 웹 폰트를 페이지가 로딩되었을때 먼저 로드 될 수 있도록 하는 방법에 대해 알아보겠습니다. 글꼴 미리 로드 웹사이트에서 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이게 되는데 글꼴, 자간, 높이 등의 서식에 따라 웹 폰트 적용 전과 후의 레이아웃이 변경되게 됩니다. 즉 폰트를 넣었지만, 로딩 시에는 그 폰트가 먼저 로딩이 되지 않기 때문에 레이아웃이 변경되어 UI에 부정적인 경험을 주게 되는 것이죠. FOUT을 방지하기 위해 필요한 글꼴을 미리 로드할 수 있습니다. Html as="font" type="font/woff2" 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하고 리소스 대기열의 우선순위를 지정하는 데 도움이 됩니다. crossorigin 속성은 글꼴이 다른 도메인(웹 폰트)에서 .. FRONT-END/HTML 2022. 8. 24.

• 

  폰트 용량 경량화 방법 및 TTF to WOFF 확장자 변경 폰트 용량 경량화 및 TTF to WoFF 블로그 스킨을 꾸미다 보면 페이지를 로딩하는 시간이 폰트 용량에 의해 느려지는 경우가 종종 있습니다. 보통 웹폰트를 CSS에서 그대로 사용하거나, TTF 폰트를 다운로드하여 가져오는 경우가 대부분인데, TTF 파일 안에는 한글 / 영문 / 특수문자 외에 글리프가 포함되어 있고 심지어 압축률까지 떨어지는 TTF 확장자를 사용하기 때문입니다. 그래서 이번에는 폰트 용량 경량화하는 방법 및 TTF에서 WOFF확장자를 변경하는 방법에 대해 알아보겠습니다. 폰트 경량화 방법 첫 번째로 글리프를 제거해주는 프로그램을 설치해주셔야 합니다. 일본에서 만든 サブセットフォントメーカー 이라는 프로그램인데, 아쉽게도 한국어는 지원하지 않습니다. 하지만 맥북과 윈도우 사용자 모두 지원.. TIP/Etc Tip 2022. 6. 30.