Запасной шрифт: понять, чем браузер действительно рисует текст
Список font-family описывает предпочтения, но не доказывает, что первый шрифт доступен. В упражнении нужно определить реально использованный шрифт и оценить страницу при его замене.
Назначение
Список font-family описывает предпочтения, но не доказывает, что первый шрифт доступен. В упражнении нужно определить реально использованный шрифт и оценить страницу при его замене.
Как это работает
Браузер перебирает семейства и может подбирать разные шрифты для отдельных символов. Панель вычисленных стилей показывает правило, а сведения об отрисованных шрифтах в DevTools помогают увидеть фактический выбор.
Пример
<style>.font-test{font-family:"Learning Font Missing",Arial,sans-serif;font-size:1.2rem;line-height:1.5}</style>
<p class="font-test">Учебная строка: HTML, CSS, 0123456789 и знак €.</p>Что должно получиться
Первое семейство специально названо так, чтобы обычно отсутствовать. Браузер использует доступный запасной шрифт. Само упоминание имени в font-family не загружает файл шрифта из сети.
Граница применения и частая ошибка
Не путайте выбранную семью в CSS с реально применёнными глифами. Запасной шрифт может изменить ширину слов и высоту строк. Нельзя оценивать устойчивость интерфейса только после успешной загрузки всех веб-шрифтов.
Самостоятельная проверка
Найдите отрисованные шрифты в инструментах своего браузера. Затем отключите загрузку веб-шрифта на собственной странице и проверьте кнопки, заголовки и переносы. Сохраните резервные семейства, подходящие по читаемости и метрикам.