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

9

Наприклад: Мені подобаються шрифти, які використовуються на веб-сайті: NYTimes , тому щось, що могло б перерахувати всі шрифти, використовувані веб-сайтом, було б чудово!

Я НЕ хочу утиліту для обробки зображень, яка могла б проаналізувати скріншоти або сайт, який задаватиме питання щодо шрифту та звужуватись зі свого списку.

Щось, що може просто просканувати веб-сайт і перелічити його шрифти ... Було б чудово, якби він міг накладати шрифти на регіони, але це, мабуть, надто далеко.

software-rec website fonts

— Лазер
джерело

@Arjan чому :-(? Я чітко зазначив, що я не шукаю, що було темою більшості відповідей там.

— Lazer,

Firefox зробив це дуже просто в наші дні для однієї сторінки; дивіться мою оновлену відповідь .

— Ар'ян

20

Існує кілька способів цього досягти. Я насправді цим займаюся досить багато, тому що мене дуже цікавить, як працює CSS, а також я просто люблю типографіку. Мені подобається це два способи:

Використання "інспектора" у вашому браузері (це те, що ви шукаєте!) - я використовую Google Chrome (тому що мені це подобається), який має вбудований інструмент Inspector . Ви дійсно повинні спробувати. Ви просто переходите на сайт, клацніть правою кнопкою миші на будь-якому елементі, який ви хочете проаналізувати, і в контекстному меню натисніть кнопку "Перевірити елемент". Інспектор відображає динамічні властивості HTML та CSS , тож якби ви оглядали текстовий елемент, ви побачили б font-familyвластивість cssу інспекторі (у правій бічній панелі), який підкаже, що таке шрифт (див. нижче інформацію про те, як інтерпретувати цю CSS). Ви можете використовувати Firebug для Firefox, щоб здійснити щось подібне, але я вважаю, що інструмент Google Chrome Inspector набагато перевершує (я веб-розробник - я використовую його для всього!).
Або ви можете вручну переглянути джерело сторінки та проаналізувати CSS. Ось як це зробити:
1. Перебуваючи на сторінці, перегляньте джерело. Якщо ви перебуваєте в Internet Explorer, перейдіть на сторінку -> Переглянути джерело або Переглянути -> Джерело. Якщо ви використовуєте Firefox, Chrome або будь-який інший сучасний веб-переглядач, натисніть Ctrl + U (або Apple + U, залежно від вашої операційної системи).
2. У коді HTML знайдіть текстовий вміст, який ви намагаєтесь проаналізувати. Ви повинні знайти деякі теги, що містять текст, і вони можуть мати шрифти жорстко закодовані в HTML (за допомогою <font>тегу або в styleатрибуті <p>або <div>вкладеному файлі), або він може посилатися на деякий CSS (шукайте classабо idатрибут , і запишіть їх).
3. Якщо це останній (він посилається на деякий CSS), перейдіть до верхньої частини HTML-коду та знайдіть <link>теги <head>на сторінці сторінки. Якщо посилання посилається на таблицю стилів, ви побачите його - все, що вам потрібно зробити зараз, - це перейти до цього аркуша стилів CSS та здійснити пошук ідентифікаторів класу чи id, які ви записали. Десь ви знайдете відповідний font-familyproerpty (не забудьте, ви також можете встановити шрифти в усьому світі через сайт, і це було б під <body>тегом чи ще чимось. Ось чому вам слід скористатися інструментом інспектора, оскільки ця складність подолана ).

Як інтерпретувати font-familycss:

font-familyВластивість визначає , які шрифти. У цій власності шрифти будуть відокремлені комами . Під час надання сторінки веб-переглядач перегляне цей список і використає перший шрифт у ньому на комп'ютері . У багатьох випадках в кінці цього властивості є також категорія шрифту, яка є просто «про всяк випадок», так що шрифт за замовчуванням для цієї категорії використовується, якщо інші недоступні.

Приклад: Скажімо, що це деякий css для <p>додатка.

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

Тут браузер спершу спробує використовувати Calibri, якщо шрифт доступний. Якщо ні, то він використовує Comic Sans MS або Georgia або просто шрифт sans-serif за замовчуванням, якщо інші недоступні.

Саме так ви можете дізнатися, які шрифти використовуються. Я не знайшов жодних добре побудованих та корисних інструментів, які б дуже приємно візуалізували CSS, але я думаю, що варіант Інспектор підійде для вас (це не надто заплутано!). Я думаю, що це шлях.

Приклад того, як знайти шрифти NYTimes за допомогою інструмента Inspector:

Я перегляну вас, як знайти шрифти для основного тексту тексту статті NYTimes за допомогою Google Chrome.

Перейдіть до статті на NYTimes.com, клацніть правою кнопкою миші на текстовому елементі, для якого потрібно знайти шрифти, і натисніть « Оглянути елемент» .
Подивіться на бічну смужку праворуч. У спадному меню Computed Style ви побачите властивості CSS для цього елемента. Однак, як ви бачите, в даний час тут немає властивості сімейства шрифтів, це означає, що шрифти визначені в усьому світі, а не лише для цього конкретного елемента. Однак є спосіб обійти це!
Це те, що ви робите: Виберіть перемикач поруч із пунктом "Показати спадкове".
У розділі "Computed Style" з'явиться багато інших глобальних властивостей.
Прокрутіть униз у списку до "сімейства шрифтів". Він повинен бути сірим кольором, це означає, що це спадкова глобальна властивість. Тут ви можете побачити використані шрифти! Та-да!

— Максим Заславський
джерело

Я зараз додам приклад пояснення для NYTimes.

— Максим Заславський

дякую промінь, я люблю це місце - www.superuser.com, навіть більше зараз :)

