Сглаживание и сглаживание веб-шрифтов в Firefox и Opera

112

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

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Это отлично работает в Safari и Chrome (края резче, а линии тоньше). Есть ли способ реализовать тот же стиль в Firefox и Opera?

матовый
источник
5
Было бы неплохо прекратить это делать и прочитать почему здесь: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
fregante
20
^ это широкое обобщение, и можно использовать сглаживание шрифтов. Проблема заключается в отрисовке, а не в поведении дизайнера. Когда вы разрабатываете макет, и шрифт кажется полужирным из-за механизма рендеринга, то исправлять нужно механизм, а не макет.
Дилан
1
Это не совсем широкое обобщение. В статье говорится, что субпиксельный рендеринг был в первую очередь предназначен для того, чтобы сделать светлый текст на темном фоне более читабельным (то есть доступным), а создание широкого определения CSS, например body { -webkit-font-smoothing: antialiased; }, слишком неуклюже.
Мэтт Шойрих
3
Мои веб-шрифты, которые темные на светлом фоне, также становятся «искусственно выделенными». Я говорю "сглаживание" все вокруг.
Джейсон Т. Фезерингем
5
Как отображается страница, зависит от дизайнера, включая все типографические атрибуты. В их обязанности входит обеспечение удобства использования, согласованности и привлекательности на самом широком спектре платформ. Доступ к атрибутам сглаживания шрифтов через CSS обеспечивает больший контроль. Как и все, его можно использовать не в те руки. Но пропаганда личной философии вместо ответа на вопрос бесполезна.
Beejor

Ответы:

193

Поскольку Opera работает на Blink, начиная с версии 15.0, -webkit-font-smoothing: antialiasedона работает и с Opera.

Firefox, наконец, добавил свойство, позволяющее включить сглаживание в оттенках серого. После долгого обсуждения оно будет доступно в версии 25 с другим синтаксисом, который указывает на то, что это свойство работает только в OS X.

-moz-osx-font-smoothing: grayscale;

Это должно исправить размытые шрифты значков или светлый текст на темном фоне.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Вы можете прочитать мой пост о рендеринге шрифтов в OSX, который включает миксин Sass для обработки обоих свойств.

Максимилиан Хоффманн
источник
6
Почему только OSX ??
Ясир Энназк
7
Windows и Linux используют другие алгоритмы рендеринга шрифтов, чем OSX.
Максимилиан Хоффманн
15

Что ж, Firefox не поддерживает что-то подобное.

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

Это свойство поддерживается только в браузерах Webkit.

Если вам нужна альтернатива, вы можете проверить это:

Джонатан Нагин
источник
2
Что ж, у меня проблема в том, что мои шрифты выглядят «жирными» и раздутыми в firefox и opera. С помощью -webkit-font-smoothing:antialiased;я мог исправить это в Safari и Chrome. Я также хотел бы найти какой-нибудь «хитрость», чтобы сделать мои шрифты немного легче в Firefox. Я думал применить text-shadowк нему белый цвет только в moz, но нет никакого способа применить «вставку» text-shadow, которая сделала бы шрифт светлее.
matt
1
@matt В этом вопросе вы можете попробовать несколько советов по CSS: stackoverflow.com/questions/761778/… Возможно, вы найдете альтернативу CSS.
Джонатан Нагин,
11

Случай: светлый текст с неровным веб-шрифтом на темном фоне Firefox (v35) / Windows
Пример: Google Web Font Ruda

Неожиданное решение -
добавление к применяемым селекторам следующего свойства:

selector {
    text-shadow: 0 0 0;
}

Собственно, результат такой же, как у text-shadow: 0 0;, но мне нравится явно задавать радиус размытия.

Это не универсальное решение, но в некоторых случаях может помочь. Более того, до сих пор я не испытал (также не полностью протестирован) отрицательного влияния этого решения на производительность.

