Шрифт страницы мерцает? Эти два стандарта могут помочь вам

внешний интерфейс браузер CSS Webkit
Шрифт страницы мерцает? Эти два стандарта могут помочь вам

Автором этой статьи является Хе Вэньли, фронтенд-разработчик из 360 Qi Dance Company и член рабочей группы W3C CSS.

Феномен

Когда мы просматриваем некоторые веб-сайты, на которых используются пользовательские шрифты или используются в разработке@font-faceПри установке пользовательских шрифтов часто наблюдаю такое явление: структура страницы и картинки выходят, а область текста пустая. Это явление называется FOIT (Flash Of Invisible Text).

MSNBC on Firefox

причина

Обычно мы проходим@font-faceПравила определяют, чтобы позволить браузеру загружать сторонние шрифты. Для этих правил, записанных в файле CSS, браузер должен дождаться загрузки и анализа файла, прежде чем он сможет начать загрузку файла шрифта. По словам Зака ​​​​Лезермана, чтобы действительно запустить загрузку файла шрифта, должны быть выполнены некоторые условия.①В этой статье для запуска загрузки шрифта должны быть выполнены следующие условия:

  • законный@font-faceправила, и текущий браузер должен поддерживатьsrcформат, указанный в списке
  • В документе есть узлы, которые используются@font-faceто же самое вfont-family
  • В движках Webkit и Blink используйте этотfont-familyУзел не может быть пустым
  • если@font-faceуказано вunicode-range, отображаемое текстовое содержимое также должно находиться в пределах заданного диапазона Unicode.

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

решить

Среди стандартов W3C, связанных со шрифтами, модуль шрифтов CSS уровня 3font-displayСвойства, а также стандарт CSS Font Loading API могут решить связанные проблемы.

font-display

font-displayСвойство было добавлено в модуль CSS Fonts уровня 3 и уже поддерживается большинством браузеров.

font-displayРешение проблемы такого типа предоставляется на уровне CSS, который предоставляет пять свойств:

  • auto: использовать поведение браузера по умолчанию;
  • block: Браузер сначала заменяет текст на странице невидимым текстом и ждет загрузки шрифта перед его отображением;
  • замена: если установленный шрифт еще недоступен, браузер сначала будет использовать альтернативный шрифт для отображения и заменит альтернативный шрифт при загрузке установленного шрифта;
  • запасной вариант: сswapПоведение значения свойства примерно такое же, но браузер установит ограничение времени загрузки для установленного шрифта.Если время загрузки превысит этот предел, установленный шрифт не будет отображаться вместо альтернативного шрифта. Это время установлено на 3 секунды в Webkit и Firefox;
  • необязательный: при использовании этого значения атрибута, если установленный шрифт не загружается в течение установленного времени, текущая страница всегда будет использовать альтернативный шрифт, а установленный шрифт будет продолжать загружаться в фоновом режиме, так что установленный шрифт может быть использоваться непосредственно в следующий раз, когда вы просматриваете шрифт.

CSS Font Loading API

Помимо решения проблем на уровне CSS,CSS Font Loading API ②Решения также предоставляются на уровне JavaScript. Слушая событие загрузки, мы можем получить доступ к CSS, заменив класс после загрузки шрифта.swapЭффект стоимости недвижимости.

Поддержка браузера по-прежнему средняя

FontFaceПоддержка интерфейса

FontFaceSetПоддержка интерфейса

css-font-loading-api-comp-fontfaceset

Стандарт в основном обеспечиваетFontFaceИнтерфейс загружает шрифты, а объект document.fonts являетсяFontFaceSetинтерфейс, он же группаFontFaceКоллекция, которая управляет состоянием всех шрифтов на странице.

FontFaceПринимает три параметра:font-familyИмя, расположение ресурса шрифта и параметры шрифта (необязательно).

Во-первых, чтобыJavaScriptчтобы загрузить шрифт, мы хотимnewОдинFontFaceи добавить его в глобальнуюFontFaceSetсередина:

const Aclonica = new FontFace('Aclonica', 'url(./Aclonica.ttf)');
// 添加到全局的 FontFaceSet 中
document.fonts.add(Aclonica);

Шаг 2: звонокFontFaceизloadметод начинает загружаться,loadметод вернетPromise. Когда наши шрифты загружены, мы можем заменить их новыми шрифтами, изменив класс.

Aclonica.load().then(() => {
    // 当字体加载完之后，我们就可以通过替换 class 的方法替换掉默认的字体
    // 此处的逻辑也可以是你的字体渲染策略
    document.body.classList.add('use-aclonica');
})

.use-aclonica {
    font-family: Aclonica;
}

не идеально

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

fout

Мы обнаружили, что страница неизбежно мигает после загрузки шрифта. Это визуальный эффект, вызванный большой разницей между альтернативным шрифтом и заданной формой шрифта. Это явление также называется FOUT (Flash Of Unstyled Text). Для пользователей, которые читают статьи, это явно не очень хороший опыт.

резюме

CSS Fonts Module и CSS Font Loading API, эти два набора стандартов, дают больше возможностей интерфейсным шрифтам с точки зрения рендеринга и управления.Поскольку мы более глубоко изучаем спецификации, мы считаем, что это вызовет проблемы с загрузкой и рендерингом шрифтов. , больше решений.

Ссылка в тексте

①Woohoo. Как это стало at.com/Web/comp жарой…  

②drafts.CSS-Grid.org/CSS-font-lol…

Спасибо

Спасибо г-ну Ли Сунфэну за его предложения по пересмотру этой статьи.

Категории