Я только что обновил свой Chrome браузер, и по какой-то странной причине заголовки моего сайта выглядят тоньше. Я провел некоторые исследования, и проблема возникает, когда размер шрифта больше, чем 1.2em. 1.2em и меньше работают нормально.
Система:
- MacBook Pro Версия 10.15.2 Catalina
- Google Chrome Версия 81.0.4044.113 (Официальная сборка) ( 64-разрядный)
My CSS:
body, button, input, select, textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-size: 1em;
font-weight: 600;
}
h1, .h1 {
font-size: 1.65em;
}
Исследование:
- Проблема не имеет ничего общего со сглаживанием шрифта (я удваиваю проверено), но я думаю, что это может иметь какое-то отношение к шрифту, потому что, когда я удаляю
-apple-system, BlinkMacSystemFont, проблема исчезает. - Это связано не только с заголовками, но и с другими элементами, такими как кнопки с размером шрифта больше 1,2em.
Размер шрифта: 1,3em:
Размер шрифта: 1.2em:
