DevTools отвечает — Что это за шрифт?

Paul Irish

Chrome DevTools теперь может точно сказать вам, какой шрифт используется для рендеринга текста .

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

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Как разработчик, вы хотите знать , какой шрифт на самом деле используется . Вот как это работает:

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

• DevTools сообщает о фактическом шрифте , используемом слоем рендеринга текста Chrome. Больше не нужно гадать, какой шрифт serif или sans-serif на самом деле разрешается.
• Мой веб-шрифт работает? Иногда трудно определить, видите ли вы веб-шрифт или резервный системный шрифт. Теперь вы можете убедиться, что веб-шрифт применяется . В приведенном выше примере мы используем Lobster в качестве веб-шрифта для стиля ::first-line .
• Пропадающие шрифты в вашей стопке легко обнаружить . Выше у нас была опечатка в написании Merriweather , поэтому оно не использовалось, перейдя к Lobster.
• Это Arial или Helvetica? Спросите дизайнера или… спросите DevTools. ;)
• Прекрасно работает с веб-шрифтами Google, Typekit, локальными шрифтами, гарнитурами @font-face, глифами Юникода и всеми другими интересными источниками шрифтов.

Наслаждайтесь и, пожалуйста, оставьте комментарий, если у вас есть какие-либо отзывы.