Есть еще один фактор – сглаживание, с которым дружат не все браузеры (в том числе и Chrome) при использовании нестандартных шрифтов, хотя, и стандартные тоже не все сглаживают. Получается, что шрифт становится угловатым, а его границы резкими и это не очень комфортно для чтения.
В случае, если нужно использовать сторонний шрифт, например, с «Google.Fonts», то наиболее надежный метод – это создание полного набора форматов шрифта, включая SVG. Можно использовать его, например, только для заголовков.
Если шрифт стандартный, то можно сразу перейти к 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); }
При решении проблемы сглаживания шрифтов в движке «С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; }
* разумеется, данные параметры нужно слегка настроить под особенности сайта
Какой метод и каким образом применить - решение индивидуальное. Но результат один - красивые шрифты и довольные читатели.
Если конечно, браузер обновленный.
Потребуется генератор веб-шрифтов 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-метод.
Может быть, вам знакома ситуация, когда вы заходите на сайт, а там кривые шрифты (мелкие, неудобочитаемые, как на картинке слева)… Но не спешите ругать дизайнера. Дизайнер старался, старался, подбирал шрифт, его начертание. А тут вы! Оп, а дизайнер-то напортачил! Может быть, это вы видели уже не раз, может быть, это попадается вам постоянно? Тогда стоит проверить, включено ли у вас сглаживание экранных шрифтов?
Эта проблема возникла, скорее всего, не так давно, в связи с широким распространением ЖК-дисплеев, имеющих более высокое разрешение. Пиксель виден лучше, размывания, как на «трубке» - не происходит. И «пикселизация» привела к тому, что вместо наклонной линии мы видим ступеньки. Для того чтобы увидеть, как всё замыслил автор сайта, разглядеть всю красоту, необходимо включить сглаживание экранных шрифтов. В разных операционных системах, в разных их версиях эта настройка может находиться не там, где у других. Попробуем описать разные варианты.
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. Браузер читает настройки из операционной системы).
У разработчика сайта не так и много средств по изменению вида шрифта, в частности вообще нет способа управления сглаживанием текста. Кто не в курсе, это способ сделать буковки более гладкими за счет добавления пикселов разных цветов. Если увеличить текст в Windows, то это становится хорошо заметно (рис. 1).
Рис. 1. Увеличенный текст
Благодаря особенности человеческого зрения мы не различаем эти отдельные пикселы, но за счет них текст становится более читабельным. В Windows используется запатентованная технология, названная ClearType, в MacOS имеется аналогичное решение, так что вроде бы беспокоиться не о чем, текст во всех браузерах выглядит одинаково. Однако Safari в свое время продемонстрировал, что может управлять текстом в обход системы, сделав его отличным от остальных браузеров. К тому же в Safari 4 появилась поддержка интересного свойства -webkit-font-smoothing , с помощью которого веб-разработчики могут указывать алгоритм сглаживания.
Чтобы это свойство себя проявило, необходимо в настройках выбрать сглаживание отличное от «Стандарт Windows» (Настройки > Внешний вид > Сглаживание шрифта ), как показано на рис. 2.
Рис. 2. Настройки сглаживания
Вот теперь можно использовать -webkit-font-smoothing и наблюдать результат его воздействия. У этого свойства три значения:
В примере 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.
Приветствую вас, дорогие читатели.
Сегодня хотелось бы рассказать о таком инструменте, как ClearType. Он встроен в операционные системы от Microsoft. Решение позволяет заметно улучшить отображение текста на мониторе, независимо от его структуры и параметров. Далее в статье я расскажу, что такое сглаживание шрифтов в Windows 10 и других версиях, а также, как именно его включать.
Как говорилось выше, в Windows предусмотрен специальный инструмент, позволяющий улучшить отображение текста. Этот элемент является отдельной технологией сглаживания шрифтов. Он предназначен для более удобного чтения на жидкокристаллических дисплеях, типа TFT, OLED и прочих. В прошлом подключение данного ресурса не требовалось, так как использовались мониторы с электронно-лучевой трубкой. При этом в версии Vista вышеописанная функция была включена автоматически, а потому на старых мониторах символы выглядели непривычно, некрасиво и имели неудобный вид для просмотра.
Многим пользователям различных персональных компьютеров или ноутбуков интересно, как включить, настроить или как отключить описываемый инструмент. Чем это может быть полезным? Как говорилось в самом начале, некоторые стандартные настройки, установленные по умолчанию, не просто ни к чему не приводят, а даже мешают. В таких случаях шрифт кажется размытым или по крайней мере непривычным.
Важно! Необходимо точно понимать, что вся проблема именно в ClearType, а не в неправильно выставленном разрешении дисплея. Ведь иногда бывает и так. А потому лучше сначала проверить этот параметр, а только потом настраивать остальные.
Важно! Для того, чтобы все последующие действия вступили в силу, необходимо обладать правами Администратора.
Поменять отображение символов можно при помощи соответствующего инструмента:
Вот и все. В случае, если вам по каким-то причинам вдруг не нравится результат, вы всегда можете вернуться к этой процедуре.
Существует масса мнений, какая именно операционная система лучше. Но есть отдельные пункты, с которыми спорить практически невозможно. Так, например, никто не может возразить, что дизайн Mac OS проработан лучше остальных представителей рынка. А потому многие попросту берут его за основу.
Несмотря на то, что в Win предусмотрен свой инструмент «улучшения» отображения символов, многие хотят видеть их, как в Mac OS. И для этого существует сразу два решения проблемы. Они представляют собой небольшие приложения Gdipp и MacType.
Первый является открытым проектом, работа которого заключается в альтернативном методе обработки шрифтов в Win. И при этом обеспечивается гладкое, а главное приятное для восприятия начертание. Обычно оно встречается в ОС от Apple и дистрибутивах Linux.
Gdipp поддерживает как 32- , так и х64-разрядные версии систем от Microsoft. Что делать пользователям? Просто отправляйтесь на официальный ресурс разработчиков, скачивайте последнюю сборку и устанавливаете.
Важно отметить, что в некоторых приложениях отображение текста может казаться неудобным.
Это происходит в результате различий в стандартах архитектур.
Кроме того, большой популярностью пользуется решение MacType. В целом оно выполняет такие же функции, как и прошлый инструмент. Но вместе с тем обладает дополнительными возможностями, одной из которых является запуск на Windows 1703 сборки.
