Как применять эффекты сглаживания шрифта в CSS?

Ответ 1

здесь вы идете сэр: -)

1

   .myElement{
    -webkit-font-smoothing: antialiased;
    }

2

   .myElement{
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    }

Обновление: (см. Герцог)

   .myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    }

Ответ 2

Короткий ответ: вы не можете.

У CSS нет методов, влияющих на рендеринг шрифтов в браузере; только система может это сделать.

Очевидно, что резкость текста может быть легко достигнута с помощью пиксельных плотных экранов, но если вы используете обычный ПК, который будет трудно достичь.

Есть несколько новых шрифтов, которые являются гладкими, но при жертве его кажутся несколько размытыми (например, посмотрите на большинство шрифтов Adobe). Однако вы можете найти шрифты с плавным, но размытым дизайном, Google Fonts.

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

Ответ 3

Работает лучше всего. Если вы хотите использовать его sitewide, не добавляя этот синтаксис к каждому классу или идентификатору, добавьте следующий CSS в тело css:

body { 
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background: url('./images/background.png');
    text-align: left;
    margin: auto;

}