Оптимизация производительности CSS @font-face

внешний интерфейс CSS

Обзор

В этой статье в основном представлены общие стратегии оптимизации загрузки шрифтов, большинство из которых — цитаты и переводы.

1. Основное использование шрифта

Основное использование font-face должно быть известно каждому, что в основном выглядит так:

@font-face {
	font-family: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
		 url('font-lato/lato-regular-webfont.woff') format('woff'),
		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
}
p { font-family: Lato, serif; }

Это позволит нашим веб-страницам использовать пользовательские шрифты. Помимо свойств font-family и src, он также имеет свойства font-style и font-weight. src может указать несколько шрифтов, которые будут применяться по порядку.Например, в приведенном выше примере шрифт woff2 будет загружен первым, а в случае неудачи будет загружен шрифт woff, в противном случае будет загружен шрифт opentype. Шрифты, поддерживаемые src, могут иметь следующие типы:

Параметр src можно использовать с кавычками или без них, а формат параметра имеет разные значения, например следующие:

src: url(fonts/simple.woff);       /* 加载simple.woff，地址相对于样式表的地址 */
src: url(/fonts/simple.woff);      /* 加载simple.woff，地址是网站的绝对地址 */
src: url(fonts/coll.otc#foo);      /* 从coll.otc字符集中加载foo字体 */
src: url(fonts/coll.woff2#foo);    /* 从coll.woff2字符集中加载foo字体 */
src: url(fonts.svg#simple);        /* 加载id 为'simple'的SVG字体 */

Адрес шрифта, загружаемый в src, зависит от междоменных ограничений.Если вы хотите загружать шрифты между доменами, вам необходимо установить CORS.

Это самое основное использование шрифта. Далее мы дополнительно проанализируем использование шрифта и выясним стратегию оптимизации, насколько это возможно.

2. Когда будут загружены шрифты?

Базовые знания о шрифтах упомянуты выше.Вы когда-нибудь задумывались, когда шрифты были загружены? Когда мы просто определяем следующие стили в CSS, при загрузке страницы шрифты загружаются автоматически?

@font-face {
	font-family: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
		 url('font-lato/lato-regular-webfont.woff') format('woff'),
		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
}

К сожалению, шрифты не будут загружены.Как правилоДалее, только когда элементы нашей страницы используют шрифты, определенные в font-face, будут загружены соответствующие шрифты.

Примечание. Здесь мы говорим, что это обычная ситуация, потому что IE8 будет загружаться до тех пор, пока определен шрифт, даже если элемент страницы не использует соответствующий шрифт.

Это не то же самое в других браузерах,

например, вFirefoxа такжеIE 9+, шрифты также будут загружены в следующих случаях:

html

<div id="test"></div>

css

#test {
	font-family: Lato;
}

Что в нем такого особенного? Вы, возможно, заметили, что хотя этот элемент использует шрифт семейства: стиль Lato, этот элемент не содержит текста! ! ! . Согласно нашей идеальной ситуации, шрифты должны загружаться только при наличии текстового контента. Именно так ведут себя браузеры Chrome, Safari (WebKit/Blink и т. д.).

Браузеры Chrome, Safari (WebKit/Blink и т. д.) загружают шрифты только в следующих случаях:

html

<div id="test">这里是有文本的哦</div>

css

#test {
	font-family: Lato;
}

Подводя итог, стратегии загрузки шрифтов в различных браузерах:

  • IE8 будет загружать шрифт до тех пор, пока определен шрифт, независимо от того, применен ли шрифт на самом деле или нет.
  • Firefox, IE 9+ будет загружаться только в том случае, если шрифт определен и на странице есть элемент с примененным шрифтом, независимо от того, имеет ли элемент текстовое содержимое.
  • Chrome, Safari загрузит шрифт только в том случае, если шрифт определен, и на странице есть элемент с примененным шрифтом, а элемент имеет текстовое содержимое.

那你可能会问了，如果我们的DOM元素是通过动态插入的呢？ Например:

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
document.body.appendChild(el);
el.innerHTML = 'Content.';

Ответ одинаково, это стратегия загрузки выглядит следующим образом:

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
/* 到这里，IE8就会开始下载字体 */

document.body.appendChild(el);
/* 只有到这里，Firefox, IE 9+ 才会开始下载字体 */

el.innerHTML = 'Content.';
/* 只有到这里，Chrome, Safari 才会开始下载字体 */

3. FOIT (вспышка невидимого текста)

FOIT — это представление браузера по умолчанию при загрузке шрифтов, то есть в процессе загрузки шрифта страница не может видеть текстовое содержимое. В современных браузерах FOIT может вызвать такое поведение на срок до 3 секунд. FOIT может привести к плохому взаимодействию с пользователем, чего нам нужно стараться избегать.

В-четвертых, FOUT (Flash of Unstyled Text) и свойства отображения шрифта.

FOUT означает использование системного шрифта по умолчанию во время процесса загрузки шрифта.После загрузки шрифта будет отображаться загруженный шрифт.Если шрифт не был загружен после FOIT (3 с), будет продолжать использоваться системный шрифт по умолчанию.

Internet Explorer и Edge не ждут тайм-аута FOIT для отображения шрифта по умолчанию и немедленно отображают шрифт по умолчанию. FOUT лучше, чем FOIT, но нужно обратить внимание на оплавление, которое он вызывает.

Итак, чтобы браузер имел поведение FOUT, нам нужно добавить к нему свойство при настройке @font-face: font-display. Отображение шрифта по умолчанию — auto, а необязательные атрибуты и значения следующие:

  • auto. The font display policy is user-agent-defined.
  • block. Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
  • swap. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.
  • fallback. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases).
  • optional. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a 0s swap period.