— Lazer,

@ Maximz2005, для деяких виборів я не отримую "Computed Style" спадного меню. Я просто отримую порожнє спадне меню "Стиль". Чому так?

— Лазер

1

Оскільки інспектор насправді є інспектором WebKit, я припускаю, що пізніша бета-версія також буде включати більш нову версію WebKit? Новіша версія, звичайно, може показувати нові помилки, але мені цікаво, чи, мабуть, ви просто зіткнулися з одним. Чи є спосіб показати версію WebKit, яка використовується в Chrome?

— Ар'ян

1

моя - WebKit 532.0 @Maxim Z. Я спробував у хроні мого друга (версія 3. щось). Там прекрасно працює. Нарешті я можу виявити шрифти так, як хотів. Тепер я розумію, наскільки класною є "перевірити елемент" насправді.

— Лазер

7

Є дві різні речі:

Який шрифт фактично використовується (браузером / операційною системою).
Який шрифт був запитаний (автором веб-сайту).

1. Який (резервний) шрифт фактично використовується

Щоб точно знати, який шрифт використовується в конкретному браузері на вашому комп’ютері / операційній системі, сьогодні Firefox та Chrome мають вбудовані інструменти для цього. Як і Firefox Page Inspector, має перегляд шрифтів :

Докладніше див. У розділі Як я можу визначити, який шрифт насправді використовує браузер для відтворення тексту? на стеку переповнення. Це включає:

Текст може містити символи Unicode, які не містять шрифту, визначеного в CSS, тому в одному елементі може використовуватися кілька шрифтів.
Не кожен браузер на одній машині може використовувати один і той же тип шрифту (наприклад, TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript) і, отже, може використовувати різні шрифти. Тому вам може знадобитися визначити, який шрифт використовується в інших браузерах.

2. Який шрифт запитували

Щоб визначити, який шрифт був запитаний (творцем веб-сайту), такі інструменти, як вбудований Firefox Page Inspector або його розширення Firebug, допомагають перевірити правила CSS. Такі інструменти не вказують, який шрифт використовується , але показує, який шрифт запитується для конкретного регіону чи навіть для конкретного слова, враховуючи таблицю стилів CSS:

Сказане вище показує Firebug. Спочатку виберіть "Показати обчислений стиль" у меню "Стиль" праворуч. Далі натисніть кнопку стрілки зліва. А потім просто натисніть на текст, що цікавить вас. Це оновить інформацію аркуша стилів CSS праворуч. Дивіться функції, щоб дізнатися про функції CSS.

Деякий Firebug Lite також доступний для інших браузерів, але я ніколи цього не використовував.

Веб-інспектор у Safari та Інструменти для розробників у Chrome мають подібні параметри. (У Safari увімкніть веб-інспектора за допомогою налаштувань. Показуйте меню "Розвиток" у рядку меню .) У Internet Explorer є інструменти F12 .

Як зазначає e-t172 : панель інструментів веб-розробників для Firefox також може відображати цю інформацію. Однак CSS »Інформація про стиль перегляду не показує вам жодних« успадкованих »(« каскадних ») стилів, а лише інформацію, яка є специфічною для регіону, на який ви натискаєте. Натомість, щоб отримати своєрідне накладення та фактично побачити інформацію про шрифт, ви можете використовувати Інформацію »Відображення інформації про елементи. Це покаже деталі кожного разу, коли ви десь натиснете на сторінку.

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

+1 Для більш детальної відповіді, ніж моя.

— BinaryMisfit

Як у вас з’явилися ці згасаючі скріншоти? Схоже на Mac, чи є шанс отримати подібний ефект на Vista чи XP?

— Лазер

@Lazer, Skitch на Mac (але тіні на зразок стандартних і потрібних, оскільки OS X має дуже тонкі межі вікон, якщо такі є). Не знаєте, як це зробити в Windows.

— Ар'ян

4

Якщо ви використовуєте Firefox, є додатком Шриф пошуку . Це в основному те, що описав Максим З. у своїй відповіді , але автоматично, тому користуватися дійсно просто.

— Людвіг Вайнцерль
джерело

Шукач шрифтів - саме те, що я шукав. Якби там було подібне розширення для Chrome.

— кенгакс

@kangax, існує нині; дивіться відповідь Алека

— Ар'ян

І @kangax, сьогодні Firefox та Chrome мають вбудовані інструменти для визначення справжнього шрифту. Більше немає здогадів.

