Webkit font smoothing antialiased что это
Сглаживание шрифтов для разработчика и пользователя на Mac OS
Используем в работе
Очень хорошо этим свойством обрабатываются подгружаемые шрифты.
Вот и все, больше ничего не нужно. Теперь ваш сайт стал чуточку красивее и элегантней, хоть это и не так заметно с первого взгляда.
Используем в браузере как пользователи
Для этого вам нужно установить расширение для Chrome / Firefox — Stylish.
И нажать на кнопку сохранить (save). Теперь можно закрыть это окно и сглаживание будет по умолчанию включено на всех сайтах. Я именно так и сделал 🙂
Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.
Адекватное подчеркивание ссылок
Как исправить поведение text-decoration: underline
За и против. Оформление незагруженных изображений.
Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.
Управляем поведением font-face в CSS
Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.
Старт курса по архитектуре JavaScript приложений в SmartJS академии
Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии
Принудительное сглаживание с помощью css: это миф?
недавно клиент пожаловался на появление системного шрифта в IE6. В основном проблема заключается в том, что IE6 не поддерживает сглаживание/сглаживание шрифтов (я знаю, что вы можете включить его в настройках ОС или что-то еще). Но кто-то выбросил этот перл:
» вы можете заставить шрифт анти-псевдоним в css с помощью pt вместо px.»
Я сделал быстрый POC в различных браузерах и не видел никакой разницы. Я нашел одну ссылку на него в интернете, последний пост на этом форум:
Это звучит как эквивалент городского мифа веб-разработчика, я чувствую, что это BS. Кто-нибудь сталкивался с этим?
16 ответов:
нет, на самом деле нет никакого способа контролировать это как веб-разработчик.
небольшие исключения заключаются в том, что вы можете сделать некоторые поддельные форсирование сглаживания с помощью Flash through sIFR, и некоторые браузеры не будут использовать растровые/пиксельные шрифты с анти-псевдонимами (поскольку они не должны, дополнительная информация:Анти-Алиасинг/Анти-Анти-Алиасинг).
кроме того, как упоминал Даниэль, идеально использовать em единицы измерения для всех шрифтов, см. Невероятные Эм & Эластичные макеты с CSS для получения дополнительной информации об этом.
да можно:
есть эти захватывающие новые свойства в CSS3:
все еще не сделал много испытаний с ними сам, хотя, и они почти наверняка не будет никакой пользы для IE. Может быть полезно для Chrome на Windows или, возможно, Firefox, хотя. В последний раз, когда я проверял, они не делали небольшие вещи antialias автоматически, как они делают в OSX.
обновление
они не поддерживаются в IE или Firefox. Свойство font-smooth доступно только в iOS safari насколько я помню
Я нашел действительно неудобное решение, используя свойства масштабирования и фильтра ms-only Пример (попробуйте без aa, standard и cleartype): http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html
-увеличение текста с увеличением: x, x>1
-применить размытие(ы) (или любой другой фильтр)
-уменьшить с увеличением: 1 / x
Это немного медленно, и очень! голодный до памяти метод, и на небелом фоны у него есть небольшой темный ореол.
вы можете использовать этот короткий jQuery для принудительного сглаживания, просто добавьте класс ieaa к чему угодно:
добавление следующей строки CSS работает для Chrome, но не Internet Explorer или Firefox.
text-shadow: #fff 0px 1px 1px;
исправление px to pt работало для меня на сайте, который использует шрифт из веб-шрифтов Google. На Win7-IE8 он правильно исправил отсутствие рендеринга анти-псевдонимов.
использование параметра непрозрачности 99% (через фильтры DXTransform) фактически заставляет Internet Explorer отключить ClearType, по крайней мере, в версии 7. источник
Я сомневаюсь, что есть в любом случае, чтобы заставить браузер делать что-либо. Это будет зависеть от конфигурации системы, используемого шрифта, настройки браузера и т. д. Это звучит как BS для меня тоже.
в качестве примечания всегда используйте относительные размеры, а не PX.
кажется, что наиболее исчерпывающее решение можно найти в http://www.elfboy.com/blog/text-shadow_anti-aliasing/. работает в Firefox и Chrome, хотя Firefox не так эффективен, как Chrome.
в качестве примечания, геккон и WebKit поддерживают the
собственность, а также.
не чистый CSS, но изначально поддерживаемый метод без каких-либо хаков замены шрифтов: Просто преобразуйте свой шрифт в SVG и поместите его выше(перед WOFF или TTF) в порядке @font-face. Вуаля! Шрифты теперь гладкие, потому что они больше не рассматриваются как шрифт, а форма SVG, которая будет хорошо сглажена.
Примечание: я заметил, что SVG может весить больше, чем WOFF или TTF.
font-smooth
Время чтения: 6 мин
Обновлено 13 декабря 2021
Осторожно! Это свойство нестандартное. Используйте его, только если вам очень нужно добиться изменения сглаживания, и внимательно проверяйте работу в разных браузерах и на разных платформах. В данный момент свойство работает только на macOS. Поддержку можно проверить на Can I use.
Кратко
В разных операционных системах и разных браузерах используются разные механизмы сглаживания шрифта. Браузерные варианты свойства font-smooth позволяют управлять сглаживанием шрифта, пока только в macOS.
Пример
В этом примере мы меняем сглаживание текста на всей странице. Поскольку свойство font-smooth нестандартное, каждый браузер реализовал его по-своему: название свойства примерно одинаковое (за исключением префиксов), но значения разные. Несмотря на это, иногда можно получить одинаковые результаты.
Сглаживание на экране с низкой плотностью пикселей (1x), без сглаживания и со сглаживанием:
Сглаживание на экране с высокой плотностью пикселей (2x), без сглаживания и со сглаживанием:
Как понять
Большинство экранов состоит из пикселей, каждый из которых — это группа из трёх лампочек разного цвета: красной, зелёной и синей. Эти лампочки редко имеют прямоугольную форму, а некоторые даже не расположены по обычной сетке.
Символы шрифта — это векторные фигуры (глифы), которые при отрисовке нужно так расположить на пикселях экрана, чтобы было максимально похоже на оригинал. Чем сложнее шрифт и тоньше у него линии, тем сложнее их передать «грубыми» пикселями.
Посмотрите, как хвостик у буквы К отрисовывается лесенкой:
Браузеры сглаживают фигуры по-разному, в зависимости от движка, свойств экрана и операционной системы. Например, вот так выглядит текст Font Smoothing шрифтом Italianno в браузере Chrome на Windows (сверху) и на macOS (снизу).
Если вы привыкли к Windows, вам покажется знакомым и приятным первое сглаживание, если к macOS — второе. А может быть и наоборот — всё зависит не только от привычки, но и от размера шрифта, цвета текста и фона. То есть нет «правильного» сглаживания, есть сглаживание по умолчанию.
Свойство font-smooth управляет сглаживанием шрифта. Например, значения antialiased (в браузерах идущих от движка WebKit) или grayscale (в Firefox) включает сглаживание оттенками серого. Только в браузерах, идущих от WebKit, можно включить субпиксельное сглаживание.
В полной мере передать изменение сглаживания можно только на макроснимках экрана. Но на первый взгляд включение сглаживания оттенками серого делает рисунок шрифта тоньше, а субпиксельное сглаживание — толще.
Как пишется
Из-за того, что свойство font-smooth не является частью стандарта CSS, каждый браузер реализует его на своё усмотрение.
Но на этом сложности не заканчиваются. В каждом из браузеров реализован разный набор значений.
Значения для WebKit
Значения для Firefox
Firefox не поддерживает отключение сглаживания или субпиксельное сглаживание.
Примеры значений
Чтобы проверить как работают все комбинаций свойств и значений, мы собрали даже те, которые не работают вместе:
Демо в Chrome: значение none отключает сглаживание совсем.
Демо в Firefox: значение none просто не работает.
Особенности применения
Идея включить одинаковое сглаживание шрифтов в вашем дизайне на всех устройствах, на первый взгляд, кажется отличной. Однако стоит учитывать важные особенности: привычки пользователей, браузерную поддержку и контраст с фоном.
Привычки пользователей
Если вы попытаетесь привести сглаживание шрифта привычному на Windows или принятому в графическом редакторе, вы можете не учесть, что все остальные тексты в браузере и за его пределами будут по-прежнему сглаживаться так, как принято по умолчанию в операционной системе. Это может вызвать дискомфорт и сложности с чтением.
Браузерная поддержка
Свойство font-smooth совсем не работает на Windows, Android и даже iOS.
Firefox на Windows:
Контраст с фоном
При включении сглаживания оттенками серого (самое частое применение), рисунок шрифта становится заметно тоньше, что уменьшает его контрастность, особенно на тёмном фоне. Об этом стоит помнить, создавая тёмные темы. Но аналогично может просесть и контрастность на белом фоне при небольших размерах шрифта или изначально неконтрастном цвете текста.
Подсказки
💡 Важно ещё раз акцентировать внимание, что это свойство — не часть стандарта. Оно реализуется и поддерживается по инициативе браузеров и может измениться или пропасть в любой момент.
💡 Свойство совсем не работает ни в одном из браузеров на Windows, Android и iOS.
Способы управления расстояниями в веб-типографике
Дата публикации: 2016-10-17
От автора: если в 2006 году вы уже писали сайты, вы могли сталкиваться с такими дизайнерами, как я, которые скрупулезно подходили к вопросу шрифтов, но не сравнивали, как они выглядят на макете и в браузере. Вы, возможно, пытались объяснить таким, как я, что такое кроссбраузерная совместимость, и как разные браузеры по-разному отображают эти шрифты. Я же высылал вам в ответ изображение с контентом, не утруждая себя проверить, что текст во всех браузерах смотрится одинаково. Да, я был одним из таких дизайнеров.
Веб-шрифты сильно эволюционировали с того времени, а у нас появились инструменты для изменения стиля их отображения. Некоторые из инструментов довольно старые. Помню, как у меня чуть не слетела крыша, когда я узнал про FitText.js и Lettering.js.
Несмотря на большой выбор инструментов, есть множество ситуаций, когда нам приходится подстраивать шрифты вручную для лучшей разборчивости. В этой статье я расскажу вам про эти случаи, а также узнаем про способы решения таких проблем.
Исправляем вид одного конкретного заголовка
Я часто сталкиваюсь с такой проблемой, особенно когда в дизайне присутствует супер навороченный шрифт. Сам веб-шрифт выглядит превосходно, но в отдельных ситуациях начинаются проблемы. Для примера возьмем следующий заголовок со шрифтом Abril Fatface с Google Fonts:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Какой красивый шрифт! Но именно в этом заголовке мне не нравится пара вещей, а в частности расстояния между несколькими буквами. Буквы расположены слишком близко:
Тут нам поможет кернинг! Кернинг – это расстояние между буквами. Во всех файлах шрифтов есть кернинг, и с помощью свойства font-kerning мы можем его удалить:
Разница совсем небольшая, но кернинг может действительно помочь, если ваш дизайнер захочет изменить расстояние между буквами.
Отключение кернинга не всегда целесообразно. Как отметил Джеймс Колче, хорошие шрифты используют кернинг в качестве инструмента не просто так. Если удалить кернинг с помощью CSS для решения одной конкретной проблемы, мы можем непреднамеренно изменить расстояния между буквами во всем шрифте.
Данные о поддержке в браузерах ниже взяты с сайта Caniuse, на котором также говорится, что данная функция находится в статусе W3C Candidate Recommendation.
Полная фиксация расстояний между буквами
Если вы работали со шрифтами, где расстояние между буквами или слишком большое, или слишком маленькое, то вы познали, что такое боль. Ниже пример с еще одним замечательным Google шрифтом Dorsa:
Шрифт отлично подходит для заголовков. Но можете себе представить, каково было бы читать текст с таким шрифтом в параграфе? Да ну.
Свойство letter-spacing может радикально поменять восприятие данного шрифта в параграфе, добавив пару пикселей между букв:
Я не стану говорить, что этот шрифт стал лучшим для параграфов, однако с дополнительным расстоянием стало легче читать:
Данные о поддержке в браузерах ниже взяты с сайта Caniuse, на котором также говорится, что данная функция находится в статусе W3C Candidate Recommendation.
Слишком маленькое или слишком большое расстояние между словами
Последняя ситуация. Здесь отличие в том, что нас не устраивает расстояние между словами, а не отдельными символами. Тут нам поможет свойство word-spacing, одинаково работающее во всех браузерах. Пример со стихотворением, в котором используется шрифт Prompt. Шрифт слегка шире других, и смотрелся бы лучше, будь он немного уже.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Неравные расстояния между строками
Не все строки имеют одинаковую высоту. Посмотрите, как один шрифт кажется больше другого, хотя значение font-size у них одинаковое.
Свойство font-size задает прямоугольную область, которую может занять шрифт. Если задать свойство font-size: 20px, то мы создадим блок, в который можно поместить буквы размером в 20px.
Некоторые шрифты будут занимать больше пространства, из-за чего будет казаться, что они больше по размеру и имеют большее или меньшее вертикальное расстояние между строками.
Для управления вертикальными отступами можно воспользоваться свойством line-height. Есть так называемое золотое правило разборчивости текста font-size * 1.5 = line-height (или безразмерный вариант line-height: 1.5;), которое будет изменяться в зависимости от выбранного шрифта и того, как он занимает вертикальное пространство. Посмотрите molten leading.
Четкость и разборчивость
Не все шрифты одинаково отображаются в разных операционных системах. Это происходит потому, что в ОС Windows, Mac OS и т.д. берется разное количество пикселей на отрисовку шрифтов. Многие веб-дизайнеры ненавидят ту мысль, что мы зависим от того, как ОС интерпретирует наши решения со шрифтами.
В CSS есть свойства, увеличивающие разрешение шрифтов для отображения в ОС. Этот процесс называется субпиксельный рендеринг. Браузеру даются команды, чтобы тот попробовал залить определенные пиксели на экране.
Было множество споров, можно ли играться с субпиксельным рендерингом или нет. Дмитрий Фадеев красиво высказался против данной практики. Его слова актуальны, несмотря на то, что прошло уже несколько лет.
«Режим сглаживания – не «фикс» для субпиксельного рендеринга, в большинстве случаев он только мешает. Субпиксельный рендеринг технически превосходит режим сглаживания, он чище и более читаемый. Эффективное разрешение для сглаживания шрифта увеличивается в три раза за счет использования каждого субпикселя. Режим сглаживания будет полезен в определенных ситуациях. К примеру, темный текст на светлом фоне. Однако сглаживание не заменит субпиксельный рендеринг, и уж точно это не «фикс».»
Но, к примеру, мы все же хотим это сделать. Свойство font-smooth дает нам определенный уровень контроля над четкостью и читаемостью текста. Свойство заполняет те пиксели, которые пропустила ОС. Значения свойства font-smooth:
auto: позволяет браузеру самому принять решение о том, как лучше всего залить пиксели шрифта.
never: отключает автоматическое сглаживание системы. Шрифт будет отображаться по-обычному, с зазубренными краями и т.д.
always: браузер получает команду всегда добавлять пиксели в шрифт, если есть такая возможность.
Заметка: на момент написания статьи свойство font-smooth считалось неофициальным свойством и не рекомендовалось для использования. Для работы в браузерах WebKit и Mozilla есть специальные вендорные префиксы, однако свойство нестандартизированное. Учитывая заметку выше, для вендорных префиксов можно выделить следующие значения:
-webkit-font-smoothing
none: отключает сглаживание шрифта в WebKit браузерах.
antialiased: сглаживает шрифт на одном уровне, так как пиксели уже отрисованы операционной системой.
subpixel-antialiased: сглаживает текст на микро уровне, повышая четкость текста, особенно для экранов с высоким разрешением.
-moz-osx-font-smoothing
auto: браузер сам решает, нужно ли оптимизировать сглаживание шрифта или нет.
inherit: свойство наследует значение от родителя.
unset: то же самое, что none в префиксе WebKit.
grayscale: то же самое, что значение antialiased в префиксе WebKit.
Данные о поддержке в браузерах ниже взяты с сайта Caniuse, на котором также говорится, что данная функция находится в статусе Unofficial или W3C «Note».
Вы пользуетесь SVG?!
В SVG есть свой уровень поддержки описанных в этой статье техник. В SVG есть свой кернинг, расстояние между букв и слов. Также стоит упомянуть атрибут textLength, с помощью которого можно явно задать ширину текста, а текст подстроится под указанные рамки. Атрибут lengthAdjust также работает с одним символом или глифом (знаки пунктуации).
Заключение
Типографика в интернете – занятие непростое. Да, у нас есть тьма инструментов, с помощью которых можно контролировать отображение шрифта, его рендеринг и расположение на экране. Однако с большой силой приходит большая ответственность. По крайней мере, теперь у вас есть парочка инструментов, которыми вы можете помочь дизайнерам, которые не могут решить проблему точного переноса дизайна в браузер.
Автор: Geoff Graham
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Webfonts — разбираемся с антиалиасингом под Windows (UPD)
Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.
Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.
(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)
Суть проблемы
Небольшое общее замечание — приведенные в статье исследования проводились под Windows 7. Будет интересно узнать в комментариях о положении дел на других платформах.
Итак, разница между двумя приведенными фрагментами состоит в том, что на втором из них при отображении шрифта браузер применяется так называемое сглаживание (antialiasing). Как же заставить браузер использовать это сглаживание? Как в дальнейшем оказалось, все очень сильно зависит как от самого браузера так и от настроек операционной системы. Забегая вперед, скажу, что сглаживание бывает двух видов и результаты их работы отличаются друг от друга. Первый тип я уже упомянул, а второй — это так называемый субпиксельный рендериг. Но давайте обо всем по порядку.
Поиск решения, как водится, начался с публикации этого вопроса на одном из профильных ресурсов. Ответы обнадеживали, но ни один из них не помог в полной мере, хотя они и раздвинули горизонты моего познания в этой области. Поиск работающего решения занял три часа, в течении которых была повреждена стена и, соответственно, собственный лоб, хотя в статьях с готовыми решениями дефицита не было. Как обычно, рогатый прятался где-то в знаках препинания.
Chrome
К счастью, я не первый, кто сталкивается с этой проблемой и поиск по ключевым словам быстро вывел на ее решение с помощью использования SVG шрифтов, которые, в отличии от своего TrueType аналога, в Chrome рендерятся с применением первого типа сглаживания, то есть антиалиасинга. Казалось бы,- вот оно счастье,- но не тут-то было!
Наверняка, существуют и другие способы получения необходимых font-файлов, но почему-то мной был выбран сервис FontSquirrel. Не хочу делать поспешных выводов, но на мой взгляд, в их генератор css вкралась ошибка.
В качестве подопытного кролика возьмем уже готовый шрифт Colaborate с их сайта. В архиве находится набор шрифтов в различных форматах, файл css и demo.html Открываем последний в Chrome и начинаем недоумевать, а где же, собственно, сглаживание? Особенно сильно его отсутствие заметно у Bold начертания.
Откроем css и посмотрим, что же для нас сгенерировали на сервере FontSqurell:
на первый взгляд, никакого криминала не заметно. Не стану описывать процесс поиска решения, прерываемого тем самым стуком головы о стену, приведу сразу фрагмент, выдавший желаемый результат:
Как было написано выше, разница лишь в одной строчке. Определение svg шрифта поставлено сразу под определение eot и из него удалена подстрока #ColaborateThinRegular. О разнице судите сами — справа фрагмент с оригинальным css (сглаживания нет), слева после внесения исправлений:
Объяснение этому весьма простое — переместив описание svg шрифта мы повысили его приоритет в WebKit браузерах (Chrome, Safari) и он стал использоваться вместо TTF, который эти браузеры под Windows почему-то не сглаживают.
Не могу судить о причинах, по которым генератор этого сервиса делает именно такой css, а не какой-то другой. Возможно, раньше это работало хорошо, но с тех пор могло что-то измениться в WebKit. Думаю, что стоит написать им багрепорт, если в комментариях не приведут какого-то более логичного объяснения.
Но это еще далеко не все, что я узнал о веб шрифтах. Дальше пойдет речь о тонких настройках в FontSquirrelдля наборов с кириллическими символами, сглаживании в других браузерах и оптимизации скорости загрузки веб шрифтов. Начну с последнего пункта.
Оптимизация загрузки
И меняем соответствующую строчку в css (добавляем z) — url(‘ColabThi-webfont.svgz‘) format(‘svg’)
Обратите внимание, font/opentype не является стандартным MIME-type, но именно такой тип помогает избавиться от назойливой ошибки в консоли Chrome: Resource interpreted as Font but transferred with MIME type image/svg+xml
Настройки FontSquirrel
Буду признателен за уточнения к этим настройкам, если можно их как-то улучшить, от знатоков своего дела в комментариях.
Другие браузеры
В заключении, коротко коснусь особенностей IE, FireFox и Opera. Напомню, что речь идет о Windows7.
Тут стоит сказать, что алгоритм антиалиасинга, применяемый Chrome для SVG шрифтов, это не то же самое, что субпиксельное сглаживание, используемое различными ОС для отображения экранных шрифтов. В Windows эта технология называется ClearType. Посмотрите на разницу — красный шрифт это Chrome + SVG Antialiasing, черный FireFox + TTF ClearType. На этом фрагменте хорошо заметно, что антиалиасинг добавляет «лишние» пиксели, делая буквы чуть шире. Для некоторых макетов про кросбраузерную pixel perfect верстку можно забыть.
Нехитрым экспериментальным путем удалось установить, что сглаживание в FF и большой O напрямую зависят от настроек ClearType в операционной системе. Если выключить эту функцию, то заставить браузеры сглаживать шрифты невозможно, хотя IE игнорирует указания операционной системы и сглаживает шрифты всегда. Как пишут, какое-то время назад появилась css директива (-webkit-)font-smooth(ing), но в последних версиях FireFox ее поддержку почему-то убрали. Если вы знаете, как можно обойти эти ограничения, напишите пожалуйста об этом в комментариях. Так же неясен ответ на вопрос как отключить сглаживание шрифтов, ведь существуют ситуации, когда этого делать не надо.
Заключение
В процессе написания этой статьи был прочитан ряд тематических статей и просмотрено много сайтов через призму использования нестандартных шрифтов, с целью определения для себя сферы применимости этой полезной технологии. Хочу сказать, что вывод я сделал следующий — применять нестандартные фонты можно и нужно (иначе, всех зохавает bootstrap), но в ограниченном количестве, для декорирования некоторых элементов UI. И основной текстовый контент нужно оставить в покое! Иначе, сайт может выглядеть совсем не так, как это изначально задумывалось. В подкреплении этих слов даю ссылку на вдумчивую статью, в которой говорится приблизительно тоже самое, но более развернуто. Возможно, в будущем ситуация изменится, но для этого в браузерах должна появиться единая подсистема управления рендерингом шрифтов, одинаково отображающая текст, хотя бы в рамках одной платформы.