web font loading recipes
1.0.0
Куча демонстраций для различных стратегий загрузки веб -шрифта. Некоторые из них включены в комплексное руководство по стратегиям загрузки шрифтов, некоторые из них более экспериментальны .
Демо, размещаются по адресу https://www.zachleat.com/web-fonts/demos/
Поскольку веб -шрифты являются прогрессивным улучшением, и с растущей поддержкой API загрузки шрифтов CSS мы можем рассчитывать на время, когда нам не нужно будет внедрить полифилл в заголовок (даже для более быстрой загрузки шрифтов). Упрощенные рецепты API загрузки шрифта CSS являются дефолтами, но полифированные версии включены для более широкой поддержки браузера - в частности, только на полифированных версиях будут отображаться веб -шрифты в интернет -проводнике и интернет -браузерах Edge (которые не поддерживают API загрузки шрифтов CSS).
font-display: swap@font-facepreload<link> тегfont-display: swap с preload<link> TAG и CSS : @font-facefont-display и preloadПодобно вышеупомянутому, но без использования класса - используя только API загрузки шрифтов CSS. Это не требует никакой модификации CSS, вводят веб -шрифты с помощью JS -программно. Я впервые увидел этот метод в справочнике WebFont от @bramstein.
.style.fontFamily Метод (хорошо работает только с одной семьей на страницу), сначала увидел это в твите с @simevidasДвухступенчатая нагрузка, используя один римский файл шрифта на первом этапе (с синтезом шрифта).
preload<link> TAG и JAVASCRPT : API CSS Загрузка шрифтаfont-display: optional с JavaScript.preload , с полифиллом, подражателем font-display: optional<link> TAG и JAVASCRPT : API CSS Загрузка шрифта и PONTFACEOBServer PolyfillЭто не обязательно стратегии загрузки шрифтов самостоятельно, но это дополнительные усовершенствования, которые вы можете слое, и сочетать с существующими стратегиями.
Отказаться от веб -шрифтов на медленных скоростях соединения.
prefers-reduced-motion предпочтения пользователя Отказаться от веб -шрифтов, когда пользователь позволит Reduce Motion .
save-data Preference Отказались от веб -шрифтов, когда пользователь включил режим Data Saver .
Вы, вероятно, увидите посты в блоге на них в какой -то момент.
font-display: optionalДавай. ?
Старые браузеры использовались для отображения без тайм -аута, что на практике делало веб -шрифты одной точкой отказа. Использование WOFF2 сокращает только горчицу для современных браузеров, которые имеют три секунды FOIT Timeout для веб -шрифтов. Мы здесь противоположный тексту, но этот подход стоит упомянуть.
font-synthesis не является хорошим конечным продуктом.
<style> инъекция Все, что использует JavaScript для введения нового <style> с блоками @font-face внутри. Действительно плохая стоимость перекрашивания - из -за этого. Это используется в методе асинхронных данных URI выше, но также распространено и в методах худших.
font-display: optional и preloadpreload с помощью font-display: optional является анти-паттерномfont-display (смешивание значений font-display по всей font-family )Этот метод в настоящее время не имеет поддержки кросс-браузера. Я надеюсь, что это изменится - больше.
swap / 3 optional ) Это обычная вещь, которую пытаются люди - они асинхронно загружают CSS (и только CSS). Черт, я использовал это поведение, прежде чем начал изучать загрузку веб -шрифта.
@supports и font-displayfont-displayfont-display не поддерживается (и хорошо работает без зависимостей JS)@supports не работает с дескрипторами Font-Face.font-family Поместите два или более веб font-family шрифтов в одну стеку font-family .
Неудача : алгоритм сопоставления шрифтов выбирает первый веб -шрифт, который соответствует и пытается загрузить его (игнорируя последующие семейства веб -шрифтов). Даже если вы preload подмножество первого этапа, он обменяется из-за приоритета заказа font-family .
Код
Демо
Обновление : Хотя вы можете смягчить вышеуказанную проблему с помощью font-display , возможно, изменяя порядок порядок стека font-family и @font-face Block, все еще возникают проблемы с удалением ненужного веб-шрифта подмножества со страницы после загрузки более крупной версии. Функции шрифта, которые возникают с глифами, которые пересекают эти границы файлов шрифтов, будут нарушены (кернинг, лигатуры и так далее. В связи с этим вы не можете удалить объект FontFace с парой CSS, используя API загрузки шрифта CSS (согласно спецификации).
** Обратите внимание, что эти методы будут входить в Internet Explorer и Edge, используя преимущества их поведения по загрузке шрифтов по умолчанию.
