Cufon 을 사용하여 발생한 문제 이후 외부 글꼴 리소스 고 노력했지만 최근에는 글꼴을로드하는 다른 방법을 찾고 더 나은 방법이 있는지 확인했습니다. 더 나은 방법은 갑자기 나타나는 방법이 있습니다.
많은 새로운 방법이 있으며 각 방법에 대한 변형이 있습니다. typekit을 사용해야 합니까 ? 또는 google webfonts (js 또는 css 포함)? 로컬 로딩 글꼴 (예 : fontsquirrel.com 생성 방법)을 계속 사용해야합니까?
몇 가지 테스트를 통해 가장 잘 받아 들여진 방법을 아래에 나열하겠습니다.하지만 웹 폰트로 이동할 가치가 정말 있습니까? 더 높은 리소스로드 (http 요청)를 전달하고 파일 형식 유형 (호환성이 적음) 등이 적은 것처럼 보이지만 대부분의 경우 파일이 비동기식으로 효율적으로로드되는 것처럼 보입니다.
- 상황과 필요의 문제입니까? 그렇다면 그들은 무엇입니까?
- 이 방법들 사이에 큰 차이가 있습니까?
- 내가 나열하지 않은 더 나은 방법이 있습니까?
- 성능에 대한 장단점은 무엇입니까? 보기? 의존성? 호환성?
저는 여기서 모범 사례를 찾고 있습니다. 성능은 중요하지만 확장 성과 사용 편의성도 중요합니다. 외모와 느낌은 말할 것도 없습니다.
구글 CSS
- 외부 스타일 시트 만 사용
- 가장 작은 호환 파일 유형 만 사용
- 스타일 쉬 ( ) 의 내용을 사용
@import하거나<link>가져 와서@font-face자신의 스타일 시트에 직접 넣을 수 있습니다.
시험 결과
78ms load of html 36ms load of css
Google JS 방법
webfont.js스타일을로드 하는 데 사용- 가장 작은 호환 파일 유형 만 사용
:root클래스 에 요소를 추가합니다.- 헤드에 스크립트를 추가합니다.
시험 결과
171ms load of html 176ms load of js 32ms load of css
Typekit 방법
:root클래스 에 요소를 추가합니다 .*.js스 니펫 또는 외부에서로드 된 파일*.js파일을 사용할 수 있습니다.data:font/opentype글꼴 파일 대신 사용 합니다.- 머리에 스크립트 추가
- 포함 된 CSS를 헤드에 추가
헤드에 외부 스타일 시트 추가
typekit.com에서 글꼴 및 대상 선택기를 쉽게 추가 / 제거 / 조정할 수 있습니다.
시험 결과
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… & 글꼴 다람쥐 방법
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}… 또는 data : font 방법으로…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
4
이것은 좋은 질문입니다.
—
dachi
이것이 최선의 방법인지는 잘 모르겠지만 항상 Google CSS를 이렇게 사용합니다
—
lefoy
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
나는 지역 웹 폰트만을위한 font-squirrel과 같은 웹 사이트를 개발했습니다
—
dachi
Georgian. 나는 font-squirrel 방법을 사용하고 있으며이 질문에 대한 훌륭한 답변을보고 싶습니다.
이것은 방탄
—
lefoy
@font-face선언 을 선언하는 방법에 대한 아주 좋은 기사 입니다. 아마도 유용한 정보를 찾을 수있을 것입니다. paulirish.com/2009/bulletproof-font-face-implementation-syntax
답변을받을 때까지 수락하지 않으면 더 나은 / 개선 된 답변을받을 수있을 때 현상금을 시작할 수 있습니다.
—
Davit