Огненный лис — firefox уже давно не торт…, но сегодня я заметил, что шрифт Poppins от Google Fonts в верстке моего проекта отображается криво и по разному на Mac и Windows системах. Поэтому пришлось все исправлять…
Естественно, каждый браузер имеет свои причуды, и одна из причуд Firefox — отображать regular шрифты в полужирном/жирном варианте. Честно, я и раньше не слишком «парился» по этому поводу т.к небольшие различия были, но они были не критичными. Например, ниже приведу пример рендера шрифта VK из в Firefox и Chrome браузеров (слева направо):
Видно утолщение? В принципе да. Раздражает? Да, даже очень. Поскольку в VK исправить не удастся, придется возвращаться и исправлять на своей верстке 😆
Если разбираться в проблеме поглубже, то такой баг, происходит на полужирных Google Fonts (semibold) в Firefox на Mac, а в Windows на медиум шрифтах (medium). Также, проблемы появляются если вы в верстке используете Typekit. В любом случае я потратил немного времени и составил короткий список шрифтов, которые неправильно отображаются в Firefox:
- Droid Sans
- Gill Sans
- Montserrat
- Poppins
- Proxima Nova
Решение проблемы отображения bold шрифтов в Firefox
На самом деле, проблема решается в пару css строк:
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 400; /*эту строчку можно пропустить*/
}
/*Правило только для Firefox*/
@-moz-document url-prefix() {
body {
font-weight: lighter !important;
}
}
-moz префиксы работают только для Firefox, а -webkit соответственно только на Chrome и Safari которые используют Webkit движок рендеринга для этих браузеров.
Также, есть решение и для Internet Explorer, который также имеет проблемы с некоторыми шрифтами и делает их толще:
html {
text-rendering: optimizeLegibility;
}
Решение на SASS
Также, накидал простое решение на sass в виде миксина, которое также решает проблему как и css выше.
@mixin font-smoothing($value: antialiased)
@if $value == antialiased
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
@else
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: auto