Сглаживание шрифтов css: font-smooth — CSS — Дока

Свойства CSS, влияющие на рендеринг шрифта / Хабр

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

Примечание: на скриншотах показан рендеринг шрифтов в Сафари 5 на МакОси 10.6.

Размер шрифта

Незначительное изменение размера шрифта может очень сильно отразиться на внешнем виде гарнитуры

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

Цвет

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

Высокий контраст; тёмный текст на светлом фоне

Слабый контраст

Светлый текст на тёмном фоне

Светлый текст на тёмном фоне, как правило, выглядит толще, чем тёмный на светлом (см. также исследование на эту тему, выполненное Шоуном Бланком), поэтому в таких случаях стоит уделять особенное внимание низкой контрастности. Учитывайте, что недостаток контраста может вызвать затруднения у читателей с нарушенным зрением. Утилита Colour Contrast Check, написанная Джонатаном Снуком, проверяет цвета фона и переднего плана на соответствие WCAG.

WebKit и сглаживание шрифтов

Свойство

-webkit-font-smoothing (работающее только в браузерах с поддержкой WebKit) позволяет дизайнеру указать один из трёх вариантов: subpixel-antialiased (по умолчанию), antialiased, или none. Тим Ван Дамм показал, что значение «antialised», как правило, делает текст более тонким в Сафари на Маках, чему очень сильно обрадовались дизайнеры, ранее использовавшие посторонние свойства — например, text-shadow — чтобы текст выглядел менее неуклюжим.

Другие чуваки подвергали сомнению использование -webkit-font-smoothing как средство утончения текста, хоть это и префикс, а не постхак. Кристоф Зиллгенс утверждает, что диагональные засечки выглядят плохо при отключённом сабпиксельном анти-алиасинге; Дмитрий Фадеев говорит, что мелкий текст менее резок.

Повороты

Наверное, очевидно, что вращение текста ведёт к проблемам с рендерингом. Плоские преобразования в CSS3, как объяснил Энди Кларк в своём посте для Typekit, позволяют дизайнерам поворачивать элементы; хотя этой фишкой можно достичь желаемого графического результата, негоризонтальный набор — это подлинные дебри рендеринга. К счастью, подобные эффекты менее заметны на экранах с высоким разрешением.

Скриншот текста, повёрнутого на 90^o; изображение развёрнуто

Скриншот текста, повёрнутого на 45^o; изображение развёрнуто

Скриншот текста на Safari Mobile, повёрнутого на 45^o; изображение развёрнуто

Вывод

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

Отфильтрованные посты — aleksandr ● ru

2022-12-30 22:21:45

REE modeles MB-149 Y-2126

Хобби H0 1:87 Обзор REE modeles

Удивительный миниатюрный локомотив серии Y-2100, относящийся к IV-VI эпохе, для промышленных железных дорог. Помимо неординарной внешности, обладает необычной конструкцией, что делает его на голову выше аналогов. 

Читать дальше…

2022-12-25 23:17:48

Piko 50614 Dampflok BR 78 DRG II

Хобби H0 1:87 Piko Обзор

Долгий и мучительный выбор единственного паровоза на моем макете, наконец, завершился в пользу BR-78 DRG II производства Piko. Выбор был непростым из множества вариантов от разных производителей. Внешний вид паровоза, как и автомобиля, делают колеса, поэтому процесс выбора был сосредоточен вокруг вариантов, у которых относительно большие колеса и есть какая-то «изюминка» во внешности.

Читать дальше…

2022-12-24 23:04:07

Cadillac Eldorado на макете

Хобби H0 1:87 Busch

Cadillac Eldorado (Busch 45129 pastel blue) просто великолепен!

Читать дальше. ..

2022-12-10 15:56:35

Piko 52904 Diesellok V 200 DR III

Хобби H0 1:87 Piko Обзор

В этот раз я стал обладателем локомотива серии Expert. Я не гнался за словом «expert», посто попалась модель, которая была нужна по хорошей цене, на фоне возможных альтернатив, и главное, без ненужных наворотов, за которые приходится переплачивать. 

Читать дальше…

2022-12-09 16:41:53

Bluetooth модуль HC-06 в руках дилетанта

В мемориз Mac OS Bluetooth Arduino

Речь пойдет о весьма популярном модуле HC-06, про который, как и про его более функционального собрата HC-05 написано очень много примерно одинакового по всей поисковой выдаче. Одна беда, что почти все пишут относительно HC-05, говоря, что в HC-06 все так же, но на практике все совсем не так.

Читать дальше…

