Шрифт толще в firefox

202

07 июня 2018, 18:40

Шрифт Fira Sans, брался с google fonts и c fontstorage.com. В итоге основное содержимое выглядит по-разному в chrome(картинка 2) и firefox(картинка 1).

Порывшись в интернете нашёл решение

@-moz-document url-prefix() { 
  body { 
    font-weight: lighter !important; 
  } 
}

В абзацах стало лучше:

Но при этом в других местах стало отображаться по-разному:

1-Firefox, 2-Chrome.

Вопрос таков, в чём первоначальная проблема и как решить её, чтобы везде смотрелось одинаково?

Answer 1

У вас точно не разная ВЫСОТА (размер) шрифта? На картинках явно разные размеры.

Вот вариант как побороть ситуацию, не изменив размеры текста: в браузере, где буквы кажутся тоньше, приделать стиль наподобие

text-shadow: 0 0.001em 0px rgba(0,0,0,0.25)

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