С тех пор, как возникли проблемы, вызванные использованием Cufon, я рискнул отказаться от использования внешних ресурсов шрифтов, но в последнее время я искал альтернативные методы загрузки шрифтов, чтобы увидеть, есть ли лучший способ; у лучших методов есть способ просто появиться неожиданно.
Есть много новых методов и, кажется, вариации для каждого метода; Стоит ли мне использовать набор текста ? или веб-шрифты Google (с js или css)? следует ли мне продолжать использовать шрифты с локальной загрузкой (например, метод, созданный fontsquirrel.com)?
Я перечислю методы, которые кажутся наиболее хорошо принятыми ниже, с некоторыми тестами, но действительно ли стоит переходить на веб-шрифт? Кажется, что он будет нести более высокую нагрузку на ресурсы (HTTP-запросы) и будет иметь меньше типов форматов файлов (меньшая совместимость) и т. Д. Но похоже, что файлы загружаются асинхронно и эффективно в большинстве случаев.
- Это просто вопрос ситуации и необходимости? Если так, то кто они?
- Есть ли кардинальные различия между этими методами?
- Есть ли лучший метод, которого я не перечислил?
- Какие плюсы и минусы производительности? Смотреть? зависимости? совместимость?
Я действительно ищу здесь передовой опыт, производительность - это важная вещь, но также важны масштабируемость и простота использования. Не говоря уже о внешнем виде.
Google CSS
- использует только внешнюю таблицу стилей
- использует только наименьший совместимый тип файла
- может использовать
@importили<link>или взять содержимое styleshee (@font-face) и поместить его прямо в вашу собственную таблицу стилей.
результаты теста
78ms load of html 36ms load of css
Метод Google JS
- использует
webfont.jsдля загрузки stylehet - использует только наименьший совместимый тип файла
- добавляет
: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 Squirrel
@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)
}… Или с данными: метод шрифта…
@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;
}