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

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

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

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

Поскольку 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 для обработки обоих свойств.

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

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

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

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

• Сглаживание текста и тени | Филип Рених, Веб-сайты - блог
• cufón - шрифты для народа

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

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

selector {
    text-shadow: 0 0 0;
}

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

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

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

Я нашел решение по этой ссылке: 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 со всеми вашими веб-шрифтами!

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

... в теге 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;

}

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

-webkit-text-stroke: 0.5px #000;

Добавление

font-weight: normal;

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