Как определить, какой шрифт на самом деле использует браузер для визуализации текста?

Question

Мой CSS указывает "font-family: Helvetica, Arial, sans-serif;" для всей страницы. Похоже, что Вердана используется вместо этого в некоторых частях. Я хотел бы иметь возможность проверить это.

Я пробовал копировать и вставлять из браузера в Word, но шрифт не сохраняется.

Есть ли способ определить, какой шрифт на самом деле используется для фрагмента текста?

Firebug выдаст мне список шрифтов, как указано выше [1], но я не вижу способа определить, какой из шрифтов используется.

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

Answer 1

В настоящее время в Chrome и Firefox есть встроенные инструменты для этого, но Safari требует, чтобы вы скопировали какой-то текст и исследовали его.

В Firefox Инспектор страниц имеет вид Шрифты :

Здесь также будет указано, были ли загружены шрифты.

Для Chrome перейдите в «Элементы» DevTools, перейдите на его вкладку «Вычисленные» и прокрутите до раздела «Рендеринг шрифтов»:

На приведенных выше снимках экрана показано, что для текста Unicode могут отображаться несколько шрифтов. Chrome сообщает вам, что 6 символов («Пекка» и пробел) используют «Arial», а один («웃») использует «Apple SD Gothic Neo»:

Arial - Локальный файл (6 символов)
Apple SD Gothic Neo - Локальный файл (1 глиф)

Фактический CSS определяет:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Но эти шрифты часто не содержат много специальных символов. Поскольку информация о шрифте работает для каждого элемента HTML, где текст Unicode в элементе может фактически использовать несколько шрифтов, он также показывает несколько шрифтов. Если вы сомневаетесь, просто дважды щелкните текст на панели HTML и избавьтесь от текста, который вам не интересен. Затем при повторном выборе окружающего элемента вы увидите только один вариант. В этом случае вам будет сказано, что оба браузера использовали «Apple SD Gothic Neo Regular» для символа «웃».

К сожалению, разные браузеры (и даже разные версии одного браузера) на одном и том же компьютере могут использовать разные шрифты из-за типов шрифтов, поддерживаемых / предпочитаемых браузером. Например, на Mac Safari может предпочесть технологию Apple Advanced Technology, в то время как Firefox поддерживает Microsoft OpenType (что может привести к проблемам для арабского после установки Microsoft Office на Mac). Или для символа «웃» на снимках экрана выше, Chrome и Firefox на моем Mac в настоящее время предпочитают «Apple SD Gothic Neo» (который является OpenType PostScript), но более старые версии Firefox использовали вместо «AppleGothic Regular» (который является шрифтом TrueType) .

Для браузеров, которые не имеют аналогичного представления шрифтов, просто скопируйте и вставьте фрагмент текста в какой-либо текстовый процессор или редактор форматированного текста, выберите определенный текст и посмотрите, какое имя отображается в раскрывающемся списке некоторых шрифтов. На моем Mac это не работает при вставке из Firefox (где для «웃» Firefox «Apple SD Gothic Neo» при вставке преобразуется в «AppleMyungjo»), но хорошо работает для Safari и Chrome:

Answer 2

Per Ответ Уилфреда Хьюза , Firefox теперь поддерживает это изначально. Эта статья имеет более подробную информацию .

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

Answer 3

Firefox 22+ покажет вам, какой шрифт используется , без каких-либо расширений.

Answer 4

WhatFont - это расширение Chrome, которое точно сообщит вам, какой шрифт в стеке шрифтов загружается.

Answer 5

Для текущих версий Firefox (начиная с v7) есть надстройка с именем "fontinfo", которая будет сообщать о фактическом используемом шрифте (а не о том, что говорит свойство CSS font-family), принимая во внимание случаи, когда браузер возвращается к другому шрифту, потому что запрошенное семейство шрифтов не было доступно или не поддерживало символы, используемые в тексте.

Answer 6

Плагин "FontFinder", упомянутый Джереми, кажется, здесь не работает, предоставляя первый шрифт списка CSS независимо от фактически отображаемого шрифта (Firefox 4.0rc1 в Linux). Следующий плагин, однако, дает вам «правильный» шрифт, кажется.

Контекстный шрифт

Answer 7

Вы можете попробовать проверить этот конкретный раздел с помощью Firebug для Firefox. Он должен дать вам все точные свойства.

Answer 8

Основываясь на методе измерения текста и сценарии от Лалита Пателя, я создал bookmarklets , который может угадать шрифт, который используется для текущего выделенного текста (или body, если ничего не выбран). Мне кажется, это очень хорошо для меня, чтобы выяснить, какой шрифт в стеке используется! (Однако, он не может сказать вам, на что на самом деле sans-serif отображается.)

Хватайте их здесь: https://alanhogan.com/bookmarklets#font-stack-full

Источник: на GitHub .

См. Также: этот CodePen , который использует в основном тот же код. Попробуйте разные выбранные абзацы и посмотрите обновление таблицы / догадки!