#html #css #fonts
#css #шрифты #кроссбраузерный
Вопрос:
Текст корректно отображается в 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 /
Комментарии:
1. Вообще говоря, все разные браузеры обрабатывают свой собственный рендеринг текста. Если вы загуглите это, вы увидите много результатов о рендеринге в браузере. Если в вашем CSS нет чего-то необычного, скорее всего, вы находитесь во власти разных разработчиков рендеринга для каждого связанного браузера.
2. Это люди скриншота. Я решил это в Safari с
-webkit-font-smoothing: antialiased;
Now для Firefox?3. разве это не css3? изменение шрифта?
4. Определенно объявление о сглаживании шрифтов Webkit в Chrome. Это влияет только на определенные шрифты, этот сайт опубликовал об этом в 2010 году. ilikekillnerds.com/2010/12 /…
Ответ №1:
Убедитесь, что шрифт одинаков для всех браузеров. Если это один и тот же шрифт, то проблема не имеет решения с использованием кроссбраузерного CSS.
Поскольку у каждого браузера есть свой собственный механизм рендеринга шрифтов, все они разные. Они также могут отличаться в более поздних версиях или в разных ОС.
ОБНОВЛЕНИЕ: Для тех, кто не понимает различий в отображении шрифтов в браузере и ОС, прочитайте это и это.
Однако большинство людей даже не замечают разницы, и пользователи принимают это. Забудьте о пиксельном кроссбраузерном дизайне, если вы не:
- Попытка отключить субпиксельный рендеринг с помощью CSS (не все браузеры позволяют это, и текст может быть уродливым …)
- Использование изображений (ресурсы требовательны и сложны в обслуживании)
- Замена Flash (требуется некоторое программирование и не работает на iOS)
ОБНОВЛЕНИЕ: я проверил страницу примера. Настройка кернинга с помощью текстового рендеринга должна помочь:
text-rendering: optimizeLegibility;
Больше ссылок здесь:
- Часть рендеринга шрифта контролируется
font-smoothing
(как упоминалось), а другая часть —text-rendering
. Настройка этих свойств может помочь, поскольку их значения по умолчанию не одинаковы в разных браузерах. - Для 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;
, он решает проблемы кернинга при масштабировании шрифтов, в то время как последний включает кернинг и лигатуры.