Один и тот же шрифт, за исключением его веса, в разных браузерах выглядит по-разному

Question

Текст правильно отображается в Chrome.Я хочу, чтобы это отображалось во всех браузерах.Как я могу это сделать?

Мне удалось исправить это в Safari с помощью -webkit-font-smoothing: antialiased;

Chrome:

Firefox:

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

И JSFiddle: http://jsfiddle.net/jnxQ8/1/

Answer 1

Убедитесь, что шрифт одинаков для всех браузеров. Если это тот же шрифт, то у проблемы нет решения с использованием кросс-браузер CSS .

Поскольку каждый браузер имеет свой собственный механизм рендеринга шрифтов, они все разные. Они также могут отличаться в более поздних версиях или в разных ОС.

ОБНОВЛЕНИЕ : Для тех, кто не понимает различия в визуализации шрифтов браузера и ОС, прочитайте это и это .

Однако большинство людей даже не замечают разницы, и пользователи это принимают. Забудьте про пиксельный кросс-браузерный дизайн, если вы не:

1. Попытка отключить субпиксельный рендеринг с помощью CSS (не все браузеры допускают это, и текст может быть некрасивым ...)
2. Использование изображений (ресурсы требовательны и сложны в обслуживании)
3. Замена Flash (нужно немного программирования и не работает на iOS)

---

ОБНОВЛЕНИЕ : Я проверил страницу примера. Настройка кернинга с помощью рендеринга текста должна помочь:

text-rendering: optimizeLegibility; 

Больше ссылок здесь:

1. Часть рендеринга шрифтов контролируется font-smoothing (как уже упоминалось), а другая часть - text-rendering. Настройка этих свойств может помочь, так как их значения по умолчанию не одинаковы в разных браузерах.
2. Для Chrome, если для вас по-прежнему не отображается OK, попробуйте этот текст-тень . Это должно улучшить рендеринг шрифтов Chrome, особенно в Windows. Тем не менее, текстовая тень сойдет с ума под Windows XP. Будьте осторожны.

Answer 2

Чтобы наилучшим образом стандартизировать ваши встроенные шрифты @ font-face в разных браузерах, попробуйте включить нижеприведенное в декларацию @ font-face или в стиль шрифта вашего тела:

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

В настоящее время не существует универсального решения для всех платформ и сборок браузеров. Как часто отмечалось, все браузеры / ОС имеют разные механизмы рендеринга текста.

Answer 3

Здесь есть отличная информация: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Все еще экспериментируем, но пока малоинвазивное решение, нацеленное только на FF:

body {
-moz-osx-font-smoothing: grayscale;
}

Answer 4

Попробуйте -webkit-font-smoothing: subpixel-antialiased;

Answer 5

Я собрал и протестировал обсуждаемые решения:

Windows10 Prof x64:

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

MacOs X Serra v.10.12.6 Mac mini (середина 2010 г.):

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Полу (все еще микро-жир в Safari) разрешенные жирные шрифты:

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

Не имеют визуального эффекта

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

Неправильный визуальный эффект:

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

не забудьте установить! важный при тестировании или быть уверенным, что ваш стиль не переопределен

Answer 6

У меня есть много сайтов с этой проблемой, и наконец-то нашел исправление для шрифтов Firefox, которые толще хрома.

Вам нужна эта строка рядом с исправлением -webkit -moz-osx-font-smoothing: grayscale;

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

Answer 7

Попробуйте text-rendering: geometricPrecision;.

В отличие от text-rendering: optimizeLegibility;, он решает проблемы кернинга при масштабировании шрифтов, а последний включает кернинг и лигатуры.

Answer 8

Я не думаю, что использование «точек» для размера шрифта на экране - это хорошая идея. Попробуйте использовать px или em для размера шрифта.

С W3C :

Не указывайте размер шрифта в пт, или другие единицы абсолютной длины. Oни рендеринг несовместим на разных платформах и не может быть изменен пользовательским агентом (например, браузер).