Несоответствия рендеринга шрифтов в браузерах

Несоответствия рендеринга шрифтов в браузерах

От автора: я работал над проектом, который требовал подтягивания к моему личному веб-сайту инструментов разработчика в разных браузерах. Когда я открыл Safari и заметил, насколько сильно отличается заголовок моей страницы. В Safari он был чрезвычайно жирным по сравнению с другими браузерами.

Гораздо жирнее, чем я ожидал.

Несоответствия рендеринга шрифтов в браузерах

Я посмотрел на таблицу стилей и увидел, что я применил к заголовкам минимум стилей и просто позволил браузеру обрабатывать стили заголовков отдельно от определения font-family и font-sizes. Так что разница в толщине была связана с браузером.

По умолчанию теги h1 выделены жирным шрифтом, но Safari применяет дополнительные полужирные шрифты.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Джейсон Палмент предложил использовать, font-synthesis: none; но это не имело никакого эффекта в Safari или Firefox (в настоящее время это не поддерживается в других браузерах).

Компьютерные стили

Я начал анализировать различия между таблицей стилей пользовательского агента и вкладкой Вычисляемые стили в инструментах разработчика. Таблица стилей пользовательского агента Safari:

CSS-свойства, рассчитанные Safari:

Таблица стилей пользовательского агента Edge, Chrome и Firefox:

Свойства CSS для Edge, Chrome и Firefox:

На вкладке Вычисленные стили Edge, Chrome и Firefox показывают, что они рассчитывают font-weight: bold до толщины шрифта 700, в то время как вычисляемый Safari font-weight не имеет числового значения, он просто остается вычисленным как «bold». Но это все еще мало что объясняет.

На самом деле, несколько иронично, что для Safari нет нигде в таблице стилей определения font-weight: 700, которое я вижу в инструментах разработчика, но он вычисляет h1 с толщиной 700 для семейства шрифтов Poppins.

Поведение браузера в случае отката

Так что теперь я еще более озадачен и смотрю на строку кода, которая должна определить шрифт и толщину шрифта, которые я использую.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Я не знаю почему, но я вынужден удалить из строки «600», пока в только Edge. Так что я делаю это и внезапно вижу, как заголовок в Edge перерисовывается с толщиной 400.

Подождите.

Я добавляю 700 в конце этой строки: Poppins:400,600. Мой заголовок перерисовывается и теперь соответствует Safari. Я удаляю 700 и он перерисовывает с толщиной 600. Я снова удаляю 600, он отображается с толщиной 400.

Я проверяю это в Firefox и вижу те же результаты.

Edge, Chrome и Firefox имеют вычисленную толщину шрифта 700, и если эта конкретная толщина шрифта не определена в строке кода Google Fonts, браузер получает следующую наибольшую числовую толщину шрифта, которая определена, и отображает этот шрифт, как полужирный. Если вы удалите все толщины шрифта из кода шрифта Google, вы получите самую тонкую версию шрифта.

Так что же происходит, когда я проверяю это в Safari? Абсолютно ничего. Не имеет значения, удаляю ли я все толщины шрифта из ссылки на шрифт. Заголовки Safari остаются жирными. Но затем я также заметил кое-что интересное после удаления из кода шрифта 400 600… моя панель навигации на сайте не изменилась в Safari.

Таким образом, чтобы подтвердить, что я действительно видел то, что я видел, я изменил файл на самом сайте и удалил 400 600, так что все, что у меня осталось, это следующее:

Несоответствия рендеринга шрифтов в браузерах

И в Safari никаких изменений вообще. У меня все еще был CSS для ссылок навигации font-weight: 600, и Safari все еще подтягивает эту толщину, несмотря на то, что я не определял ее в коде шрифта.

В Edge, Chrome и Firefox использовался самый тонкий из доступных шрифтов.

Так что же мне делать, чтобы отображать заголовки в разных браузерах и на разных платформах?

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

Если вы не хотите, чтобы браузер решал, как выбирать толщину шрифта, тогда я предлагаю явно определить толщину шрифта с помощью числовых значений: 500, 600 и т. д., чтобы Firefox, Edge и Chrome не вернулись к какой-либо наибольшей толщине шрифта.

И небольшой отказ от ответственности: я рассмотрел только отображение h1. Я подозреваю, что есть много других областей, в которые можно углубиться, чтобы сравнить другие заголовки и отображение абзацев.

И последний вопрос, который может вас заинтересовать:

Какой способ на самом деле правильный? Firefox / Edge / Chrome или Safari?

И мой ответ: я на самом деле не знаю.

Несколько браузеров, ведущих себя одинаково, не обязательно указывают на правильную реализацию, поэтому я подозреваю, что позже попытаюсь подробнее рассмотреть поведение браузеров, чтобы выяснить правильную реализацию.

Автор: Stephanie Stimac

Источник: https://blog.stephaniestimac.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: