Сглаживание шрифтов в браузере с использованием Cufon. Сглаживание шрифтов с помощью CSS3-свойства -webkit-font-smoothing

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

Так же есть моменты, когда ну прям напрашивается сделать текст чуть более жирным, но браузер отображает текст только жирным или не жирным.

Насчёт сглаживания шрифтов надо сказать, что некоторые браузеры в некоторых операционных системах сами всё сглаживают. Да и в самой операционной системе можно включить сглаживание шрифта. К примеру в Windows XP сглаживание настраивается здесь — Пуск -> Настройка -> Панель управления -> Экран -> вкладка «Оформление» -> кнопка «Эффекты» -> Применять следующий метод сглаживания экранных шрифтов -> ClearType -> Ok. Сглаживаться будет всё и вся в ОС.

Но как добиться, чтобы сглаживание шрифтов на нашем сайте в браузере работало всегда , независимо от браузера, операционной системы и настроек.

Предлагаю один из вариантов сглаживания шрифта — использование библиотеки Cufon .

Это javascript библиотека.

Текст при использовании Cufon получается сглаженным. При этом должен быть включён Javascript в браузере.

Поддерживаются следующие браузеры:

• Internet Explorer 6, 7 and 8
• Internet Explorer 9 beta (as of 1.09i)
• Mozilla Firefox 1.5+
• Safari 3+
• Opera 9.5+
• Google Chrome 1.0+
• iOS 2.0+
• Opera Mini (to a certain degree)

Пример сглаживания:

Результат на лицо.

Минусы данного подхода

1. Должен быть включен Javascript. Но я думаю он у многих пользователей включен.
2. Подгрузка файлов JS. Размер может достигать до 200 кбайт. В зависимости от шрифта.
3. Нельзя выделить текст, скопировать. Как вариант — использовать Cufon только в некоторых частях сайта — текст в меню навигации, шапке. Для контента, который не потребуется копировать.
4. Если ссылка подчёркнута, то после применения библиотеки подчёркивание исчезает. Недостаток библиотеки.
5. Оформление при наведении на элемент надо описывать отдельно. Из стилей не берётся. Однако в остальном оформление будет согласно таблице стилей.

Пожалуй это все минусы. В некоторых ситуациях они будут значительными, но в большинстве случаев на них можно не обращать внимания. Особенно в тех случаях, когда дизайнер нарисовал, дизайн принят и надо прямо обязательно сделать как в дизайне сглаженным и слегка жирным(любят дизы ставить Faux Bold в Photoshop).

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

Рис. 1. Увеличенный текст

Благодаря особенности человеческого зрения мы не различаем эти отдельные пикселы, но за счет них текст становится более читабельным. В Windows используется запатентованная технология, названная ClearType, в MacOS имеется аналогичное решение, так что вроде бы беспокоиться не о чем, текст во всех браузерах выглядит одинаково. Однако Safari в свое время продемонстрировал, что может управлять текстом в обход системы, сделав его отличным от остальных браузеров. К тому же в Safari 4 появилась поддержка интересного свойства -webkit-font-smoothing , с помощью которого веб-разработчики могут указывать алгоритм сглаживания.

Чтобы это свойство себя проявило, необходимо в настройках выбрать сглаживание отличное от «Стандарт Windows» (Настройки > Внешний вид > Сглаживание шрифта ), как показано на рис. 2.

Рис. 2. Настройки сглаживания

Вот теперь можно использовать -webkit-font-smoothing и наблюдать результат его воздействия. У этого свойства три значения:

• none - сглаживания нет;
• - сильное сглаживание;
• - среднее сглаживание.

В примере 1 показано, как его использовать для текста всей страницы.

Пример 1. Использование -webkit-font-smoothing

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Прошло еще немного времени, и вот наступил день, когда Кортес со своими завоевателями вступил в Теночтитлан. Не стану описывать всего, что творили испанцы в городе, ибо это дело историка, а я рассказываю лишь свою собственную историю.

Генри Райдер Хаггард. Дочь Монтесумы

Результат примера показан на рис. 3.

Рис. 3. Сглаживание текста с разными значениями -webkit-font-smoothing

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

Пока перспективы использования свойств по сглаживанию текста непонятны, в CSS3 возможно появится свойство font-smooth , которое пока носит черновой статус. Браузеры не поддерживают эту возможность, за исключением движка Webkit, на котором построен Safari и Chrome.

Может быть, вам знакома ситуация, когда вы заходите на сайт, а там кривые шрифты (мелкие, неудобочитаемые, как на картинке слева)… Но не спешите ругать дизайнера. Дизайнер старался, старался, подбирал шрифт, его начертание. А тут вы! Оп, а дизайнер-то напортачил! Может быть, это вы видели уже не раз, может быть, это попадается вам постоянно? Тогда стоит проверить, включено ли у вас сглаживание экранных шрифтов?

Эта проблема возникла, скорее всего, не так давно, в связи с широким распространением ЖК-дисплеев, имеющих более высокое разрешение. Пиксель виден лучше, размывания, как на «трубке» - не происходит. И «пикселизация» привела к тому, что вместо наклонной линии мы видим ступеньки. Для того чтобы увидеть, как всё замыслил автор сайта, разглядеть всю красоту, необходимо включить сглаживание экранных шрифтов. В разных операционных системах, в разных их версиях эта настройка может находиться не там, где у других. Попробуем описать разные варианты.

Windows XP

Правой кнопкой мыши на рабочем столе - Свойства - Оформление - Эффекты

Поставить галочку напротив: «Применять следующий метод сглаживания экранных шрифтов» и выпадающем меню выбираем Clear Type.

Жмём - Применить, затем - ОК.

