Блог

Текст корректно отображается в 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 /

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

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

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

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

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

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

 text-rendering: optimizeLegibility; 
  

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

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

Чтобы наилучшим образом стандартизировать встроенные шрифты @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;
  

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

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

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

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

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

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

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
  

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

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

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

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

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

Из W3C:

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

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

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