Утилита для определения шрифта, используемого на сайте?
Например: Мне нравятся шрифты, используемые на веб-сайте: NYTimes , поэтому что-то, что могло бы отобразить все шрифты, используемые веб-сайтом, было бы здорово!
Я НЕ хочу, чтобы утилита обработки изображений могла анализировать скриншоты или сайт, которые будут задавать вопросы о шрифте и сужать его список.
Что-то, что может просто сканировать веб-сайт и перечислить его шрифты … Было бы здорово, если бы он мог накладывать шрифты на регионы, но это будет слишком далеко, я думаю.
- Можете ли вы порекомендовать хорошую замену для Windows Sound Recorder?
- Интернет-зависимый, необходимо программное обеспечение для контроля моего использования и блокировки доступа
- Что такое простой, маленький, но хороший наблюдатель RSI для Windows?
- Программа отключения звука для Windows?
- Очень простой видеоредактор
- Как сравнить различия между двумя файлами PDF в Windows?
- Google переводит клиент для OS X
- Какое программное обеспечение хорошо работает для просмотра массивных изображений TIFF в Windows 7?
- Как найти самые большие файлы и папки на диске?
- Разделить таблицу Excel на несколько слайдов PowerPoint
- Как защитить паролем внешний жесткий диск без его шифрования?
- Замена для ужасной, ужасной карты символов
- Как присоединиться к файлам MP3?
Существует несколько способов сделать это. Я на самом деле делаю это довольно много, потому что мне очень интересно, как работает CSS, а также я просто люблю типографию. Я хотел бы сделать это двумя способами:
- Используя «инспектор» с вашим браузером (это то, что вы ищете!) – я использую Google Chrome (потому что мне это нравится), который имеет встроенный инструмент Inspector . Вы действительно должны попробовать. Просто перейдите на сайт, щелкните правой кнопкой мыши на любом элементе, который вы хотите проанализировать, и нажмите «Осмотреть элемент» в контекстном меню. Инспектор отображает динамические свойства HTML и CSS , поэтому, если вы должны были проверить текстовый элемент, вы увидите свойство css
font-familyв инспекторе (в правой боковой панели), которое скажет вам, что такое шрифт (См. Ниже информацию о том, как интерпретировать этот CSS). Вы можете использовать Firebug для Firefox, чтобы выполнить что-то подобное, но я считаю, что инструмент Google Chrome Inspector намного превосходит (я веб-разработчик – я использую его для всего!). -
Или вы можете вручную просмотреть исходный код страницы и проанализировать CSS. Вот как это сделать:
-
Когда вы находитесь на странице, просмотрите источник. Если вы находитесь в Internet Explorer, перейдите на страницу -> Просмотр источника или Просмотр -> Источник. Если вы используете Firefox, Chrome или любой другой современный браузер, нажмите Ctrl + U (или Apple + U, в зависимости от вашей операционной системы).
-
В HTML-коде найдите текстовое содержимое, которое вы пытаетесь проанализировать. Вы должны найти теги, которые содержат текст, и могут содержать либо шрифты, закодированные в HTML (с использованием
<font>либо в атрибутеstyleв приложении<p>или<div>), либо Может ссылаться на некоторые CSS (искать атрибутclassилиidи записывать их вниз). -
Если это последний (он ссылается на некоторый CSS), перейдите в верхнюю часть HTML и найдите теги
<link>в<head>страницы. Если ссылка ссылается на таблицу стилей, вы увидите ее – все, что вам нужно сделать, это перейти к этой таблице стилей CSS и найти идентификаторы классов или идентификаторов, которые вы записали. Где-то вы найдете соответствующий проксиfont-familyфайлfont-familyшрифтов (не забывайте, что вы также можете устанавливать шрифты по всему миру, и это будет под<body>или что-то еще. Вот почему вы должны использовать инструмент инспектора , Потому что эта трудность преодолена).
-
Как интерпретировать семейство font-family css:
Свойство font-family определит, что такое шрифты. В этом свойстве шрифты будут разделены запятыми . При рендеринге страницы браузер просматривает этот список и использует первый шрифт в нем, который находится на компьютере . Во многих случаях существует также категория шрифтов в конце этого свойства, что является просто «в любом случае», так что шрифт по умолчанию для этой категории используется, если другие не доступны.
Пример: предположим, что это css для приложения <p> .
p.thisisasampleclass { font-family: Calibri, "Comic Sans MS", Georgia, sans-serif; }
Здесь браузер сначала попытается использовать Calibri, если шрифт доступен. Если нет, он использует Comic Sans MS или Georgia или только шрифт по умолчанию без засечек, если другие недоступны.
Вот как вы можете узнать, какие шрифты используются. Я не нашел каких-либо хорошо разработанных и полезных инструментов, которые визуализируют CSS очень красиво, но я думаю, что опция Inspector будет работать для вас (это не слишком запутывает!). Я думаю, что это путь.
Пример того, как найти шрифты NYTimes с помощью инструмента Inspector:
Я расскажу вам, как найти шрифты для основного текста статьи NYTimes в Google Chrome.
-
Перейдите к статье на NYTimes.com, щелкните правой кнопкой мыши текстовый элемент, на котором вы хотите найти шрифты, и нажмите « Проверить элемент» .
-
Посмотрите на боковую панель справа. В раскрывающемся списке « Вычисленный стиль» вы увидите свойства CSS для этого элемента. Однако, как вы можете видеть, здесь нет свойства font-family, что означает, что шрифты определяются глобально, а не только для этого конкретного элемента. Тем не менее, есть способ обойти это!
-
Это то, что вы делаете: выберите переключатель рядом с надписью «Показать унаследованный».
-
В разделе «Вычисленный стиль» появится много других глобальных свойств.
-
Прокрутите список вниз до списка "font-family". Он должен быть серым, что означает, что это унаследованное глобальное свойство. Здесь вы можете увидеть используемые шрифты! Та-да!
Есть две разные вещи:
- Какой шрифт фактически используется (браузером / операционной системой).
- Какой шрифт был запрошен (создателем веб-сайта).
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 »View Style Information не показывает вам никаких« унаследованных »(« каскадных ») стилей, а только информацию, относящуюся к области, которую вы нажимаете. Вместо этого, чтобы получить своего рода наложение и фактически увидеть информацию о шрифте, вы можете использовать информацию «Информация о дисплее». Это покажет подробности, когда вы нажмете на страницу где-нибудь.
Если вы используете Firefox, есть надстройка Font Finder . Это в основном то, что Максим З. описал в своем ответе , но автоматически, поэтому он очень прост в использовании.