Сглаживание экранных шрифтов Clear Type. Сглаживание шрифтов в браузере с использованием Cufon

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

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

Насчёт сглаживания шрифтов надо сказать, что некоторые браузеры в некоторых операционных системах сами всё сглаживают. Да и в самой операционной системе можно включить сглаживание шрифта. К примеру в 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).

Технология ClearType создана для лучшего отображения шрифтов на жидкокристаллических мониторах.

В Windows 7 сглаживание шрифтов по умолчанию включено и настроено автоматически, согласно техническим характеристикам вашего монитора. Если автоматические настройки вас не устраивают, то вы можете вручную отрегулировать параметры ClearType.

Подготовка к настройке ClearType

Чтобы корректно настроить сглаживание шрифтов по технологии ClearType, необходимо сделать следующее:

1. Установите самую новую версию драйвера видеокарты. Этот драйвер должен быть написан производителем вашей видеокарты специально для Windows 7.

2. Установите самую новую версию драйвера монитора, совместимую с Windows 7.

3. Установите разрешение экрана, при котором вам будет удобно работать.

4. Выполните , если вы еще не сделали этого.

Настройка ClearType

1. Чтобы отрегулировать параметры сглаживания шрифтов, нажмите Пуск, введите в поисковую строку команду cttune и нажмите Ввод .

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

1. Чтобы отключить сглаживание шрифтов в Windows 7, откройте Панель управления -> Система -> Дополнительные параметры системы .

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

3. Нажмите ОК два раза.

Теперь вы можете обнаружить, что шрифты в интерфейсе программ и операционной системы отображаются слишком угловато и слишком мелко. Причина – в Windows 7 в качестве основного шрифта установлен «Segoe UI», у него другие масштабы и он рассчитан на включенное сглаживание.

Настройка системных шрифтов при отключенном сглаживании

1. Чтобы настроить нормальный вид окон, откройте Панель управления -> Персонализация -> Цвет и внешний вид окна -> Дополнительные параметры оформления…

2. В раскрывающемся списке регулируются параметры отображения большинства элементов интерфейса Windows 7. Выставьте шрифт Tahoma, размер шрифта 8 в следующих пунктах раскрывающегося списка:

• Всплывающая подсказка
• Выделенный пункт меню
• Заголовок активного окна
• Заголовок неактивного окна
• Значок
• Название панели
• Окно сообщения
• Строка меню

Обратите внимание, что в этом окне настроек два поля «Размер». Верхнее поле – это размер элемента интерфейса Windows, а нижнее поле – размер шрифта. Таким образом, чтобы отрегулировать размер шрифта, вносите изменения в нижнее поле , а верхнее поле оставьте без изменений.

3. В пункте Кнопки управления окном выставьте размер 21 (в верхнем поле «Размер»), чтобы сохранились стандартные размеры кнопок «Закрыть», «Свернуть» и «Развернуть».

4. Нажмите ОК .

Экран и шрифты

Новые статьи

Комментарии (10) к “Управление ClearType – сглаживанием шрифтов в Windows 7”

Это все понятно… А что делать с «масштабированием» шрифтов при измении разрешения экрана меньше «рекомендуемого»? Опять включается тоже самое сглаживание… хотя вроде бы везде оно отключено… даже в реестре. Как отключить маштабирование при _низком_ разрешении экрана?

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

Отключал изначально так же, как в вашей статье и лишь потом полез в реестр. Проблема уже решена. Она оказалась в некорректном драйвере для моей видеокарты, который устанавливает Windows 7 и не хочет заменять на оригинальный. Этот драйвер только в режиме «рекомендуемого» разрешения нормально отображает шрифты, а при других разрешениях начинает их «сглаживать». Скрином экрана, на котором шрифт оказался не сглаженным, удалось зафиксировать, что на самом деле шрифты отображаются нормально и лишь на экран выводятся в уже «сглаженном» виде.
Служба техподдержки Microsoft быстро отработала и исправила драйвер.

Интересно… А что за драйвер и какая модель видеокарты?

Как по мне, ClearType отлично справляется даже на моем ЭЛТ мониторе. Все шрифты выглядят намного лучше, чем при обычном сглаживании

От драйвера зависит. До выхода новых драйверов для моей nVidia я сглаживание отключал (размытость была), а теперь, после установки новых драйверов пользуюсь сглаживанием.

народ, вот я непойму откуда вы взяли в панели управления персонализацию?…у меня такого пункта нет, при том что винда лиц…

Павел , откройте панель управления в режиме отображения «крупные значки», к примеру. «Персонализация» находится после «Параметров папок» и перед «Подключениями к удаленным рабочим столам».

Можно ли как-нибудь в Windows 7 поставить сглаживание шрифтов «Обычный»? Такой режим есть в XP, в семерке я его не нашел.

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

Как в Windows 7 сделать так, чтобы шрифты до 15 px не сглаживались, а от 15 px и выше сглаживались?

Заранее спасибо.

Алексей , никак.

У разработчика сайта не так и много средств по изменению вида шрифта, в частности вообще нет способа управления сглаживанием текста. Кто не в курсе, это способ сделать буковки более гладкими за счет добавления пикселов разных цветов. Если увеличить текст в 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.

В очередной раз возвращаюсь к видеокурсу от 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 ;

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

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

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

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. Браузер читает настройки из операционной системы).