Как определить используемый шрифт в браузере: CSS и JS

Быстрый ответ

Чтобы определить, какой шрифт используется в элементе на веб-странице, вы можете воспользоваться JavaScript:

let style = getComputedStyle(document.getElementById('elementId'));
console.log("Текущий шрифт:", style.fontFamily.split(',')[0]);

Вместо 'elementId' нужно подставить идентификатор нужного элемента. Функция getComputedStyle вернёт стили, примененные к элементу, а из значения fontFamily можно извлечь список шрифтов, первый из которых и будет активным.

Продвинутый подход с JavaScript

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

Пример функции для такого подхода:

function stringWidthInFont(text, font) {
  // Создаем временный canvas для измерения ширины текста
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = font;
  // Измеряем ширину текста
  return context.measureText(text).width;
}

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

Библиотеки для ваших сервисов!

Существуют специализированные библиотеки для определения шрифтов, такие как Font Face Observer и jFont Checker.

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

Инструмент Font Unstack позволит выявить, какой из перечисленных в стеке шрифтов реально используется.

Шрифт не найден?

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

Визуализация

Думайте о шрифтах как о палитре цветов, а о веб-странице — как о холсте:

Палитра шрифтов: [Arial, Times New Roman, Comic Sans]

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

Анализ холста: Оттенок текста соответствует... Arial!

Таким образом, вы определите, какой шрифт "окрашивает" текст.

Инструмент "Инспектор" браузера: Ваш надёжный помощник

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

Различия в браузерах: Неожиданный поворот

Будьте готовы к тому, что разные браузеры, например, Safari или Opera, могут использовать разные шрифты. В таких случаях весьма ценны JavaScript-измерения и упомянутые библиотеки.

Проверка глифов: Говорим на вашем языке

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

Ключевые пункты, на которые стоит обратить внимание

Для полного понимания процесса определения шрифтов, имейте в виду следующие моменты:

• Поведение при отсутствии: Задайте правильный порядок шрифтов в CSS, чтобы контролировать отображение при их несоответствии.
• Ложные срабатывания: Учтите, что некоторые шрифты могут быть очень похожи, например Arial и Helvetica.
• Поддержка символов: В шрифте должны быть все необходимые символы.
• Статистика шрифтов: Сбор информации о шрифтах, установленных у пользователей, поможет в дизайне.
• Техника канваса: Прорисовка текста на холсте и анализ полученных пиксельных данных может помочь в определении нужного шрифта.

Полезные материалы

1. MDN Web Docs: Использование @font-face — основательное руководство по @font-face для вашего проекта.
2. Font Face Observer: Скрипт мониторинга веб-шрифтов — удобный инструмент для управления загрузкой шрифтов и избежания проблем с отображением текста.
3. Google Fonts: Большой каталог шрифтов — легко выберите подходящие шрифты для своих веб-проектов с помощью Google Fonts.
4. GitHub – typekit/webfontloader: Загрузчик веб-шрифтов — дополнительные возможности при использовании внешних шрифтов с @font-face.
5. Can I Use: Поддержка @font-face в браузерах — информация о совместимости @font-face в различных браузерах.