Згладжування та згладжування Webfont у 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 mixin для обробки обох властивостей.

Ну, Firefox не підтримує щось подібне.

На сторінці посилань від Mozilla вказується, font-smoothяк властивість CSS контролює застосування антизбудження, коли шрифти надаються, але це властивість було видалено з цієї специфікації і наразі не знаходиться у стандартній доріжці.

Ця властивість підтримується лише у веб-переглядачах Webkit.

Якщо ви хочете альтернативи, ви можете перевірити це:

• Затінення тексту "Тінь" Філіп Реніч, Веб-сайти - блог
• cufón - шрифти для людей

Випадок: Світлий текст із шорстким веб-шрифтом на темному тлі Firefox (v35) /
Приклад Windows : Веб-шрифт Google Ruda

Дивне рішення -
додавання наступних властивостей до застосованих селекторів:

selector {
    text-shadow: 0 0 0;
}

Насправді результат такий самий, як і у нас text-shadow: 0 0;, але мені подобається чітко встановлювати радіус розмиття.

Це не універсальне рішення, але може допомогти в деяких випадках. Більше того, до цього часу я не відчував (також не ретельно перевірений) негативних наслідків щодо ефективності цього рішення.

Після запуску проблеми я виявив, що мій файл WOFF зроблено не належним чином, я надіслав новий FoxSquirrel новий TTF, який дав мені належний WOFF, який був гладким у Firefox, не додаючи до нього зайвих CSS.

Я знайшов рішення за цим посиланням: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Покроковий метод:

• відправте свій шрифт на WebFontGenerator і отримайте поштовий індекс
• знайдіть шрифт 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, 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 для обведення тексту.

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

Додавання

font-weight: normal;

Ваші шрифти @ font-face зафіксують сміливий вигляд у Firefox.