Как я могу узнать, какие шрифты использует сайт?

36

Как я могу узнать, какой шрифт или шрифты использует веб-сайт? Существуют ли какие-либо инструменты или расширения для браузера, которые могут облегчить работу?

font-identification web-fonts canonical

— Yisela
источник

1

См. Мой ответ на Stack Overflow для встроенных инструментов в Chrome и Firefox и опции копирования-вставки для Safari: stackoverflow.com/questions/884177/…

— Arjan

Без 10 повторений, чтобы ответить, поэтому я делаю это здесь: как к этому моменту (2018.3), Fount недоступен, а WhatFont недоступен в магазине дополнений Firefox; наконец, я должен войти в Chrome / IE / FF / DevTool от Opera, вкладку «Стиль», отредактировать свойство, чтобы удалить каждый шрифт и посмотреть, какой применяется шрифт. Очень жаль, что все DevTools показывают только полный набор шрифтов, а не фактически примененный . Даже в FF «наилучшее совпадение» не является наилучшим совпадением; всплывающее окно с "лучшим соответствием" отображается для каждого шрифта в стеке ........ глупо, верно?

— WesternGun

@WesternGun, что вы подразумеваете под "всеми DevTools" ? Firefox и Chrome показывают настоящий шрифт просто отлично; см. скриншоты в ответе, который я связал в своем предыдущем комментарии.

— Арджан

Хорошо, я пропустил скриншот @Arjan. Теперь это очевидно.

— WesternGun

44

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

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

Вариант 2. Проверка CSS с помощью инспекторов браузера (Дополнительно)

Большинство веб-браузеров позволяют легко находить шрифты с помощью right-click→ «Проверять» или «Проверять элемент». Это также можно сделать, нажав F12. Это покажет список стилей, прикрепленных к веб-сайту, которые вы можете изучить, чтобы найти шрифты, используемые в любом элементе HTML.

Использование инспектора не так просто, как использование расширения, но имеет ряд преимуществ. Требуется некоторое понимание CSS, так как вам обычно нужно пройти через несколько стилей, чтобы найти применяемый. Как правило, перечеркнутые стили перезаписываются, поэтому всегда ищите те, которые применяются последними.

Все стили на странице перечислены на вкладке « Стиль », но если вместо этого вы используете вкладку « Вычисленные », вы можете найти свойства, которые активно применяются к выбранному элементу, включая, конечно, семейство шрифтов.

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

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

— Yisela
источник

1

Хороший ход :-) Одна мысль - как определить, какой шрифт в стеке шрифтов тот, который вы на самом деле видите на экране? Я обычно делаю это методом проб и ошибок, удаляя первый шрифт до тех пор, пока он не изменит внешний вид, но я уверен, что есть лучший способ. В WhatFont это курсивом? (ps добро пожаловать обратно!)

— user56reinstatemonica8

@ user568458 Спасибо :) Я определенно хочу добавить скриншоты процесса поиска шрифта с помощью инспектора. Я сам переживаю трудности даже после многих лет использования! Но, честно говоря, у меня на самом деле нет правильной техники, я делаю метод проб и ошибок. В WhatFont я верю, что курсив означает, что это не системный шрифт.

— Yisela

@ Yisela из любопытства, почему на скриншоте WhatFont показан красный цвет (# ea4858) синего шрифта? Это просто цвет, который вы захватили ранее или ошибка? РЕДАКТИРОВАТЬ: О, я вижу, это, вероятно, цвет парения, когда вы выбираете этот элемент, который кажется неидеальным, но все еще круто.

— DasBeasto

@DasBeasto Да, это цвет парения! i.imgur.com/5NLjaEV.png Хорошая мысль, еще одна победа при ручном контроле, поскольку она позволяет выбирать различные состояния взаимодействия.

— Yisela

3

Также хочу добавить, что Firefox (v35.0) имеет хороший инспектор элементов для шрифтов. Вы можете выбрать вкладку шрифтов, которая расскажет вам все подробности об элементе, который вы выбрали (семейство шрифтов, стиль, тип файла), или нажать «показать все шрифты, использованные на странице», который покажет все, что загружено с сервера. Затем вы можете посетить вычисленную вкладку, которая также расскажет вам о таких вещах, как размер цвета и т. Д. Без лишних помех и наследования, таких как Chrome.

— DasBeasto

11

Браузер "проверяет элемент" не идеален

Использование инструментов разработчика вашего браузера - это хороший способ увидеть, какие шрифты объявлены в CSS веб-сайта. Это не показывает, какой шрифт фактически отображается, а показывает только примененный стек шрифтов - фактический отображаемый шрифт может варьироваться в зависимости от установленных шрифтов и т. Д.

Еще одним полезным инструментом является Fount .

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

Использовать Fount так же просто, как добавить закладку. Нет необходимости устанавливать приложение или какие-либо расширения.

После добавления закладки:

Перейдите на любой сайт и нажмите на закладку Fount.
Нажмите на любой тип, который вы хотите идентифицировать. Повторение.
Чтобы отключить Fount, просто нажмите на закладку снова.

Fount работает в Safari, Chrome, Firefox и IE8 +.

— Cai
источник

Fount хорош, учитывая, что он работает и для IE, но WhatFont работает лучше, потому что показывает фактический видимый шрифт, а также шрифт, указанный в разметке HTML. Так что сравнение быстрое.

— Мойз Танкивала

1

Сайт закрыт ... недоступен в 2018 году

— WesternGun

@FaithReaper сайт (и сценарий) все еще прекрасно работает для меня

— Cai

1

Я захожу на сайт и просто вижу серый блок слева без инструкции или ничего? Я не могу загрузить изображения, но это выглядит странно. fount.artequalswork.com/

— WesternGun

@FaithReaper сайт должен выглядеть следующим образом: i.stack.imgur.com/goShP.png ( хотя вы не загружаете изображения, это просто закладка, которую вы используете для проверки шрифтов, используемых на живых сайтах)

— Cai

1

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

— user86140
источник

-2

FontFinder создан для дизайнеров, разработчиков и типографов. Это позволяет пользователю анализировать информацию о шрифте любого элемента на странице, копировать любые фрагменты этой информации в буфер обмена и выполнять встроенные замены для проверки новых макетов.

Это дополнение является лучшим для поиска шрифта и других CSS, таких как вес шрифта, размер и многие другие формы веб-страницы.

— Кушбу Соланки
источник

3

Привет Khushbu, добро пожаловать в GDSE. Не могли бы вы рассказать нам, что и где мы можем "FontFinder"? Кроме того, если вы связаны с продуктом, вы должны указать свою принадлежность в своих ответах. Смотрите, как не быть спамером .

— Цай

2

Текст в ответе выше является копией и вставкой из chrome.google.com/webstore/detail/font-finder/… и / или add0n.com/font-finder.html

— ChrisW