Как сделать сглаживание шрифтов на веб-странице?

Question

Я работал над тем, как выполнить сглаживание шрифтов на веб-страницах. Вот некоторые решения, которые я нашел:

• -webkit-font-smoothing атрибут: похоже, работает только в новейших браузерах. Я не пробовал это.
• Google Font API: это здорово и просто в использовании. Интересно, как использовать его в автономном режиме.
• Библиотека javascript typeface.js, которая рисует текст с помощью canvas или VML. Выглядит отлично, но я не смог его использовать.
• Возможно, css3 это поддерживает.

Кроме того, я обнаружил, что этот сайт, gitorious.org, использует очень красивые сглаживающие шрифты на домашней странице. Но мне интересно, как это работает. Исходный код показывает, что это просто текст, но его нельзя изменить с помощью средств отладки, таких как Firebug. Кто-нибудь знает, что за этим стоит? Или как-нибудь еще обойти эту проблему со шрифтом.

Answer 1

Один из подходов , как предлагается здесь , заключается в использовании свойства CSS text-shadow, например:

text-shadow: 0 0 1px rgba(51,51,51,0.5);

Answer 2

На самом деле не существует хорошего кроссплатформенного способа заставить клиентов сглаживать текст, и это, как правило, главное.Клиенты решают, как отображать текст, потому что графические возможности операционных систем сильно различаются, и некоторые люди могут захотеть отключить сглаживание для повышения производительности (например, в старых системах Windows XP с компактными графическими картами).

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

Что касается того, как Gitorious добивается своих плавных шрифтов, как упомянул Фрэнки, они используют фоновые изображения в CSS:

-HTML-

<h2>Nobody will ever see this text if they have CSS enabled. Only search engines, screen readers, and nerds will ever see it!</h2>

-CSS-

#header #introduction h2 {
    background: url(http://gitorious.org/img/external/header.png) no-repeat;
    height: 74px;
    text-indent: -9999px; /* hide text off-screen */
    width: 447px;
}

Есть ли какая-либо конкретная причина, по которой вам нужно шрифты для сглаживания?

Answer 3

Некоторые сайты используют фоновые изображения для текста и помещают текст в разметку с помощью текстового отступа css: -9999;

Альтернативный популярный метод - использовать http://cufon.shoqolate.com/generate/