Перезагружаемся и ОП! Всё красиво.

В современных операционных системах, например в Windows XP, если вы пользуетесь ЖК-монитором, возможно в панели управления есть пункт «Настройка ClearType». Войдите в этот раздел и запустите «Мастер настройки ClearType». Выполняя пошаговые инструкции, вы очень точно и тонко настроите сглаживание шрифтов конкретно для вашей видеокарты и вашего монитора. И шрифты перестанут быть «ступенчатыми» и «расплывчатыми». Эта настройка похожа на то, как всё реализовано в Windows 7 и 8.

Сглаживание экранных шрифтов Windows 7

Эта опция находится в другом месте и имеет больше параметров и тестов для выбора наилучшего варианта отображения текста.

«Панель управления» — «Оформление и персонализация» — «Экран». Затем слева нужно выбрать «Настройка текста Clear Type». Запустится мастер, который позволяет включить, настроить или отключить Clear Type.

Windows 8

Настраивать не пришлось, всё уже было готово.

Но, если вам интересно, то все настройки Clear Type находятся там же, где и в Windows 7. На рабочем столе щёлкаем правой кнопкой мыши, выбираем «Screen Resolution». В верхней строчке «Control Panel - Appearance and Personalization - Display - Screen Resolution» щёлкаем на пункте «Display». Слева выбираем «Adjust Clear Type Text». Проверяем, чтобы была поставлена галочка - «Turn On Clear Type» и жмём кнопку «Next». То есть запускаем мастер настройки Clear Type. Следуем инструкциям на экране, пока не добьёмся наилучшего отображения шрифтов.

Safari

Safari - браузер от компании Apple. Но есть версия и под Windows. Возможно, что настройка в самой операционной системе происходит иначе. Пишите, если знаете как.

В верхнем правом углу браузера Safari нажимаем иконку настройки (шестерёнка).

Выбираем закладку «Внешний вид». В выпадающем меню «Сглаживание шрифта» выбираем то, что нам больше нравится: «Наилучшее для CRT» (Этот метод я и применил, как лучший. Смотрите на скриншот), «Облегчённое» (Буквы стали жирными), «Среднее - оптимально для плоских экранов» (очень жирно), «Сильное» (жирнее некуда - текстовые блоки потемнели, изменилось восприятие параграфов), «Стандартное Windows» (выглядит так же, как в Windows. Браузер читает настройки из операционной системы).

В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus - PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.

На этот раз вопрос будем касаться свойства

, поэтому я выкроил специально для этого вопроса время, чтобы разобраться подробнее. Первым делом отправился на htmlbook.ru - незаменимый источник знаний для html-верстальщика.

Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.

Первое - что такое сглаживание шрифтов и зачем оно нужно. Для чего нужно, можно догадаться и так, без всяких ресурсов и статей, ибо само название говорит за себя. Сглаживание шрифтов - это чтобы сделать их начертание на устройстве вывода (монитор и любой другой экран) более плавным. То есть, границы шрифтов становятся гладкими и четкими. Конечно, текст созданный таким шрифтом, читать приятнее и глаза не так устают от подобного процесса.

А вот способ (и это второй момент), с помощью которого достигается такое улучшение начертания шрифтов, не так очевиден. Можно даже сказать больше - он совсем неожиданный. Раньше я случайно пару раз наблюдал такую картину, но мне тогда казалось, что это “глюк” монитора, его неспособность правильно “отрисовать” буквы шрифта.

Теперь-то я знаю, что такое отображение шрифта сделано намеренно, с помощью окрашивания пикселей, расположенных на краях букв, в разные цвета. То есть, получается, что цвет пикселей для всей буквы шрифта неоднородный (допустим - черный), а составлен из нескольких цветов.

Но вот парадокс - человеческий глаз не замечает данного факта, а как раз наоборот - такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:

В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS

заработало в браузере, в его настройках нужно выставить отображение шрифтов, отличное от стандартов операционной системы Windows.

Поэтому, в браузере Firefox такую настройку можно не искать - ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):

Ну, хватит про браузеры - перейдем к CSS и свойству

- сглаживание вообще отключено;

- сильная степень сглаживания.

И ниже приведу все три примера отображения текста в браузере Safari для каждого из значений свойства

это вообще жуть - ничего не читается совсем, поэтому отбрасываем и забываем о нем (в браузерах Firefox, Chrome и других все будет отображаться правильно, ибо они не имеют подобной настройки, как Safari).

Второй случай

похож на второй, но текст выглядит немного жирным, что не так приятно, как в предыдущем случае. ясно, что основное свойство в HTML-шаблон автор Adi Purdila: -webkit-font-smoothing : antialiased ;

… дела ушли не намного вперед.

Есть еще один фактор – сглаживание, с которым дружат не все браузеры (в том числе и 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; }

* этот хинт используется для всех заголовков данного сайта

Данный способ имеет пару недостатков:

не работает на старых версиях Chrome ниже 21

расстояние между буквами (кернинг) шрифта может слегка поменяться

Проблему с кернингом можно решить примерно таким 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» в корне сайта

Пару простых хинтов:

Минимально для сглаживания достаточно присоединить только только «woff» и «svg» шрифты

Чтобы не подгружать шрифт можно закомментировать всю строку в /* адрес шрифта */

На «FontSquirrel» можно покопаться в настройках и исключить лишнее из шрифтов

Параметры font-family, font-style, font-weight можно настраивать опционально

На данный момент я использую полный набор шрифтов на сайте, в том числе и SVG, так как способ надежнее и скорость хостинга позволяет. Со временем, когда «ли.ру» скажет, что обычный пользователь рунета использует достаточно свежую версию браузера, задумаюсь о переходе на чистый CSS-метод.