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

#html #css #fonts

#css #шрифты #кроссбраузерный

Вопрос:

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

Я смог исправить это в Safari с -webkit-font-smoothing: antialiased;

Chrome:
Chrome

Firefox:
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 /

Комментарии:

1. Вообще говоря, все разные браузеры обрабатывают свой собственный рендеринг текста. Если вы загуглите это, вы увидите много результатов о рендеринге в браузере. Если в вашем CSS нет чего-то необычного, скорее всего, вы находитесь во власти разных разработчиков рендеринга для каждого связанного браузера.

2. Это люди скриншота. Я решил это в Safari с -webkit-font-smoothing: antialiased; Now для Firefox?

3. разве это не css3? изменение шрифта?

4. Определенно объявление о сглаживании шрифтов Webkit в Chrome. Это влияет только на определенные шрифты, этот сайт опубликовал об этом в 2010 году. ilikekillnerds.com/2010/12 /…

Ответ №1:

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

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

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

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

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

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

 text-rendering: optimizeLegibility; 
  

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

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

Комментарии:

1. Я не понимаю, почему Chrome и Safari отображаются по-разному: они оба основаны на WebKit.

2. Да, но Chrome, по-видимому, автоматически применяет `-webkit-font-smoothing: antialiased;’ а Safari нет?

3. chrome и safari похожи, но не являются одним и тем же браузером: они используют одну и ту же базу, webkit, но многие компоненты для конкретной платформы и модули css отличаются — safari поддерживает больше свойств css3, чем chrome. И рендеринг шрифтов довольно специфичен для платформы.

4. @ChrisW — Safari имеет собственный движок рендеринга шрифтов, обеспечивающий аналогичный интерфейс, как в OSX. Таким образом, свойство ‘-webkit-font-smoothing’ будет работать только в Safari (под Windows). И еще одна переменная — вы можете изменить сглаживание в настройках браузера.

5. На самом деле у меня была проблема на двух разных страницах одного и того же сайта с применением одного и того же CSS, что приводило к разным результатам. font-smoothing: antialiased; Творил чудеса для меня.

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

Полужирные (все еще микрожирные в 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
  

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

Комментарии:

1. Как бы преобразование текста исправило / сломало что-либо?

Ответ №6:

У меня много сайтов с этой проблемой и наконец-то найдено исправление того, что шрифты 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;
}
  

Ответ №7:

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

Из W3C:

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

Комментарии:

1. Но это не имеет никакого отношения к жирности шрифта?

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

3. В Chrome его запуск одинаков в Chrome 20, Chrome 17, у которого все в порядке

Ответ №8:

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

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