Сглаживание и сглаживание Webfont в Firefox и Opera

У меня есть некоторые пользовательские веб-сайты, встроенные на мой сайт, и я использую такие вещи, как

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

чтобы создать мой вывод рендеринга. Это прекрасно работает в Safari и Chrome. Я получаю более четкие края и более тонкие линии.

Есть ли способ сделать такие вещи в Firefox? Или Opera?

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

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

selector {
    text-shadow: 0 0 0;
}

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

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

Ответ 4

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

Ответ 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 со всеми вашими веб-сайтами!

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

Ответ 6

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

}

Ответ 7

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

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

Ответ 8

Добавление

font-weight: normal;

В шрифты шрифтов @font-face будет исправлено смелое появление в Firefox.