• Почтовый трек с правильной контрольной суммой 23
• Обзор смартфона CHANGHONG W20 21
• Оцифровка PIKO BR-120 18
• Убираем ATI Catalyst Control Center из контекстного меню (правой кнопки мыши) 18
• Установка Oracle Client под Windows 16

• Убираем ATI Catalyst Control Center из контекстного меню (правой кнопки мыши) 11
• Почтовый трек с правильной контрольной суммой 10
• Обзор смартфона CHANGHONG W20 7
• Выпуск тестовых сертификатов ЭП КриптоПро с любыми данными 5
• Свой Git сервер на Windows 3

Блог в RSS Канал в Telegram

smooth — CSS: каскадные таблицы стилей

Нестандартный
Эта функция является нестандартной и не соответствует стандартам.

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

Свойство CSS font-smooth управляет применением сглаживания при отображении шрифтов.

Синтаксис

 /* Значения ключевых слов */
шрифт-гладкий: авто;
гладкий шрифт: никогда;
шрифт-гладкий: всегда;
/* значение <длины> */
шрифт-гладкий: 2em;
 

WebKit реализует аналогичное свойство, но с другими значениями: -webkit-font-smoothing . Он работает только на Mac OS X/macOS.

• auto — пусть браузер решает (использует субпиксельное сглаживание, когда доступно; это значение по умолчанию)
• нет — Выключить сглаживание шрифта; отображать текст с неровными острыми краями.
• сглаженный — Сглаживание шрифта на уровне пикселя, а не субпикселя. Переключение с субпиксельного рендеринга на сглаживание для светлого текста на темном фоне делает его светлее.
• субпиксельное сглаживание — на большинстве дисплеев без Retina это даст самый четкий текст.

Firefox реализует аналогичное свойство, но с другими значениями: -moz-osx-font-smoothing . Он работает только на Mac OS X/macOS.

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

Формальное определение

499999999999999999999999999999999999999999999999999999999.

 авто | никогда | всегда | <абсолютный размер> | <длина> 
, где 
  <абсолютный размер> = xx-small | х-маленький | маленький | средний | большой | х-большой | х-большой | xxx-большой  
 

Примеры

Простой пример использования

В следующем примере показаны эквиваленты Safari/Chromium и Firefox, которые включают сглаживание шрифтов в macOS. В обоих случаях сглаженный шрифт должен выглядеть немного легче.

Для тех из вас, кто не работает в системе macOS, вот скриншот (живая версия появится позже):

HTML

 
Без сглаживания шрифта
Со сглаживанием шрифта
 

УСБ

 HTML {
  цвет фона: черный;
  цвет белый;
  размер шрифта: 3rem;
}
п {
  выравнивание текста: по центру;
}
.сглажен {
  -webkit-font-smoothing: сглаживание;
  -moz-osx-font-smoothing: оттенки серого;
} 

Результат

Технические характеристики

Не является частью какого-либо стандарта.

Совместимость с браузером

Таблица совместимости на этой странице создана из структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

Начальное значение	авто
Применяется к	Все элементы
Унаследован	Да
Вычисленные значения	Как указано
Тип

08 Firefox Android 1907108 Нет поддержки № 1 Safari iOS 08 Полная поддержка 3. 2

Альтернативное имя

Полная поддержка 3.2

Альтернативное имя

Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing

Android 9073 Полная поддержка 1.0

Альтернативное имя

Полная поддержка 1,0

Alternate Name

Alternate Name Uses the non-standard name: -webkit-font-smoothing

	Настольный компьютер						Мобильный телефон
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-smooth Non -стандартный	Хром Полная поддержка 5 Альтернативное имя Полная поддержка 5 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing	Edge Полная поддержка 79 Альтернативное имя Полная поддержка 79 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing	Firefox Полная поддержка 25 Примечания Альтернативное наименование Полная поддержка 25 Примечания Альтернативное название Примечания Работает только на macOS. Альтернативное имя Использует нестандартное имя: -moz-osx-font-smoothing	IE Нет поддержки №	Опера Полная поддержка 15 Альтернативное наименование Полная поддержка 15 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing	Safari Полная поддержка 4 Альтернативное название Полная поддержка 4 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing	WebView Android Полная поддержка ≤37 Альтернативное наименование Полная поддержка ≤37 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing 1 Chrome Android 03 03 Полная поддержка 18 Альтернативное название Полная поддержка 18 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing	Opera Android Полная поддержка 14 Альтернативное название Полная поддержка 14 Альтернативное имя Альтернативное имя Использует нестандартное имя: -webkit-font-smoothing

Legend

