Шрифт выглядит тоньше в Firefox и Safari - отлично в Chrome

Question

Я стараюсь, чтобы мой шрифт выглядел одинаково по Mac Chrome, Safari и Firefox (перейдет к IE позже).

Я играл с:

-webkit-font-smoothing: subpixel-antialiased; 

шрифт выглядит почти то же самое, но сафари и Firefox он выглядит почти по меньшей мере, 1 вес тоньше.

Я также попробовал:

-webkit-font-smoothing: antialiased; 

И это для FF:

-moz-osx-font-smoothing: grayscale 

Также у меня есть это на:

text-rendering: optimizeLegibility !important; 

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

Я пропустил недвижимость здесь? Я знаю, что они не будут выглядеть на 100% одинаковыми во всех браузерах, но вы думаете, что хром и сафари являются браузерами webkit, они будут одинаковыми.

Я использую Raleway из шрифтов Google, если это поможет.

Answer 1

может быть шрифт вес легкий или светлее в вашем коде попробуйте изменить начертание шрифта для нормальной font-weight:normal; или font-weight:400;

Answer 2

Я обычно использую этот подход с

-webkit-text-stroke: 1px rgba(0,0,0,0.1) 

или

-webkit-text-stroke: 0.5px 
-webkit-text-stroke-color: same color as text; 

Надеюсь, это поможет. Благодаря!

Answer 3

Я недавно столкнулся с этой проблемой с теми же условиями, что и вы и тот же тип шрифта (Raleway from Google). По-видимому, у сафари есть некоторые проблемы с отображением шрифта, который API Google Fonts отправляет, когда он включает его в свой код.

Так что в любом другом браузере это @import url(https://fonts.googleapis.com/css?family=Raleway:900); делает звонок для Raleway font weight 900. Не для сафари.

РЕШЕНИЕ:

Start, открыв эту безопасность, делая регулярные http. Это предлагается here, @import url(http://fonts.googleapis.com/css?family=Raleway:900);

И затем укажите вес шрифта на элементе.

h1{ 
    font-weight:900; 
} 

Если вы используете МЕНЬШЕ или SCSS, вы будете в состоянии сделать это намного проще с помощью простого Mixin, но это другая тема.