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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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