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

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

Хром:
Хром

UPDATE: исправлено в Safari с -webkit-font-smoothing: antialiased;

Fire Fox:
Fire Fox

Это CSS:

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

И скрипка: http://jsfiddle.net/jnxQ8/1/

8 Solutions collect form web for “Тот же шрифт, кроме его веса, выглядит по-разному в разных браузерах”

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

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

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

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

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

UPDATE : я проверил страницу примера. Настройка керинга с помощью текстового рендеринга должна помочь:

 text-rendering: optimizeLegibility; 

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

  1. Часть рендеринга шрифта контролируется font-smoothing (как упоминалось), а другая часть – text-rendering . Настройка этих свойств может помочь, поскольку их значения по умолчанию не совпадают между браузерами.
  2. Для Chrome, если это все еще не отображается OK для вас, попробуйте этот текстовый трюк . Он должен улучшить рендеринг шрифтов Chrome, особенно в Windows. Тем не менее, текстовая тень сойдет с ума под 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; 

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

Здесь есть несколько отличных сведений об этом: 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 

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

 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 

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

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

Из W3C :

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

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

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

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

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

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

  • Принудительное сглаживание с использованием css: Это миф?
  • Таблицы стилей CSS по умолчанию для браузеров
  • Как создать привязанную строку с помощью Swift?
  • Есть ли в Google Chrome «сглаживание шрифтов»?
  • Как установить семейство шрифтов по умолчанию для всего Android-приложения
  • Как установить пользовательский шрифт в заголовке ActionBar?
  • Как импортировать шрифт?
  • Как я могу использовать собственный шрифт в Java?
  • Пользовательские шрифты в Android
  • Как импортировать веб-шрифт Google в файл CSS?
  • Android: хотите установить пользовательские шрифты для всего приложения, а не для исполнения
  • Давайте будем гением компьютера.