— Ар'ян

4

Це, безумовно, найкраще рішення, з яким я стикався. Це закладки / розширення, які 99% часу точно скажуть вам , який шрифт використовується, порівнюючи пікселі відображуваного тексту з тими, що містяться у кожному шрифті, включаючи шрифти API TypeKit та Google Font API.

WhatFont Tool

введіть тут опис зображення

Перевір.

— Макс
джерело

Приємно, дуже приємно, але я не думаю, що насправді порівнюють пікселі (зараз)? Коли CSS просто каже, font-family: sans-serifто про це також повідомляється, але це само по собі не є шрифтом. При використанні font-family: someUnknownFontя отримую (default font)як результат, який тоді насправді Times на моєму Mac. (Випробувано за допомогою закладок, використовуючи цей скриньку JS ; скріншот .) Ще раз: приємно!

— Ар'ян

@ Арджун я детально розглядав це кілька місяців тому, тому я поясню так само добре, як пам'ятаю. Під капотом він робить дві речі. Він використовується window.getComputedStyleдля отримання обчисленої сімейства шрифтів. Потім він повторює цей стек, порівнюючи пікселі кожного шрифту з відображеними пікселями. Перший збіг - це той, який показано курсивом у спливаючому вікні, решта - нормально. Якщо немає відповідності, воно з’явиться (default font). Причина, яку ви бачите, sans-serifполягає в тому, що вона правильно відповідає sans-serifшрифту, але в даний час вона не розрізняє більше.

— Макс

Firefox - мій новий найкращий друг для цього; дивіться мою оновлену відповідь :-)

— Арджан

3

Я не знаю жодного програмного забезпечення. Я тільки що скористався Internet Explorer і виявив, що шрифт:

сімейство шрифтів: georgia, "times new roman", times, serif

Це основний шрифт. Пошук у таблиці стилів для чого-небудь із сімейством шрифтів забезпечить решту.

Процес:

Клацніть правою кнопкою миші на домашній сторінці
Шукає лінію rel = стилів та URL-адресу вкладеного стилю
Скопіюйте та вставте у браузер та завантажте файл css.
Відкрити в текстовому редакторі.

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

_{Так, мені було надзвичайно нудно. Зрештою, п’ятниця вдень. Я не публікував посилання, оскільки вони регулярно оновлюють таблицю стилів.}

— BinaryMisfit
джерело

Uhuh, Firebug у Firefox або веб-інспектор у Safari ...?

— Ар’ян

1

Як я сказав. Мені було нудно. Змініть свій смак браузера та перегляду джерела. Є й інші інструменти, але простота - це не обов'язково неправильний підхід.

— BinaryMisfit

Хороший лише той факт, що він навчає користувача чомусь іншому, ніж завжди покладатися на Firefox.

— випадковий

Згідно з Вікіпедією, обидва georgiaі times new romanє шрифтами. Отже, що означає результат? Поєднання цих двох шрифтів?

— Лазер

1

Ви можете використовувати розширення Web Developer Firefox, щоб переглянути всі стилі, які використовуються в певній частині веб-сторінки. Використовуйте меню CSS, Перегляд інформації про стиль. Потім натисніть на текст, який ви хочете проаналізувати, і знайдіть в результатах властивість "сімейство шрифтів".

— Етьєн Дечамп
джерело

Інформація »Інформація про елемент відображення працює краще (вона також відображатиме успадковані стилі, і вам не потрібно шукати себе).

— Ар'ян

1

На відміну від того, що багато людей сказали, це НЕ завжди питання лише перегляду джерела тощо - залежить, якщо CSS знаходиться у документі чи у зовнішньому файлі css. Якщо він зовнішній, ви не можете просто переглянути джерело і знайти тег сімейства шрифтів, оскільки його насправді немає у файлі.

Плакат, який радить використовувати Google Chrome, насправді дав дуже гарну підказку - я щось тут навчився і хотів додати додаткову підказку. У інструментах для розробників, які з'являються в Chrome, ви МОЖЕТЕ натиснути на "Computed Style", потім натиснути кнопку "Показати успадкований", а потім прокрутити вниз, перш ніж знайти - це крайній приклад, але там, де це відображатиметься, буде залежати як структурується сторінка.

0

Ось просте, але ефективне рішення: закладка, що показує вам конфігурацію, застосовану до елемента (включаючи сімейство шрифтів).

Джессі Букмарклет Сайт має хороший для цієї роботи: computed styles.

Ось ви йдете: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles

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

-1

якщо це не вбудований CSS, просто відкрийте сторінку у поданні джерела. Скопіюйте адресу css, як-от "/themes/01.css", на вставку браузера. Скопіюйте пасту повернення в текстовий редактор або редактор css. Використовуйте функцію знаходження для тонкого шрифту чи сімейства шрифтів. Перелічене сімейство шрифтів використовує для відображення шрифту сторінки за розміром та іншим атрибутом, наприклад жирним шрифтом, курсивом тощо.

Спасибі Доронто

— Отримайте безкоштовне зворотне посилання
джерело