Полная поддержка

Полная опора

Нет поддержки

Без опоры

Нестандарт. Ожидайте плохой кросс-браузерной поддержки.

Нестандарт. Ожидайте плохой кросс-браузерной поддержки.

См. примечания по реализации.

См. примечания по реализации.

Использует нестандартное имя.

Использует нестандартное имя.

См. также

• Пожалуйста, прекратите «исправление» сглаживания шрифтов – UsabilityPost
• Сглаживание и сглаживание шрифтов Laissez-faire

css — сглаживание и сглаживание веб-шрифтов в Firefox и Opera

спросил 10 лет, 5 месяцев назад

Изменено 2 года, 3 месяца назад

Просмотрено 332 тысячи раз

На моем сайте используются пользовательские веб-шрифты. Для оформления вывода рендеринга я использовал следующий код:

 //-webkit-text-stroke-width: . 05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: сглаживание;
 

Это прекрасно работает в Safari и Chrome (края четче, а линии тоньше). Есть ли способ реализовать один и тот же стиль в Firefox и Opera?

• css
• шрифты
• веб-шрифты
• сглаживание

9

Поскольку Opera работает на базе Blink, начиная с версии 15.0 -webkit-font-smoothing: сглаживание также работает в Opera.

Firefox наконец-то добавил свойство для включения сглаживания в градациях серого. После долгого обсуждения оно будет доступно в версии 25 с другим синтаксисом, который указывает на то, что это свойство работает только в OS X.

 -moz-osx-сглаживание шрифта: оттенки серого;
 

Это должно исправить размытые шрифты значков или светлый текст на темном фоне.

 .шрифт-сглаживание {
    -webkit-font-smoothing: сглаживание;
    -moz-osx-font-smoothing: оттенки серого;
}
 

Вы можете прочитать мой пост о рендеринге шрифтов в OSX , который включает миксин Sass для обработки обоих свойств.

1

Что-то подобное Firefox не поддерживает.

На справочной странице от Mozilla указано font-smooth как свойство CSS, управляющее применением сглаживания при рендеринге шрифтов, но это свойство было удалено из этой спецификации и в настоящее время не находится на стандартной дорожке.

Это свойство поддерживается только в браузерах Webkit.

Если вам нужна альтернатива, вы можете проверить это:

• Text-Shadow Anti-Aliasing | Филип Ренич, Веб-сайты - блог
• cufón - шрифты для людей

2

Случай: Светлый текст с зубчатым веб-шрифтом на темном фоне Firefox (v35)/Windows
Пример: Google Web Font Ruda

Удивительное решение -
добавление следующего свойства к применяемым селекторам:

 selector {
    тень текста: 0 0 0;
}
 

На самом деле результат тот же, только с text-shadow: 0 0; , но мне нравится явно устанавливать радиус размытия.

Это не универсальное решение, но в некоторых случаях может помочь. Более того, я до сих пор не сталкивался (и не проверял тщательно) с негативным влиянием этого решения на производительность.

5

Столкнувшись с проблемой, я обнаружил, что мой файл WOFF не был сделан должным образом, я отправил новый TTF в FontSquirrel, который дал мне правильный WOFF, который был гладким в Firefox без добавления к нему дополнительного CSS.

1

Я нашел решение по этой ссылке: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Пошаговый метод:

• отправьте свой шрифт в WebFontGenerator и получите почтовый индекс
• найти шрифт TTF в Zip-файле
• , затем в Linux выполните эту команду (или установите с помощью apt-get install ttfautohint ):
ttfautohint --strong-stem-width=g neosansstd-black. ttf neosansstd-black.changed.ttf
• затем еще один, отправьте новый файл TTF (neosansstd-black.changed.ttf) на WebFontGenerator
• вы получите идеальный Zip со всеми вашими веб-шрифтами!

Надеюсь, это поможет.

2

... в теге body и эти из содержания и шрифт в целом выглядят лучше...

 body, html {
ширина: 100%;
высота: 100%;
маржа: 0;
заполнение: 0;
рендеринг текста: оптимизация разборчивости;
рендеринг текста: геометрическая точность;
шрифт-гладкий: всегда;
сглаживание шрифта: сглаживание;
-moz-font-smoothing: сглаживание;
-webkit-font-smoothing: сглаживание;
-webkit-font-smoothing: субпиксельное сглаживание;
}
#содержание {
-webkit-font-smoothing: сглаживание;
-moz-osx-font-smoothing: оттенки серого;
}
 

2

Когда цвет текста темный, в Safari и Chrome у меня лучший результат со свойством text-stroke css.