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

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

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

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

Ответы

Ответ 1

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

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

Что касается того, как 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;
}

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

Ответ 2

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

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

Ответ 3

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

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