Font css3: @font-face — CSS | MDN

Leave a Comment / Css / By /

Управляем поведением font-face в CSS

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

БраузерВремя ожиданияЗапасной шрифтЗамена шрифта
Chrome 35+3 секунды++
Opera3 секунды++
Firefox3 секунды++
Internet Explorer0 секунд++
Safariнет ожидания——
  • Chrome и Firefox ждут 3 секунды перед тем, как отобразить текст запасным шрифтом. В дальнейшем, когда шрифт загрузится элементы использующие этот шрифт перерисуются с новым шрифтом. Возможно вы замечали как некоторые страницы “мерцали” при смене шрифта.
  • Internet Explorer не ждет трех секунд, а сразу отрисовывает текст: если браузер еще не загрузил шрифт, то используется запасной.
    После загрузки шрифта элементы перерисуются.
  • В Safari нет времени ожидания

Это поведения по умолчанию полезны, но отличаются от браузера к браузеру. Это не подаются никакому контролю со стороны разработчика. К тому-же эти способы не идеальны, поэтому разработчики городят решения этих проблем на JavaScript.

Временная шкала отображения шрифта

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

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

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

При перерисовке невидимым запасным шрифтом для элемента, браузер ищет шрифт так же как и при “перерисовке запасным шрифтом”. Создает анонимный шрифт с похожими метриками как у выбранного шрифта, но с невидимыми символами, и отрисовывает текст им.

Контролируем отображение шрифта

Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят.

Имяfont-display
Для@font-face
Значенияauto, block, swap, fallback, optional
По умолчаниюauto
‘auto’
Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.
‘block’
Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

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

‘swap’
Устанавливает период блокировки в 0 секунд и бесконечный период замены.

Браузер сразу отрисовывает текст безопасным шрифтом и пользователь не видит пустого экрана дожидаясь загрузки шрифта. Но когда шрифт загрузится, он сразу заменится.

‘fallback’
Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

Работает так-же как и swap, но если шрифт не загрузился в течении 3-х секунд, то браузер отрисует текст запасным шрифтом. Подходит для текста предназначенного для вдумчивого чтения. В таком случае шрифт играет второстепенную роль. Если он быстро не загрузился, то не стоит отвлекать пользователя мерцанием от замены шрифта.

‘optional’
Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.

Похоже на ‘fallback’, но по истечению 3-х секунд, браузер может или прервать загрузку (при медленном интернете) или понизить приоритет загрузки. Когда браузер загрузит шрифт, он все равно продолжит отображать текст запасным шрифтом, но если вы обновите текущую или перейдете на другую страницу, для которой установлено значение ‘optional’ и используется тот-же шрифт, то браузер отрисует текст загруженным шрифтом.

Видео пример работы свойства font-display

Пример работы CSS свойства font-display

Как протестировать

Свойство пока работает только в Chrome Canary. Чтобы посмотреть на его работу нужно:

  • Запустить Chrome Canary
  • Открыть флаги chrome://flags
  • Включить “enable-experimental-web-platform-features”
  • Перезапустить Canary

Когда использовать

В Canary это свойство появилось 1 декабря 2015 года, поэтому думаю что в течении 3-6 месяцев оно заработает в стабильной версии. Но уже можно добавить одну строчку CSS кода, чтобы в будущем сайт отображал шрифты выбранным вами способом. Я бы ставил по умолчанию font-display: swap.

Дополнительно

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

  • Спецификация
  • WebPageText
  • Демо

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Свойство шрифта CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите некоторые свойства шрифта с помощью сокращенного объявления:

в год {
шрифт: 15px Arial, без засечек;
}

