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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

Сначала выберите текст. В Firefox Инспектор страниц имеет вид шрифтов:

Это также скажет вам, были ли загружены шрифты и какой стиль используется, например, Regular, ExtraLight, Italic, BoldItalic и все.

Для Chrome перейдите в "Элементы" DevTools, перейдите на его вкладку "Computed" и прокрутите весь путь до раздела "Rendered Fonts". В отличие от Firefox, здесь отображается только имя основного шрифта, а не какой-либо конкретный стиль, который он может использовать:

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

Arial — Local file (6 glyphs)
Apple SD Gothic Neo — Local file (1 glyph)

Фактический 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).

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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