Мой CSS указывает " font-family: Helvetica, Arial, sans-serif;" для всей страницы. Похоже, что Вердана используется вместо этого в некоторых частях. Я хотел бы быть в состоянии проверить это.
Я пробовал копировать и вставлять из браузера в Word, но это не сохраняет шрифт.
Есть ли способ определить, какой шрифт на самом деле используется для раздела текста?
Firebug выдаст мне список шрифтов, как указано выше [1], но я не вижу способа определить, какой из шрифтов используется.
- Оказывается, использовался неправильный список, что решило мою первоначальную проблему с Верданой. Но мне все еще любопытно, есть ли способ идентифицировать фактический шрифт рендеринга.
؋символ Агани, который не доступен в этом шрифте.Ответы:
Согласно ответу Уилфреда Хьюза , Firefox теперь поддерживает это изначально. Эта статья имеет более подробную информацию .
В этом оригинальном ответе упоминается плагин «Font Finder», но только потому, что это было 4 года назад. Тот факт, что старые ответы остаются такими, и сообщество не может их обновить, является одним из немногих оставшихся сбоев переполнения стека.
источник
devtools.fontinspector.enabledнеобходима только в Firefox 47: «В Firefox 47 только , вид шрифтов по умолчанию отключена Если вы хотите , чтобы увидеть шрифты просмотра в Firefox 47 визита.about:config, Найти предпочтениеdevtools.fontinspector.enabled, и установить егоtrueдо и после. Firefox 47, представление «Шрифты» включено по умолчанию ». @DanielLe.В настоящее время в Chrome и Firefox есть встроенные инструменты для этого, но Safari требует, чтобы вы скопировали какой-то текст и исследовали это.
Сначала выберите текст. В Firefox Инспектор страниц имеет представление « Шрифты» :
Это также скажет вам, были ли загружены шрифты, и какой стиль используется, например, Regular, ExtraLight, Italic, BoldItalic и все.
Для Chrome перейдите в «Элементы» DevTools, перейдите на его вкладку «Computed» и прокрутите весь путь до раздела «Rendered Fonts». В отличие от Firefox, здесь отображается только имя основного шрифта, а не какой-либо конкретный стиль, который он может использовать:
Приведенные выше снимки экрана показывают, что для текста Unicode могут отображаться несколько шрифтов. Chrome сообщает вам, что 6 символов («Пекка» и пробел) используют «Arial», а один («웃») использует «Apple SD Gothic Neo»:
Фактический CSS определяет:
Но эти шрифты часто не содержат много специальных символов. Поскольку информация о шрифте работает для каждого элемента 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:
источник
font-familyатрибута в том виде, в котором оно отображается (в алфавитном порядке), не будет отображать, какой шрифт загружается. Эта информация появляется внизу.Firefox 22+ покажет вам, какой шрифт используется в настоящее время , без каких-либо расширений.
источник
WhatFont - это расширение Chrome, которое точно скажет, какой шрифт в стеке шрифтов загружается.
источник
Для текущих версий Firefox (начиная с v7) есть надстройка «fontinfo», которая будет сообщать о фактическом используемом шрифте (а не о том, что говорит свойство CSS font-family), принимая во внимание случаи, когда браузер возвращается к другой шрифт, потому что запрошенное семейство шрифтов не было доступно или не поддерживало символы, используемые в тексте.
источник
Вы можете попробовать проверить этот конкретный раздел с помощью Firebug для Firefox. Это должно дать вам все точные свойства.
источник
Плагин «FontFinder», упомянутый Джереми, кажется, здесь не работает, предоставляя первый шрифт списка CSS независимо от фактически отображаемого шрифта (Firefox 4.0rc1 в Linux). Следующий плагин, однако, дает вам «правильный» шрифт, кажется.
Контекстный шрифт
источник
Основываясь на методе измерения текста и сценарии от Лалита Пателя, я создал букмарклеты, которые могут угадать шрифт, который используется для текущего выделенного текста (или
body, если ничего не выбрано). Мне кажется, это очень хорошо для меня, чтобы выяснить, какой шрифт в стеке используется! (sans-serifТем не менее, он не может сказать вам, что на самом деле отображается.)Хватайте их здесь: https://alanhogan.com/bookmarklets#font-stack-full
Источник на GitHub .
Смотрите также: это CodePen , который использует в основном тот же код. Попробуйте разные выбранные абзацы и посмотрите обновление таблицы / догадки!
источник