Как правило, устанавливается в отставание и необязательно.

Пять, предварительная загрузка

Добавьте на страницу следующий код, чтобы шрифт загружался быстрее:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Обычно используется в сочетании с самым основным использованием шрифта.

Шесть, шрифт BASE64URI

Этот метод заключается в непосредственном изменении пути, когда шрифт определен в @font-face, на кодировку шрифта base64.

Преимущества: Преимущество этого подхода в том, что FOIT и FOUT не генерируются. Так что не будет переплавки и перерисовки. Недостатки: Преобразование шрифтов в base64 тоже будет очень большим, что повлияет на первую скорость загрузки страницы. Не поддерживается загрузка нескольких форматов шрифтов в форме, разделенной запятыми, можно загрузить только один формат шрифта. Это приводит к вам, чтобы обеспечить максимальную совместимость всех браузеров, вы обычно указываете формат woff, потому что формат woff имеет хорошую совместимость, но вы не можете использовать меньший формат woff2, потому что формат woff2 менее совместим .

7. Асинхронно загружать шрифты URI формата BASE64.

Этот метод заключается в асинхронной вставке ссылок CSS со шрифтами URI формата BASE64.

Восемь, используйте Font Load API + FOUT + переключатель класса

Этот метод заключается в том, чтобы не использовать класс, который использует @font-face в начале, а затем использовать API загрузки шрифтов для загрузки шрифта, который мы хотим использовать, а затем переключать соответствующий CSS. API загрузки шрифтов — это родной API:

document.fonts.load('1em open_sansregular')
.then(function() {
	var docEl = document.documentElement;
	docEl.className += ' open-sans-loaded';
});

.open-sans-loaded h1 {
	font-family: open_sansregular;
}

Конечно, этот метод должен учитывать вопрос совместимости браузеров.

9. FOFT (вспышка искусственного текста)

FOFT разделяет загрузку шрифта на части, сначала загружая романский веб-шрифт, а затем сразу же визуализируя полужирный и курсивные варианты с использованием свойства шрифта-синтеза, когда загружаются фактические полужирный и курсив.

Этот метод основан на [使用Font Load API + FOUT + class切换] Этот метод очень удобен для загрузки одного и того же шрифта, но с разными весами и шрифтами, такими как Roman, жирный, курсив, полужирный курсив и т. д. Мы разделили эти шрифты на 2 этапа: первый этап — это прямой шрифт, затем сразу же отображается искусственный полужирный шрифт и курсив, и, наконец (второй этап), заменяется реальным шрифтом. Здесь вы также можете использовать sessionStorage для оптимизации сценария доступа к повторным представлениям.

10. КРИТИЧЕСКИЙ ФОФТ

Единственная разница между CRITICAL FOFT и стандартным FOFI заключается в загрузке латинских шрифтов на первом этапе, CRITICAL FOFT загружает не полный набор латинских шрифтов, а только его подмножество (например, A-Za-z0-9), полный комплект Загружается на втором этапе.

Одиннадцать, КРИТИЧЕСКИЙ FOFT С DATA URI

Единственная разница между этим и CRITICAL FOFT заключается в методе загрузки подмножества шрифтов Roman, который выполняется с помощью API загрузки шрифтов.Здесь шрифт подмножества лошадей будет жестко закодирован в URI BASE64 для загрузки.

12. КРИТИЧЕСКИЙ ФОФТ С ПРЕДНАГРУЗКОЙ

Единственная разница между этим и предыдущим заключается в способе загрузки римского подмножества шрифта на первом этапе, который загружается в виде предварительной загрузки.

В заключение

Общая стратегия загрузки шрифтов может быть представлена ​​на этой диаграмме следующим образом:

использованная литература

Эта статья в основном переведена из следующего сообщения в блоге

  1. https://www.zachleat.com/web/comprehensive-webfonts/#font-display
  2. https://dev.opera.com/articles/better-font-face/

Технологический еженедельник IVWEBШок в сети, обратите внимание на публичный номер: сообщество IVWEB, регулярно каждую неделю публикуйте качественные статьи.

  • Сборник статей еженедельника:weekly
  • Командные проекты с открытым исходным кодом:Feflow
Категории