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

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

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

Хром:

Fire Fox:

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

<h1>Hi, my name</h1>

Ответ 1

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

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

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

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

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

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

text-rendering: optimizeLegibility;

Другие ссылки здесь:

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

Ответ 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;

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 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

Полу (по-прежнему микро-жир в Сафари) решал жирные шрифты:

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

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

Ответ 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;
}

Ответ 7

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

От W3C:

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

Ответ 8

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

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