Как узнать, какой шрифт используется браузером из списка CSS-семейств шрифтов?

Question

В веб-разработке предпочтительный список шрифтов помещается в семейство шрифтов CSS следующим образом:

font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

Я хочу знать, какой шрифт выбран браузером для отображения содержимого.Я знаю, что могу вручную изменить шрифт в font-family один за другим в инструменте разработчика браузера и наблюдать изменения отображаемого содержимого, чтобы определить шрифт, используемый браузером.Но это слишком коряво и требует очень острых глаз Т_Т.

Кто-нибудь может знать лучший способ?Большое спасибо!

Answer 1

В firefox-developer-tools , на вкладке «Инспектор> Шрифты» отображается «Используемые шрифты» проверяемым в данный момент элементом. Редактировать шрифты MDN

В google-chrome-devtools , Элементы> На вкладке Computed отображаются «визуализированные шрифты» для проверяемого в настоящее время элемента. «Даже если его нет в списке семейств шрифтов». whats-that-font , Hackernoon

Firefox: -

Хром: -

Спасибо @xuemind за предложенное изменение

Answer 2

Привет На Mozilla Firefox использовать дополнение Font Finder.Это лучший аддон, который предоставит вам все стили, применяемые к вашему элементу.!

Обновлено

Работает, как я и ожидал.После установки Font Finder выделите целевой текст и выберите [ Font Finder> Analyze Selection ] в контекстном меню (щелчок правой кнопкой мыши).Он покажет Шрифт, отображаемый , как на следующем скриншоте!

Answer 3

В порядке, если доступно.В вашем примере это будет сначала Roboto, а следующее ("Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif) будет резервным, если оно доступно.