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

175

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

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

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

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

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

css browser fonts

— lavaturtle
источник

stackoverflow.com/questions/845/detecting-font-in-javascript

— ajm

FontFinder и WhatFont, описанные в ответах ниже, все еще являются очень грубыми способами определения используемого шрифта. Оба ошибочно указали «Quanttrocentro Sans» (основной шрифт), когда я выбираю ؋символ Агани, который не доступен в этом шрифте.

— Переполнение вопроса

@QuestionOverflow, в настоящее время Firefox и Chrome имеют встроенные инструменты для определения шрифта. Они будут показывать шрифт для каждого глифа, следовательно, покажет вам, какой шрифт был использован для этого ؋.

— Арджан

@Arjan: это все еще так в 2020 году?

— пожрал Элизиум

@devouredelysium, ты видел мой ответ ? Просто выберите один глиф, чтобы увидеть, какой шрифт используется.

— Арджан

50

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

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

— Джереми Кауфман
источник

7

Нет смысла использовать это сейчас, когда Инструменты Firefox> Веб-разработчик> Инспектор> Шрифты говорят вам (ответ Уилфреда Хьюза)

— skierpage

1

К сожалению, Firefox 47 больше не имеет вкладку «Шрифты», на которую ссылается этот блог, на который вы ссылаетесь: Эта статья содержит больше подробностей

— Zabba

3

«Начиная с Firefox 47, представление« Шрифты »по умолчанию отключено. Мы работаем над более полнофункциональной заменой. В настоящее время, если вы хотите увидеть представление« Шрифты », посетите страницу about: config, найдите предпочтения devtools. fontinspector.enabled и установите для него значение true. " См. Developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .

— Даниэль Ле

1

По- видимому, настройка devtools.fontinspector.enabledнеобходима только в Firefox 47: «В Firefox 47 только , вид шрифтов по умолчанию отключена Если вы хотите , чтобы увидеть шрифты просмотра в Firefox 47 визита. about:config, Найти предпочтение devtools.fontinspector.enabled, и установить его trueдо и после. Firefox 47, представление «Шрифты» включено по умолчанию ». @DanielLe.

— Арьян

1

@DanielLe, конечно, я понял, что это было правильно, когда ты копировал текст :-)

— Arjan

151

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

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

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

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

Приведенные выше снимки экрана показывают, что для текста 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) ,

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

— Арьян
источник

1

Знаете ли вы, есть ли в Safari плагин или что-то для этого?

— Андри

4

В Chrome 47 не забудьте прокрутить до нижней части раздела «Вычисленные». Расширение font-familyатрибута в том виде, в котором оно отображается (в алфавитном порядке), не будет отображать, какой шрифт загружается. Эта информация появляется внизу.

— Мерчако

1

@Merchako, что происходит, когда ваш вычисляемый шрифт является общим шрифтом, таким как «serif» и «sans-serif»? Тогда как вы получаете фактический шрифт?

— Pacerier

2

@Pacerier, в Chrome просто прокрутите вниз на вкладке Computed; в Firefox см. отдельную вкладку.

— Арджан

1

@ TMG, я мог бы предположить, что веб-шрифтам может не понадобиться псевдоним, но они могут напрямую ссылаться на некоторые URL Это публичный сайт, на который мы можем посмотреть? Если нет, то что показывает Firefox?

— Арджан

32

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

— Уилфред Хьюз
источник

1

Это действительно должно быть окончательным ответом. Не нужно устанавливать расширение.

— Дэн Иствелл

но браузер кто-то, вероятно, не использует. В этом смысле расширение намного легче.

— b1nary

30

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

— user1100745
источник

6

Для меня это говорит, какой шрифт объявлен, но не какой шрифт фактически используется.

— Панзи

3

В соответствии с этой статьей ( updates.html5rocks.com/2013/09/… ), Dev Tools теперь может сообщить вам, какой именно шрифт отображается.

— Йорк

WhatFont пытается обнаружить отрисованный шрифт, но, похоже, не делает этого успешно github.com/chengyin/WhatFont-Bookmarklet/issues/13

— Крис Марисик,

7

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

— Джонатан
источник

К настоящему времени это лучший ответ

— Инго Кегель

1

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

— Йерун
источник

Это все равно дает мне список, а не конкретный, который он использует ... Но при второй проверке Вердана каким-то образом попала в список семейства шрифтов, что и стало причиной моей первоначальной проблемы. Так что спасибо.

— lavaturtle

1

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

— RichieHindle

В бета-версии Safari 4 также есть WebInspector (это может быть скин-файбер)

— vikingosegundo

1

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

— Йерун

2

В настоящее время Firebug (1.11.4, может быть, и раньше) выделяет текущий шрифт синим цветом.

— Марк Врабел

1

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

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

— Дейв Фогт
источник

К сожалению, даже Context Font показывает только вычисленное семейство CSS, которое может быть, например, с засечками или без засечек. Более того, если какой-либо символ отсутствует в вычисляемом шрифте и браузер выбирает его из другого шрифта, Context Font по-прежнему отображает семейство вычисленных шрифтов, а не реальный шрифт.

— Юкка К. Корпела

0

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

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

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

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

— Алан Х.
источник