У меня на сайте используются сделанные на заказ веб-шрифты. Чтобы стилизовать выходные данные рендеринга, я использовал следующий код:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
Это отлично работает в Safari и Chrome (края резче, а линии тоньше). Есть ли способ реализовать тот же стиль в Firefox и Opera?
css
fonts
webfonts
antialiasing
матовый
источник
источник
body { -webkit-font-smoothing: antialiased; }
, слишком неуклюже.Ответы:
Поскольку Opera работает на Blink, начиная с версии 15.0,
-webkit-font-smoothing: antialiased
она работает и с Opera.Firefox, наконец, добавил свойство, позволяющее включить сглаживание в оттенках серого. После долгого обсуждения оно будет доступно в версии 25 с другим синтаксисом, который указывает на то, что это свойство работает только в OS X.
Это должно исправить размытые шрифты значков или светлый текст на темном фоне.
Вы можете прочитать мой пост о рендеринге шрифтов в OSX, который включает миксин Sass для обработки обоих свойств.
источник
Что ж, Firefox не поддерживает что-то подобное.
На справочной странице Mozilla указано,
font-smooth
что свойство CSS управляет применением сглаживания при визуализации шрифтов, но это свойство было удалено из этой спецификации и в настоящее время не входит в стандартную версию.Это свойство поддерживается только в браузерах Webkit.
Если вам нужна альтернатива, вы можете проверить это:
источник
-webkit-font-smoothing:antialiased;
я мог исправить это в Safari и Chrome. Я также хотел бы найти какой-нибудь «хитрость», чтобы сделать мои шрифты немного легче в Firefox. Я думал применитьtext-shadow
к нему белый цвет только в moz, но нет никакого способа применить «вставку» text-shadow, которая сделала бы шрифт светлее.Случай: светлый текст с неровным веб-шрифтом на темном фоне Firefox (v35) / Windows
Пример: Google Web Font Ruda
Неожиданное решение -
добавление к применяемым селекторам следующего свойства:
Собственно, результат такой же, как у
text-shadow: 0 0;
, но мне нравится явно задавать радиус размытия.Это не универсальное решение, но в некоторых случаях может помочь. Более того, до сих пор я не испытал (также не полностью протестирован) отрицательного влияния этого решения на производительность.
источник
После того, как я столкнулся с проблемой, я обнаружил, что мой файл WOFF не был выполнен должным образом, я отправил новый TTF в FontSquirrel, который дал мне правильный WOFF, который был гладким в Firefox без добавления к нему дополнительного CSS.
источник
Я нашел решение по этой ссылке: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Пошаговый метод:
apt-get install ttfautohint
):ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
Я надеюсь, это поможет.
источник
... в теге body, а они из содержимого и шрифта в целом выглядят лучше ...
источник
Когда цвет текста темный, в Safari и Chrome у меня лучший результат с помощью свойства css text-stroke.
источник
Добавление
Чтобы ваши шрифты @ font-face исправили жирный шрифт в Firefox.
источник
font-weight
(неудивительно) влияет на толщину шрифта, а не на его сглаживание. Добавление его в объявления @ font-face вызовет путаницу, если связанный файл шрифта не является файлом шрифта с нормальным весом.font-weight
. Дело в том, что OP не спрашивалfont-weight
- он спрашивал об антиалиасинге . Это правильный ответ на совершенно другой вопрос.