От автора: я работал над проектом, который требовал подтягивания к моему личному веб-сайту инструментов разработчика в разных браузерах. Когда я открыл Safari и заметил, насколько сильно отличается заголовок моей страницы. В Safari он был чрезвычайно жирным по сравнению с другими браузерами.
Гораздо жирнее, чем я ожидал.
Я посмотрел на таблицу стилей и увидел, что я применил к заголовкам минимум стилей и просто позволил браузеру обрабатывать стили заголовков отдельно от определения font-family и font-sizes. Так что разница в толщине была связана с браузером.
По умолчанию теги h1 выделены жирным шрифтом, но Safari применяет дополнительные полужирные шрифты.
Джейсон Палмент предложил использовать, font-synthesis: none; но это не имело никакого эффекта в Safari или Firefox (в настоящее время это не поддерживается в других браузерах).
Компьютерные стили
Я начал анализировать различия между таблицей стилей пользовательского агента и вкладкой Вычисляемые стили в инструментах разработчика. Таблица стилей пользовательского агента Safari:
h1 { font-weight: bold;
}CSS-свойства, рассчитанные Safari:
h1 { font-weight: bold;
}Таблица стилей пользовательского агента Edge, Chrome и Firefox:
h1 { font-weight: bold;
}Свойства CSS для Edge, Chrome и Firefox:
h1 { font-weight: 700;
}На вкладке Вычисленные стили Edge, Chrome и Firefox показывают, что они рассчитывают font-weight: bold до толщины шрифта 700, в то время как вычисляемый Safari font-weight не имеет числового значения, он просто остается вычисленным как «bold». Но это все еще мало что объясняет.
На самом деле, несколько иронично, что для Safari нет нигде в таблице стилей определения font-weight: 700, которое я вижу в инструментах разработчика, но он вычисляет h1 с толщиной 700 для семейства шрифтов Poppins.
Поведение браузера в случае отката
Так что теперь я еще более озадачен и смотрю на строку кода, которая должна определить шрифт и толщину шрифта, которые я использую.
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet">
Я не знаю почему, но я вынужден удалить из строки «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, так что все, что у меня осталось, это следующее:
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
И в 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.