CSS: шрифты отображаются по-разному в Firefox и Chrome ⇐ CSS

[Anonymous]

Я использую Google Fonts и метод CSS @import для включения шрифтов на свой веб-сайт.

Chrome прекрасно отображает шрифты; они имеют равномерный вес и четкие на вид. Firefox не копирует этот рендеринг. См. ниже:




Слева вы можете увидеть Firefox. Начертание шрифта заголовка не соответствует. Вы можете видеть, что меньший описательный текст имеет больший вес, чем аналог Chrome.

Chrome находится справа, и, как вы можете видеть, шрифты имеют соответствующий вес.

Я использую следующий CSS, чтобы решить эту проблему:

Код: Выделить всё

@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro');

* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Как решить эту проблему и заставить Firefox отображать мои шрифты с правильной толщиной?

Версия Firefox: 57.0 .1 (64-разрядная версия) [Самая последняя]

Версия Chrome: 62.0.3202.94 (64-разрядная версия) [Самая последняя]

Большое спасибо.

Подробнее здесь: https://stackoverflow.com/questions/477 ... and-chrome