Например: мне нравятся шрифты, используемые на веб-сайте: NYTimes, поэтому что-то, что могло бы перечислить все шрифты, используемые веб-сайтом, было бы здорово!
Я НЕ хочу утилиту обработки изображений, которая могла бы анализировать скриншоты или сайт, который будет задавать вопросы о шрифте и сужаться из его списка.
Что-то, что может просто сканировать сайт и перечислять его шрифты ... Было бы замечательно, если бы это могло наложить шрифты на регионы, но, думаю, это зашло бы слишком далеко.
Есть несколько способов сделать это. На самом деле я делаю это довольно много, потому что мне очень интересно, как работает 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 шрифтов (не забудьте, что вы также можете установить шрифты по всему сайту, и это будет под <body> или чем-то еще. Вот почему вы должны использовать инструмент инспектора, потому что эта трудность преодолена).
Как интерпретировать CSS font-family :
Свойство font-family будет определять, какие шрифты. В этом свойстве шрифты будут разделяться запятыми. При отображении страницы браузер просматривает этот список и использует первый шрифт, который находится на компьютере. Во многих случаях есть также категория шрифта в конце этого свойства, которая является просто «на всякий случай», так что шрифт по умолчанию для этой категории используется, если другие недоступны.
Пример: допустим, что это некий css для <p> вложения.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
Здесь браузер сначала попытается использовать Calibri, если шрифт доступен. Если нет, он использует Comic Sans MS, или Georgia, или просто шрифт без засечек по умолчанию, если другие недоступны.
Вот как вы можете узнать, какие шрифты используются. Я не нашел хороших и полезных инструментов, которые бы очень хорошо визуализировали CSS, но я думаю, что опция Inspector подойдет вам (это не слишком запутанно!). Я думаю, что это путь.
Пример поиска шрифтов NYTimes с помощью инструмента «Инспектор»:
Я собираюсь рассказать вам, как найти шрифты для основного текста статьи в NYTimes с помощью Google Chrome.
Перейдите к статье на NYTimes.com, щелкните правой кнопкой мыши на текстовом элементе, для которого вы хотите найти шрифты, и нажмите « Проверить элемент».
Посмотрите на боковую панель справа. В раскрывающемся списке « Вычисляемый стиль» вы увидите свойства CSS для этого элемента. Однако, как вы можете видеть, в настоящее время здесь нет свойства font-family, что означает, что шрифты определены глобально, а не только для этого конкретного элемента. Тем не менее, есть способ обойти это!
Это то, что вы делаете: установите переключатель рядом с "Показать унаследованное".
Многие другие глобальные свойства появятся в разделе "Computed Style".
Прокрутите список вниз до «font-family». Он должен быть серым, что означает, что это унаследованное глобальное свойство. Здесь вы можете увидеть используемые шрифты! Та-да!
Есть две разные вещи:
Чтобы точно знать, какой шрифт используется в определенном браузере на вашем компьютере / в операционной системе, в настоящее время Firefox и Chrome имеют встроенные инструменты для этого. Как инспектор страниц Firefox имеет вид шрифтов:
Дополнительные сведения см. В разделе « Как определить, какой шрифт в действительности используется браузером для визуализации текста»? Переполнение стека. Это включает:
Чтобы определить, какой шрифт был запрошен (создателем веб-сайта), такие инструменты, как встроенный Firefox Page Inspector или его расширение Firebug, помогают проверять правила CSS. Такие инструменты не сообщают вам, какой шрифт фактически используется, но показывают, какой шрифт запрашивается для определенной области или даже для конкретного слова, учитывая таблицу стилей CSS:
Выше показан Firebug. Сначала выберите "Показать вычисленный стиль" в меню "Стиль" справа. Далее нажмите кнопку со стрелкой слева. А затем просто нажмите на текст вашего интереса. Это обновит информацию таблицы стилей CSS справа. Смотрите функции, чтобы узнать о функциях CSS.
Некоторый Firebug Lite также доступен для других браузеров, но я никогда не использовал это.
Веб-инспектор в Safari и Инструменты разработчика в Chrome имеют аналогичные параметры. (В Safari включите веб-инспектор через настройки: Показать меню «Разработка» в строке меню.) Internet Explorer имеет инструменты F12.
Как отметил e-t172: панель инструментов веб-разработчика для Firefox также может отображать эту информацию. Тем не менее, CSS »Просмотр информации о стилях не показывает какие-либо" унаследованные "(" каскадные ") стили, а только информацию, относящуюся к области, по которой вы щелкаете. Вместо этого, чтобы получить вид наложения и реально увидеть информацию о шрифте, вы можете использовать Информация »Показать информацию об элементе. Это покажет детали, когда вы нажимаете на страницу где-то.
Это, безусловно, лучшее решение, с которым я столкнулся. Это букмарклет / расширение, которое в 99% случаев точно скажет , какой шрифт используется, сравнивая пиксели отображаемого текста с пикселями каждого доступного шрифта, включая шрифты TypeKit и Google Font API.
Проверьте это.
Если вы используете Firefox, есть дополнение Font Finder. Это в основном то, что Максим З. описал в своем ответе, но автоматически, поэтому его действительно легко использовать ..
Я не знаю ни одного программного обеспечения. Я просто использовал Internet Explorer и обнаружил, что используется следующий шрифт:
семья шрифтов: грузия, "времена нового римлянина", времена, засечек
Это основной шрифт. Поиск таблицы стилей для чего-либо с font-family предоставит все остальное.
Процесс:
Если вы ищете шрифт в изображениях, который не будет определен за пределами изображения.
Да, мне было очень скучно. В конце концов, сегодня пятница. Я не опубликовал ссылку, так как они регулярно обновляют таблицу стилей.
Вы можете использовать расширение для веб-разработчиков Firefox, чтобы увидеть все стили, используемые определенной частью веб-страницы. Используйте меню CSS, Просмотр информации о стиле. Затем нажмите на текст, который вы хотите проанализировать, и поищите свойство «font-family» в результатах.
Вопреки тому, что говорили многие люди, это не всегда просто вопрос просмотра источника и т.д. - зависит от того, находится ли CSS в документе или во внешнем CSS-файле. Если он внешний, вы не можете просто просмотреть исходный код и найти тег font-family, поскольку его на самом деле нет в файле.
Плакат, советующий использовать Google Chrome, на самом деле дал очень хороший совет - я кое-что узнал здесь и хотел добавить дополнительный совет. В инструментах разработчика, которые появятся в Chrome, вам СЛЕДУЕТ нажать кнопку "Computed Style", затем установить флажок "Show Inherited", а затем прокрутить вниз, прежде чем вы его найдете - это крайний пример, но от того, где он будет зависеть, будет зависеть как страница была структурирована.
Вот простое, но эффективное решение: букмарклет, который показывает конфигурацию, примененную к элементу (включая семейство шрифтов).
На сайте Jesse's Bookmarklets есть хороший вариант: computed styles .
Вот и вы: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles
если это не встроенный CSS, просто откройте страницу в режиме просмотра исходного кода. Скопируйте адрес CSS, например, «/themes/01.css», вставьте в URL браузера. Скопируйте возвратную вставку в текстовом редакторе или редакторе CSS. Используйте find для точного шрифта или font-family done. Перечисленное семейство шрифтов используется для отображения шрифта страницы для размера и других атрибутов, таких как жирный, курсив и т.д.
Спасибо Доронто