Як я можу визначити, який шрифт насправді використовує браузер, щоб відобразити текст?

175

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

Я спробував скопіювати та вставити зі свого браузера в Word, але це не зберігає шрифт.

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

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

Виявляється, був використаний неправильний список, який вирішив мою оригінальну проблему Вердани. Але мені все одно цікаво, чи є спосіб визначити власне шрифт візуалізації.

css browser fonts

— лаванда
джерело

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

— аєм

FontFinder та WhatFont, описані у відповідях нижче, як і раніше є дуже грубими способами виявлення використовуваних шрифтів. Обидва помилково вказали "Quanttrocentro Sans" (основний шрифт), коли я вибрав ؋символ Агані, який недоступний у цьому шрифті.

— Переповнення запитань

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

— Ар’ян

@Arjan: це все ще має місце у 2020 році?

— пожирав елізіум

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

— Ар’ян

50

За відповідь Вілфреда Х'юза , Firefox зараз підтримує це на самому собі. У цій статті є детальніше .

Ця відповідь оригінально посилалася на плагін "Шукач шрифтів", але лише тому, що це було від 4 років тому. Те, що старі відповіді залишаються подібними до цього, а спільнота не може їх оновлювати, є однією з небагатьох помилок, що залишилися у стеці.

— Джеремі Кауффман
джерело

7

Немає причин використовувати це зараз, коли Інструменти Firefox> Веб-розробник> Інспектор> Шрифти розповідають вам (відповідь Вільфреда Х'юза)

— skierpage

1

На жаль, у Firefox 47 більше немає посилання на вкладку Шрифти в цьому блозі, на який ви посилаєтесь: У цій статті є детальніше

— Zabba

3

"Починаючи з Firefox 47, перегляд шрифтів вимкнено за замовчуванням. Ми працюємо над більш повнофункціональною заміною. На даний момент, якщо ви хочете переглянути перегляд шрифтів, відвідайте сторінку: config, знайдіть перевагу devtools. fontinspector.enabled та встановіть його на "true". Див. Розробник.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, я звичайно зрозумів, що це було правильно, коли ви скопіювали текст :-)

— Арджан

151

На сьогодні Chrome і Firefox мають вбудовані інструменти для цього, але Safari потребує вас, щоб скопіювати текст і дослідити це.

Спочатку виберіть текст. У Firefox переглядач сторінки має перегляд шрифтів :

Це також скаже вам, чи були завантажені шрифти та який стиль використовується, наприклад Regular, ExtraLight, Italic, BoldItalic та всі.

Для Chrome перейдіть у "Елементи" DevTools, перейдіть на вкладку "Обчислені" та прокрутіть до кінця розділ під назвою "Відображені шрифти". На відміну від Firefox, це показує лише основне ім'я шрифту, а не якийсь конкретний стиль, який він може використовувати:

На наведених вище знімках екрана видно, що для тексту Unicode може бути показано кілька шрифтів. Chrome повідомляє, що 6 гліфів ("Pekka" та пробіл) використовують "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" Firefox перетворюється на "AppleMyungjo" при вставці), але добре працює для Safari та Chrome:

— Арджан
джерело

1

Чи знаєте ви, чи має Сафарі плагін чи щось для цього?

— Андрі

4

У Chrome 47 переконайтеся, що ви прокручуєте до нижньої частини Розрахунок. Розширення font-familyатрибуту, як він з’являється (в алфавітному порядку) не відображатиме, який шрифт завантажується. Ця інформація з’являється внизу.

— Мерчако

1

@Merchako, що відбувається, коли ваш обчислюваний шрифт є таким загальним шрифтом, як "serif" та "sans-serif"? Тоді як отримати власне шрифт?

— Pacerier

2

@Pacerier, у Chrome просто прокручуйте вниз на вкладці «Обчислені»; у Firefox дивіться окрему вкладку.

— Ар’ян

1

@TMG, я можу уявити, що веб-шрифтам не потрібен псевдонім, але можна посилатися на якусь URL-адресу безпосередньо. Це публічний веб-сайт, який ми можемо переглянути? Якщо ні, що показує Firefox?

— Ар'ян

32

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

— Вільфред Х'юз
джерело

1

Це зараз має бути остаточною відповіддю. Не потрібно встановлювати розширення.

— Dan Eastwell

але браузер хтось, ймовірно, не використовує. Розширення набагато легше в цьому сенсі.

— b1nary

30

WhatFont - розширення для Chrome, яке конкретно підкаже, який шрифт у стек шрифту завантажується.

— user1100745
джерело

6

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

— panzi

3

Згідно з цією статтею ( updates.html5rocks.com/2013/09/… ), Dev Tools тепер може повідомити вам, що таке фактично наданий шрифт.

— йорч

WhatFont намагається виявити наданий шрифт, але, здається, не робить цього успішно github.com/chengyin/WhatFont-Bookmarklet/isissue/13

— Кріс Марісіч

7

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

— Джонатан
джерело

На сьогодні це найкраща відповідь

— Інго Кегель

1

Ви можете спробувати перевірити цей конкретний розділ за допомогою Firebug для Firefox. Це повинно дати вам всі точні властивості.

— jeroen
джерело

Це все ще дає мені список, а не конкретний, який він використовує ... Але, по другому перевірці, Вердана якось потрапила до списку сімейства шрифтів, що було б причиною моєї первісної проблеми. Отже, дякую.

— lavaturtle

1

Firebug також розповість, за якими правилами виконується подання елементу цього шрифту - дуже корисно для розробки, де ваш CSS йде не так.

— RichieHindle

У Safari 4 Beta також є WebInspector (теж може бути скинена вогнепальна машина)

— vikingosegundo

1

Я думаю, ви завжди отримаєте повний список, яким би інструментом не користуєтесь. Використовуваний шрифт є першим у списку, який встановлений на вашому комп'ютері.

— jeroen

2

Firebug на даний момент (1.11.4, можливо, і раніше) виділяє поточний шрифт синім кольором.

— Марк Врабель

1

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

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

— Дейв Фогт
джерело

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

— Jukka K. Korpela

0

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

Захопіть їх тут: https://alanhogan.com/bookmarklets#font-stack-full

Джерело знаходиться на GitHub .

Дивіться також: це CodePen , який використовує в основному той самий код. Спробуйте, вибравши різні абзаци та переглянувши оновлення таблиці / здогадайтесь!

— Алан Х.
джерело