Утилита для определения шрифта, используемого на сайте? [закрытый]
Например: Мне нравятся шрифты, используемые на веб-сайте: NYTimes, таким образом, что-то, что могло перечислить все шрифты, используемые веб-сайтом, будет большим!
Я НЕ хочу утилиту обработки изображений, которая могла проанализировать снимки экрана или сайт, который задаст вопросы о шрифте и сузит из его списка.
Что-то, что могло просто проверить веб-сайт и перечислить его шрифты... Было бы замечательно, если бы это могло бы наложить шрифты на регионах, но это зашло бы слишком далеко, я предполагаю.
8 ответов
Существует несколько способов выполнить это. Я на самом деле делаю это довольно много, потому что я очень интересуюсь тем, как CSS работает, и также я просто люблю типографию. Этими двумя путями мне нравится делать, это:
- Используя "инспектора" с Вашим браузером (это - то, что Вы ищете!) - я использую Google Chrome (потому что я люблю его), который имеет встроенный инструмент Inspector. Действительно необходимо попробовать его. Вы просто переходите к сайту, щелкаете правой кнопкой по любому элементу, Вы хотите проанализировать, и нажать "Inspect Element" из контекстного меню. Инспектор отображает динамические свойства HTML и CSS, поэтому если бы необходимо было осмотреть текстовый элемент, то Вы видели бы
font-familyсвойство CSS в инспекторе (на правильной боковой панели), который скажет Вам, что шрифт (см. ниже для получения информации о том, как интерпретировать этот CSS). Можно использовать Firebug для Firefox для выполнения чего-то подобного, но я полагаю, что инструмент Google Chrome Inspector намного выше (я - веб-разработчик - я использую его для всего!). Или, можно вручную просмотреть источник страницы и проанализировать CSS. Вот то, как сделать это:
Когда Вы находитесь на странице, просматриваете источник. Если Вы находитесь в Internet Explorer, перейдите к Page-> Источник Представления или Представление-> Источник. При использовании Firefox Chrome или любой другой современный браузер, поразил Ctrl+U (или Apple+U, в зависимости от операционной системы).
В HTML-коде ищите текстовое содержание, которое Вы пытаетесь проанализировать. Необходимо найти некоторые теги, которые содержат текст, и им можно было или трудно кодировать шрифты в HTML (использующий a
<font>тег или вstyleатрибут a<p>или a<div>корпус), или это может сослаться на некоторый CSS (ищите aclassилиidатрибут, и записывает их).Если это - последний (это ссылается на некоторый CSS), перейдите к вершине HTML и найдите
<link>теги в<head>из страницы. Если ссылка сошлется на таблицу стилей, то Вы будете видеть его - все, что необходимо сделать, теперь движение к той таблице стилей CSS, и ищите класс или идентификационные идентификаторы, которые Вы записали. Где-нибудь, Вы найдете соответствиеfont-familyproerpty (не забывают, можно также установить шрифты глобально через сайт, и это было бы под<body>тег или что-то еще. Поэтому необходимо использовать инструмент инспектора, потому что эта трудность преодолена).
Как интерпретировать font-family CSS:
font-family свойство определит, каковы шрифты. В этом свойстве шрифты будут разделены с запятыми. При рендеринге страницы браузер будет просматривать этот список и использовать первый шрифт в нем, который находится на компьютере. Во многих случаях существует также категория шрифта в конце этого свойства, которое является просто "на всякий случай" так, чтобы стандартный шрифт для той категории использовался, если никакие другие не доступны.
Пример: Скажем, то, что это - некоторая CSS для a <p> корпус.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
Здесь, браузер сначала попытается использовать Calibri, если шрифт будет доступен. В противном случае это использует Comic Sans MS, или Джорджию или просто шрифт гротескового шрифта по умолчанию, если другие не доступны.
Это - то, как можно узнать, какие шрифты используются. Я не нашел хорошо сложенных и полезных инструментов, которые визуализируют CSS очень хорошим способом, но я думаю, что опция Inspector будет работать на Вас (это не слишком сбивает с толку!). Я думаю, что это - способ пойти.
Пример того, как найти шрифты NYTimes с инструментом Inspector:
Я собираюсь обойти Вас через, как найти шрифты для тела основного текста статьи NYTimes с Google Chrome.
Перейдите к статье о NYTimes.com, щелкните правой кнопкой по текстовому элементу, Вы хотите найти, что шрифты для, и совершать нападки Осматривают Элемент.
Посмотрите на боковую панель справа. В Вычисленном выпадающем Стиле Вы будете видеть свойства CSS для этого элемента. Однако как Вы видите, нет никакого свойства семейства шрифтов здесь в настоящее время, что означает, что шрифты определяются глобально, не только для этого определенного элемента. Однако существует способ обойти это!
Это - то, что Вы делаете: Установите переключатель рядом с "Наследованным шоу".
Много других глобальных свойств появится под "Вычисленным Стилем".
Прокрутите вниз в списке к "семейству шрифтов". Это должно быть в сером, означая, что это - наследованное глобальное свойство. Здесь, Вы видите используемые шрифты! Ta-da!
Существует две разных вещи:
- Какой шрифт на самом деле используется (браузером/операционной системой).
- Какой шрифт требовал (создатель веб-сайта).
1. Какая (нейтрализация) шрифт на самом деле используется
Для знания наверняка, какой шрифт используется в определенном браузере на компьютере/операционной системе в наше время Firefox и Chrome имеют встроенные инструменты для этого. Как Firefox у Инспектора Страницы есть Представление Шрифтов:
Для получения дополнительной информации посмотрите, Как я могу определить, какой шрифт браузер на самом деле использует для рендеринга некоторого текста? на Переполнении стека. Это включает:
- Текст мог бы включать символы Unicode, которые не находятся в шрифте, который определяется в CSS, таким образом, несколько шрифтов могли бы использоваться в единственном элементе.
- Не каждый браузер на той же машине мог бы использовать тот же тип шрифта (такой как TrueType, Передовая технология Apple, Microsoft OpenType, PostScript OpenType) и следовательно мог бы использовать различные шрифты. Таким образом, Вы, возможно, должны были бы определить, какой шрифт используется в других браузерах.
2. Какой шрифт требовали
Для сообщения, какой шрифт требовал (создатель веб-сайта) инструменты как встроенный Инспектор Страницы Firefox или ее расширение Firebug помогают осмотреть правила CSS. Такие инструменты не говорят Вам, какой шрифт на самом деле используется, но, действительно показывает, какой шрифт требуют на определенный регион, или даже на определенное слово, учитывая таблицу стилей CSS:
Вышеупомянутый выставочный Firebug. Сначала выберите "Вычисленный стиль шоу" в меню Style справа. Затем, нажмите кнопку стрелки слева. И затем просто нажмите на текст своего интереса. Это обновит информацию о таблице стилей CSS справа. Посмотрите функции для приобретения знаний о функциях CSS.
Некоторый Облегченный Firebug также доступен для других браузеров, но я никогда не использовал это.
У веб-Инспектора в Safari и Инструментов Разработчика в Chrome есть подобные опции. (В Safari включите веб-Инспектору через предпочтения: Покажите меню Develop в строке меню.) Internet Explorer имеет инструменты F12.
Как электронный-t172 отметил: Панель инструментов Веб-разработчика для Firefox может также показать эту информацию Однако, CSS» Просматривает Информацию о стилях, не показывает Вам "наследованных" ("каскадных") стилей, но только информации, которая характерна для региона, который Вы нажимаете. Вместо этого чтобы получить своего рода наложение и на самом деле видеть информацию о шрифтах, можно использовать информацию» информация об Элементе отображения вместо этого. Это покажет детали каждый раз, когда Вы нажимаете на страницу где-нибудь.
Я не знаю ни о каком программном обеспечении. Я просто использовал Internet Explorer и нашел, что используемый шрифт:
шрифт-family:georgia, "Times New Roman", времена, засечка
Это - основной шрифт. Поиск таблицы стилей для чего-либо с семейством шрифтов предоставит остальным.
Процесс:
- Щелкните правой кнопкой по Home Page
- Ищет rel=stylesheet строку и приложенную таблицу стилей URL
- Копия и вставка в браузер и загрузка файл CSS.
- Открытый в текстовом редакторе.
Если Вы ищущий шрифт в изображениях, которые не будут определены за пределами изображения.
Да мне чрезвычайно надоели. Это - день пятницы, в конце концов. Я не отправил ссылку, так как они обновляют таблицу стилей regurlarly.
Можно использовать расширение Firefox Веб-разработчика для наблюдения всех стилей, используемых определенной частью веб-страницы. Используйте меню CSS, информацию о стилях Представления. Затем нажмите на текст, который Вы хотите проанализировать, и искать свойство "семейства шрифтов" в результатах.
Вопреки тому, что сказало много людей, это НЕ всегда просто, вопрос просмотра источника и т.д. - зависит, если CSS находится в документе или во внешнем файле CSS. Если это является внешним, Вы не можете только просмотреть источник и найти тег семейства шрифтов, поскольку это не находится на самом деле там в файле.
Плакат, советующий для использования Google Chrome на самом деле, дал очень хороший совет - я изучил что-то здесь и требуемый для добавления дополнительной подсказки. В инструментах разработчика, который подходит в Chrome, Вам, ВОЗМОЖНО, ПРИДЕТСЯ нажать на "Computed Style", затем нажимают поле галочки "Show Inherited", затем прокручивают вниз перед нахождением его - это - экстремальный пример, но где это показывает, будет зависеть от того, как страница была структурирована.
При использовании Firefox существует Дополнение Средства поиска Шрифта. Это делает в основном, что Maxim Z.described в его ответе, но автоматически, таким образом, это действительно просто в использовании..
если это не встроенная CSS, просто открывают страницу на исходном представлении. Скопируйте адрес CSS как вставка "/themes/01.css" на URL браузера. Скопируйте вставку возврата в редакторе текстового редактора или CSS. Используйте находят к прекрасному шрифту или семейству шрифтов сделанный. Перечисленное использование семейства шрифтов для отображения шрифта страницы для размера и другого атрибута как полужирный, курсивное и т.д.
Спасибо doronto
Вот простое, но эффективное, решение: bookmarklet, который показывает Вам конфигурацию, относился к элементу (включая семейство шрифтов).
Сайт Jesse Bookmarklets имеет хороший для этого задания: computed styles.
Вот: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles