Веб-шрифты или локально загруженные шрифты?
С тех пор проблемы, вызванные использованиемCufon Я отказался от использования внешних ресурсов шрифтов, но в последнее время я искал альтернативные способы загрузки шрифтов, чтобы увидеть, есть ли лучший способ; лучшие методы имеют способ просто появляться на ровном месте.
Есть много новых методов, и варианты для каждого метода кажутся; Должен ли я использоватьTypekit? или жеGoogle WebFonts (с JS или CSS)? я должен продолжать использовать локально загружаемые шрифты (например, сгенерированный метод fontsquirrel.com)?
Ниже перечислены методы, которые кажутся наиболее хорошо принятыми, с некоторыми тестами, но стоит ли переходить на веб-шрифт? Кажется, что он будет нести большую нагрузку на ресурсы (запросы http) и иметь меньше типов форматов файлов (меньше совместимости) и т. Д. Но в большинстве случаев файлы загружаются асинхронно и эффективно.
Это просто вопрос ситуации и необходимости? Если так, то кто они?Есть ли существенные различия между этими методами?Есть ли лучший метод, который я не перечислил?Какие плюсы / минусы для производительности? Посмотрите? зависимости? Совместимость?Я действительно ищу лучшие практики здесь, производительность важна, но также масштабируемость и простота использования. Не говоря уже о том, чтобы выглядеть и чувствовать.
Google 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 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;
}