Сглаживание веб-шрифтов на CSS
Основное содержание контента на сайте – это текст и с ним должно быть удобно работать. Для того чтобы понять, каким должен быть шрифт на вебе достаточно взглянуть на книгу с хорошей типографикой. Соответственно, хороший веб-шрифт должен быть оптимального размера с отрегулированным межстрочным интервалом, кернингом и контрастировать с подложкой.
Есть еще один фактор – сглаживание, с которым дружат не все браузеры (в том числе и Chrome) при использовании нестандартных шрифтов, хотя, и стандартные тоже не все сглаживают. Получается, что шрифт становится угловатым, а его границы резкими и это не очень комфортно для чтения.
В случае, если нужно использовать сторонний шрифт, например, с «Google.Fonts», то наиболее надежный метод – это создание полного набора форматов шрифта, включая SVG. Можно использовать его, например, только для заголовков.
Если шрифт стандартный, то можно сразу перейти к CSS-методу, расположенному ниже, так как он очень прост и понятен.
Основные CSS-методы, которыми можно сделать шрифт более читаемым
CSS метод
Данный метод весьма минималистичен, ведь для его реализации достаточно 3 строки кода и присвоить класс «title» к сглаживаемому тексту. Сглаживание текста происходит за счет тени и применимо, разве что, для заголовков. Данный метод можно расценивать как «хак».
.title { text-shadow: -1px -1px 1px rgba(255,255,255, 0.2), 1px 1px 1px rgba(255,255,255, 0.2), 1px 1px 1px rgba(0,0,0, 0.7); }
CSS3 метод
При решении проблемы сглаживания шрифтов в движке «Сhromium», на Google.Code один программист предложил быстрое решение на CSS3. Это оказалось весьма рационально, ведь можно отказаться от SVG и сторонних веб-шрифтов шрифтов, которые весят порядка 200~500 Кб и требуют дополнительного времени загрузки.
Данный код нужно добавить в css-файл:
body { -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; }
* этот хинт используется для всех заголовков данного сайта
Данный способ имеет пару недостатков:
Проблему с кернингом можно решить примерно таким css-кодом:
body { font-size: 125%; letter-spacing: 0.05em; line-height: 1.3em; } body > * { font-size: 85%; line-height: 1.3em; }
* разумеется, данные параметры нужно слегка настроить под особенности сайта
Какой метод и каким образом применить - решение индивидуальное. Но результат один - красивые шрифты и довольные читатели.
Если конечно, браузер обновленный.
SVG метод
Потребуется генератор веб-шрифтов fontsquirrel.com/tools/webfont-generator
Нужно загрузить нужный шрифт в формате «.otf или .ttf» и выставить данные настройки:

Согласиться с требованиями и нажать «DOWNLOAD YOUR KIT»
После загрузки архива будет достаточно только подключить SVG-шрифт к сайту, но желательно, использовать все форматы.
CSS-код для подключения шрифтов, который можно вынести в отдельный файл:
@font-face { font-family: 'Open Sans'; src: url('/font/opensans.eot'); src: url('/font/opensans.eot?#iefix') format('embedded-opentype'), url('/font/opensans.woff') format('woff'), url('/font/opensans.ttf') format('truetype'), url('/font/opensans.svg#OpenSansRegular') format('svg'); font-style: normal; font-weight: normal; }
* в данном случае все шрифты Open Sans лежат в папке «font» в корне сайта
Пару простых хинтов:
На данный момент я использую полный набор шрифтов на сайте, в том числе и SVG, так как способ надежнее и скорость хостинга позволяет. Со временем, когда «ли.ру» скажет, что обычный пользователь рунета использует достаточно свежую версию браузера, задумаюсь о переходе на чистый CSS-метод.