Например: мне нравятся шрифты, используемые на сайте: NYTimes , так что было бы здорово, если бы в нем были перечислены все шрифты, используемые на сайте !
Я НЕ хочу утилиту обработки изображений, которая могла бы анализировать скриншоты или сайт, который будет задавать вопросы о шрифте и сужаться из его списка.
Что-то, что может просто сканировать веб-сайт и перечислять его шрифты ... Было бы замечательно, если бы он мог перекрывать шрифты в регионах, но я думаю, это зашло бы слишком далеко.
software-rec
website
fonts
Lazer
источник
источник
Ответы:
Есть несколько способов сделать это. На самом деле я делаю это довольно много, потому что мне очень интересно, как работает CSS, а также я просто люблю типографику. Мне нравится это делать двумя способами:
font-familyсвойство cssв инспекторе (в правой боковой панели), который скажет вам, какой шрифт (см. ниже информацию о том, как интерпретировать этот CSS). Вы можете использовать Firebug для Firefox для достижения чего-то похожего, но я считаю, что инструмент Google Chrome Inspector намного лучше (я веб-разработчик - я использую его для всего!).Или вы можете вручную просмотреть источник страницы и проанализировать CSS. Вот как это сделать:
Когда вы находитесь на странице, просмотрите источник. Если вы находитесь в Internet Explorer, перейдите на страницу -> Просмотр источника или Просмотр -> Источник. Если вы используете Firefox, Chrome или любой другой современный браузер, нажмите Ctrl + U (или Apple + U, в зависимости от вашей операционной системы).
В коде HTML найдите текстовое содержимое, которое вы пытаетесь проанализировать. Вы должны найти некоторые теги, которые содержат текст, и они могут либо иметь жестко запрограммированные шрифты в HTML (используя
<font>тег или вstyleатрибуте a,<p>либо в<div>вложении), либо они могут ссылаться на некоторый CSS (ищитеclassилиidатрибут) и запишите это).Если это последний (он ссылается на некоторый CSS), перейдите в начало HTML и найдите
<link>теги на<head>странице. Если ссылка ссылается на таблицу стилей, вы увидите ее - все, что вам нужно сделать, это перейти к этой таблице стилей CSS и найти записанные вами идентификаторы класса или идентификатора. Где-то вы найдете соответствующийfont-familyаргумент (не забывайте, вы также можете установить шрифты глобально по всему сайту, и это будет под<body>тегом или чем-то еще. Вот почему вы должны использовать инструмент инспектора, потому что эта трудность преодолена ).Как интерпретировать
font-familyCSS:font-familyСвойство определяет , какие шрифты. В этом свойстве шрифты будут разделяться запятыми . При отображении страницы браузер просматривает этот список и использует первый шрифт, который находится на компьютере . Во многих случаях есть также категория шрифта в конце этого свойства, которая является просто «на всякий случай», так что шрифт по умолчанию для этой категории используется, если другие недоступны.Пример: допустим, это некий css для
<p>вложения.Здесь браузер сначала попытается использовать Calibri, если шрифт доступен. Если нет, он использует Comic Sans MS или Georgia, или просто шрифт без засечек по умолчанию, если другие недоступны.
Вот как вы можете узнать, какие шрифты используются. Я не нашел хороших и полезных инструментов, которые бы очень хорошо визуализировали CSS, но я думаю, что опция Inspector подойдет вам (это не слишком запутанно!). Я думаю, что это путь.
Пример того, как найти шрифты NYTimes с помощью инструмента «Инспектор»:
Я собираюсь рассказать вам, как найти шрифты для основного текста статьи в NYTimes с помощью Google Chrome.
Перейдите к статье на NYTimes.com, щелкните правой кнопкой мыши на текстовом элементе, для которого вы хотите найти шрифты, и нажмите « Проверить элемент» .
Посмотрите на боковую панель справа. В раскрывающемся списке « Вычисляемый стиль» вы увидите свойства CSS для этого элемента. Однако, как вы можете видеть, в настоящее время здесь нет свойства font-family, что означает, что шрифты определены глобально, а не только для этого конкретного элемента. Тем не менее, есть способ обойти это!
Это то, что вы делаете: выберите переключатель рядом с «Показать унаследованные».
Многие другие глобальные свойства появятся в разделе «Computed Style».
Прокрутите список вниз до «font-family». Он должен быть серым, что означает, что это унаследованное глобальное свойство. Здесь вы можете увидеть используемые шрифты! Та-да!
источник
Есть две разные вещи:
1. Какой (резервный) шрифт на самом деле используется
Чтобы точно знать, какой шрифт используется в определенном браузере на вашем компьютере / операционной системе, в настоящее время Firefox и Chrome имеют встроенные инструменты для этого. Как инспектор страницы Firefox имеет вид шрифтов :
Дополнительные сведения см. В разделе « Как определить, какой шрифт в действительности используется браузером для визуализации текста»? Переполнение стека. Это включает:
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 . Это в основном то, что Максим З. описал в своем ответе , но автоматически, поэтому его действительно легко использовать ..
источник
Это, безусловно, лучшее решение, с которым я столкнулся. Это букмарклет / расширение, которое в 99% случаев точно скажет , какой шрифт используется, сравнивая пиксели отображаемого текста с пикселями каждого доступного шрифта, включая шрифты TypeKit и Google Font API.
Инструмент WhatFont
Проверьте это.
источник
font-family: sans-serif, это также то, что сообщается, но это само по себе не шрифт. При использованииfont-family: someUnknownFontя получаю(default font)в результате, который на самом деле Times на моем Mac. (Протестировано с помощью букмарклета, с использованием этого JS Bin ; скриншот .) Еще раз: приятно!window.getComputedStyleдля получения вычисляемого семейства шрифтов. Затем он повторяет этот стек, сравнивая пиксели каждого шрифта с отображаемыми пикселями. Первое совпадение - это то, которое показывается курсивом во всплывающем окне, остальные отображаются нормально. Если нет совпадения, он покажет(default font). Причина, по которой вы видите,sans-serifсостоит в том, что он правильно сопоставляет его соsans-serifшрифтом, но в настоящее время он больше не распознает.Я не знаю ни одного программного обеспечения. Я просто использовал Internet Explorer и обнаружил, что используется следующий шрифт:
Это основной шрифт. Поиск таблицы стилей для чего-либо с font-family предоставит все остальное.
Обработать:
Если вы ищете шрифт в изображениях, который не будет определен за пределами изображения.
Да, мне было очень скучно. В конце концов, сегодня пятница. Я не опубликовал ссылку, так как они регулярно обновляют таблицу стилей.
источник
georgiaиtimes new romanявляются шрифтами. Итак, что означает результат? Комбинация этих двух гарнитур?Вы можете использовать расширение для веб-разработчиков Firefox, чтобы увидеть все стили, используемые определенной частью веб-страницы. Используйте меню CSS, Просмотр информации о стиле. Затем нажмите на текст, который вы хотите проанализировать, и найдите в результатах свойство «font-family».
источник
Вопреки тому, что говорили многие люди, это не всегда просто вопрос просмотра источника и т. Д. - зависит от того, находится ли CSS в документе или во внешнем CSS-файле. Если он внешний, вы не можете просто просмотреть исходный код и найти тег font-family, поскольку его на самом деле нет в файле.
Плакат, советующий использовать Google Chrome, на самом деле дал очень хороший совет - я кое-что узнал здесь и хотел добавить дополнительный совет. В инструментах разработчика, которые появятся в Chrome, вам СЛЕДУЕТ нажать кнопку «Computed Style», затем установить флажок «Show Inherited», а затем прокрутить вниз, прежде чем вы его найдете - это крайний пример, но от того, где он будет зависеть, будет зависеть как страница была структурирована.
источник
Вот простое, но эффективное решение: букмарклет, который показывает конфигурацию, примененную к элементу (включая семейство шрифтов).
Джесси Букмарклеты Сайт имеет хороший для этой работы:
computed styles.Вот и вы: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles
источник
если это не встроенный CSS, просто откройте страницу в режиме просмотра исходного кода. Скопируйте адрес CSS, например, "/themes/01.css", вставьте в URL браузера. Скопируйте возвратную вставку в текстовом редакторе или редакторе CSS. Используйте find для точного шрифта или font-family. Перечисленное семейство шрифтов используется для отображения шрифта страницы для размера и других атрибутов, таких как жирный, курсив и т. Д.
Спасибо Доронто
источник