Фолькер Э.
источник
Ничего не помогает
vsync
это приведет к появлению более смелых шрифтов на хроме в зависимости от шрифта
Бен Сьюардс
1
@BenSewards. Не могли бы вы предоставить шрифт, в котором вы столкнулись с более жирной визуализацией? Или, может быть, даже CodePen? Заранее спасибо.
Volker E.
1
@VolkerE. спасибо за отличное решение. У меня такая же неприятная проблема с шрифтом Source Code Pro в липком заголовке. Когда я прокручиваю шрифт, становится очень маленьким, а с вашей текстовой тенью шрифт не создает никаких проблем.
Evolutio,
На текущий хром (58.0.3029.110) текст «сглаживать» на самом деле выглядит действительно ужасно. («неровный» текст несколько лучше)
RecursiveExceptionException
7

После того, как я столкнулся с проблемой, я обнаружил, что мой файл WOFF не был выполнен должным образом, я отправил новый TTF в FontSquirrel, который дал мне правильный WOFF, который был гладким в Firefox без добавления к нему дополнительного CSS.

азенет
источник
это в окнах?
Vignesh
5

Я нашел решение по этой ссылке: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Пошаговый метод:

  • отправьте свой шрифт в WebFontGenerator и получите zip
  • найдите шрифт TTF в Zip-файле
  • затем в linux выполните эту команду (или установите с помощью apt-get install ttfautohint):
    ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
  • затем еще раз отправьте новый файл TTF (neosansstd-black.changed.ttf) в WebFontGenerator
  • вы получите идеальный Zip со всеми вашими веб-шрифтами!

Я надеюсь, это поможет.

Plici Stéphane
источник
Проделал большую работу по исправлению неровностей шрифтов во время css-переходов (хотя и не удалил их полностью). Я использовал генератор FontSquirrel с опцией TTFAutohint
Андрей
Я использовал Fontie для повторной генерации моих файлов WOFF, WOFF2, EOT и SVG с включенной автоподсказкой для Windows.
Dominique
4

... в теге body, а они из содержимого и шрифта в целом выглядят лучше ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}
user3634787
источник
2
Прошу прощения ... что такое "рейншрайбен"? Большинство из нас не говорят по-немецки, поэтому было бы неплохо, если бы вы сделали весь свой пост на английском.
rayryeng 02
3
Ой, пожалуйста, прошу прощения, перевели с помощью Google и как-то неправильно слово проскочило :)
user3634787 05
3

Когда цвет текста темный, в Safari и Chrome у меня лучший результат с помощью свойства css text-stroke.

-webkit-text-stroke: 0.5px #000;
Кристель
источник
Речь идет о Firefox и Opera. так что этот ответ не имеет ничего общего с вопросом
vsync
-4

Добавление

font-weight: normal;

Чтобы ваши шрифты @ font-face исправили жирный шрифт в Firefox.

Аарон VIII
источник
7
font-weight(неудивительно) влияет на толщину шрифта, а не на его сглаживание. Добавление его в объявления @ font-face вызовет путаницу, если связанный файл шрифта не является файлом шрифта с нормальным весом.
Майк Мейер,
@MikeMeyer На самом деле я согласен с комментарием Аарона. Добавление шрифта веса: нормальная для шрифта включает то , что это «свет» шрифт будет , кажется , добавить путаницу, но это должно смущать только разработчик начинающего. На самом деле, по моему опыту, рекомендуется указывать значение по умолчанию как нормальное. Нормальный в этом случае относится к "нормальному" для включенного шрифта и используемых символов и не предназначен для указания информации о самом шрифте. Во многих случаях (особенно на больших платформах) это снизит вероятность ошибок, возникающих из-за слишком типичной плохой архитектуры, которую вы видите вокруг стилей шрифтов.
dudewad
Фактически, само название начертания шрифта должно обозначать вес шрифта по умолчанию ...!
dudewad
@dudewad, это здорово, что вы согласны, и да, это приличный (хотя и довольно лаконичный) совет по поводу font-weight. Дело в том, что OP не спрашивал font-weight- он спрашивал об антиалиасинге . Это правильный ответ на совершенно другой вопрос.
Майк Мейер
@MikeMeyer, ты совершенно прав. Иногда я немного увлекаюсь. ;)
dudewad 02