п.б. {
шрифт: курсив малый полужирный 12px/30px Georgia, с засечками;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство шрифта является сокращенным свойством для:

  • стиль шрифта
  • вариант шрифта
  • вес шрифта
  • размер шрифта/высота строки
  • семейство шрифтов

Требуются значения font-size и font-family. Если одно из других значений отсутствует, используются их значения по умолчанию.

Примечание: Свойство line-height устанавливает расстояние между строками.

Показать демо ❯

Значение по умолчанию: Значение по умолчанию свойств шрифта
Унаследовано: да
Анимация: да, см. отдельные свойства . Читать про анимированный Попробуй
Версия: CSS1
Синтаксис JavaScript: объект Попробуй

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
шрифт 1,0 4,0 1,0 1,0 3,5

Примечание. См. поддержку отдельных браузеров для каждого значения ниже.

Синтаксис CSS

шрифт: стиль шрифта вариант шрифта вес шрифта размер шрифта/высота строки семейство шрифтов |заголовок|значок|меню|окно сообщения|маленький заголовок|строка состояния| первоначальный|наследовать;

Значения свойств

....
Свойство/значение Описание Демо
стиль шрифта Задает стиль шрифта. Значение по умолчанию — «нормальный» Демонстрация ❯
вариант шрифта Указывает вариант шрифта. Значение по умолчанию — «нормальный» Демонстрация ❯
вес шрифта Указывает толщину шрифта. Значение по умолчанию — «нормальный» Демонстрация ❯
размер шрифта/высота строки Задает размер шрифта и высоту строки. Значение по умолчанию — «нормальный» Демонстрация ❯
семейство шрифтов Указывает семейство шрифтов. Значение по умолчанию зависит от браузера Демонстрация ❯
заголовок Использует шрифт, используемый элементами управления с заголовками (например, кнопки, выпадающие списки и т.д.)
значок Использует шрифт, используемый метками значков
меню Использует шрифты, используемые раскрывающимися меню
ящик сообщений Использует шрифты, используемые диалоговыми окнами
малый заголовок Уменьшенная версия шрифта подписи
строка состояния Использует шрифты, используемые в строке состояния
начальный Устанавливает для этого свойства значение по умолчанию.
Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Демонстрация некоторых других значений свойств шрифта.

Шрифт браузера, используемый в элементах управления с заголовками.


Шрифт браузера, используемый в подписях к значкам.


Шрифт браузера, используемый в раскрывающихся меню.


Шрифт браузера, используемый в диалоговых окнах.


Уменьшенная версия шрифта заголовка.


Шрифт браузера, используемый в строке состояния.

Попробуйте сами »

Связанные страницы

Учебник CSS: Шрифт CSS

Ссылка HTML DOM: свойство шрифта

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

90 002
Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Загрузка шрифтов CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск ?

Загрузка шрифта CSS

— ВД

  • Глобальное использование
    96,4% + 0% «=» 96,4%

Этот модуль CSS определяет интерфейс сценариев для начертаний шрифтов в CSS, позволяя легко создавать и загружать начертания шрифтов из сценария. Он также предоставляет методы для отслеживания состояния загрузки отдельного шрифта или всех шрифтов на всей странице.

Chrome
  1. 4–34: не поддерживается
  2. 35–113: поддерживается
  3. 07% — Supported»> 114: поддерживается
  4. 115–117: поддерживается
902 89 Edge
  1. 12–18: не поддерживается
  2. 79–113: Поддерживается
  3. 114: Поддерживается
Safari
  1. 3.1–9.1: Не поддерживается
  2. 10–16.4: Поддерживается
  3. 16.5: Поддерживается
    4. 9038 8 16.6 — TP: поддерживается
Firefox
  1. 2–34: не поддерживается
  2. 35–40: отключено по умолчанию
  3. 41–112: поддерживается
  4. 113: поддерживается
  5. 01% — Supported»> 114–115: поддерживается
Opera
  1. 9–21: не поддерживается
  2. 22–98: поддерживается
  3. 99: поддерживается
IE
  1. 5.5–10: не поддерживается
  2. 11: не поддерживается
Chrome для Android
    9043 8 114: поддерживается
Safari на iOS
  1. 3.2–9.3: нет поддерживается
  2. 10–16,4: поддерживается
  3. 16,5: поддерживается
  4. 16,6–17: поддерживается
Samsung Internet
  1. 4–20: поддерживается

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *