Як я можу знати, якими шрифтами користується веб-сайт?

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

Варіант 1: Використовуйте розширення для браузера (Easy)

Розширення, такі як WhatFont (доступні для Chrome, Firefox та Safari), дозволяють легко виявити сімейства шрифтів будь-якого тексту на веб-сторінці. Вам просто потрібно встановити розширення, активувати його на сайті та натиснути на елемент, який ви хочете перевірити. Результати відображаються у плаваючому вікні, завжди в контексті вашого вибору.

Варіант 2: Перевірте CSS вручну з інспекторами браузера (Додатково)

Більшість веб-браузерів дозволяють легко знаходити шрифти, використовуючи right-click→ "Оглянути" або "Перевірити елемент". Це також можна зробити натисканням F12. Це покаже список стилів, приєднаних до веб-сайту, який ви можете вивчити, щоб знайти шрифти, які використовуються в будь-якому HTML-елементі.

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

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

Нарешті, ще один спосіб швидко перевірити, які шрифти використовуються в усьому світі (але НЕ як і де) - перейти до програми «Застосування → Кадри → Шрифти» . Там ви знайдете список усіх посилань (несистемних) шрифтів.

Цей другий метод більш повільний, але використання інспектора може дати вам прекрасне розуміння того, як будується вся сторінка. Крім того, багато дизайнерів та розробників використовують його як інструмент для тестування змін, перш ніж насправді записати їх на таблицю стилів (адже зміна CSS-лінії в інспекторі запускає попередній перегляд у реальному часі у браузері).

"Оглянути елемент" браузера не є ідеальним

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

Ще один корисний інструмент - Fount .

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

Використовувати Fount так само просто, як додати закладку. Не потрібно встановлювати додаток чи будь-які розширення.

Після додавання закладок:

1. Перейдіть на будь-який сайт і натисніть закладку Fount.
2. Клацніть будь-який тип, який ви хочете визначити. Повторіть.
3. Щоб вимкнути функцію Fount, просто натисніть закладку ще раз.

Fount працює в Safari, Chrome, Firefox та IE8 +.

Мені подобається розширення CSSViewer для браузера Chrome . Ви просто натискаєте на нього та наведіть курсор миші на шрифт, який ви хочете визначити, і він показує сімейство шрифтів.

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

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