Smoothing font css: font-smooth — CSS — Дока

CSS-шрифт-гладкий | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS-шрифт-гладкий

— ВЫКЛ

• Глобальное использование

  0% + 38,22% знак равно 38,22%

Управляет применением сглаживания при рендеринге шрифтов.

Хром

1. 4: не поддерживается
2. 5 — 106: Частичная поддержка
3. 107: Частичная поддержка
4. 108 — 110: Частичная поддержка

Edge

1. 12 — 18: Не поддерживается
2. 107: Partial support

Safari

1. 3.1 — 3.2: Not supported
2. 4 — 16.0: Partial support
3. 16.1: Partial support
4. 16.2 — TP: Partial support

Firefox

1. 2 — 24: не поддерживается
2. 25 — 106: частичная поддержка
3. 107: Частичная поддержка
4. Opera
   1. 9 -12.1: Не поддерживает
   2. 707070707014 —
      1. Поддержка
      2. 92: Частичная поддержка

      IE

      1. 5,5 — 10: не поддерживается
      2. 11: Не поддерживается

      Chrome для Android

      1. 107: не поддерживается
      1. 107: не поддерживается
      1. 107: не поддерживается
      1. 107: не поддерживается
      1. 107: не поддерживается0021
      2. 3.2 — 16.0: Not supported
      3. 16.1: Not supported

      Samsung Internet

      1. 4 — 18.0: Not supported
      2. 19.0: Not supported

      Opera Mini

      1. all: Not supported

      Opera Mobile

      1. 10 — 12.1: Not supported
      2. 72: Not supported

      UC Browser for Android

      1. 13. 4: Not supported

      Android Browser

      1. 2.1 — 4.4.4: Not supported
      2. 107: не поддерживается

      Firefox для Android

      1. 106: не поддерживается

      QQ Browser

      1. 13.1: не поддержал

      Baidu Brobes

      14.1: не поддержал

   Baidu Brovash

   111111111111111111111111111111111111111111111111111111111111111111.100
   111111111111111111111111111111111111111111111111111.
   • 2.5: Частичная поддержка

Хотя шрифт font-smooth присутствовал в ранних (2002 г.) проектах шрифтов CSS3, он был удален из этой спецификации и в настоящее время не включен в стандартную версию.

Ресурсы:

Веб-документы MDN — font-smooth

Старая версия рекомендации W3C, содержащая font-smooth

Сглаживание шрифтов в Chrome и Firefox Firefox может разочаровать.

В зависимости от контекста некоторые шрифты могут отображаться странно: слишком тяжелые, слишком толстые, слишком толстые и т. д. Настолько, что текст может выглядеть искаженным и трудным для чтения. К счастью, мы можем применить CSS font-smoothing , чтобы сделать текст более четким, тонким и удобным для чтения.

Сглаживание шрифтов CSS

Очистка субпиксельного рендеринга и улучшение отображения текста в Webkit (Chrome) и Mozilla (Firefox) с помощью следующих правил CSS:

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

Здесь мы «сглаживаем» шрифты с помощью свойства font-smoothing (и его эквивалентов, зависящих от производителя). Объявление значения со сглаживанием для этих свойств обычно работает, но есть несколько альтернативных значений, которые могут работать лучше, в зависимости от того, какие шрифты вы используете, цвет фона и текста и другие переменные.

Вот возможные значения (насколько я знаю, могут быть и другие):

• сглаживание — очищает текст, делает его тоньше, улучшает отображение
• субпиксельное сглаживание — очищает светлый текст на темном фоне
• авто – Значение по умолчанию, браузер определяет, как отображаются шрифты
• нет — отключает свойство
• наследовать — наследует это свойство от родительского элемента
.
• оттенки серого — очищает светлый текст на темном фоне (только -moz- )

Из этих значений свойства сглаживание используется чаще всего . Кроме того, оттенки серого

часто используются вместо со сглаженным .для Mozilla, потому что он имеет тенденцию давать лучшие результаты в Firefox. Поэтому вместо предыдущего фрагмента CSS большинство дизайнеров предпочитают следующий:

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

Просто хочу подчеркнуть, что единственная разница между этим кодом и предыдущим заключается в том, что здесь мы используем оттенки серого вместо сглаженного для -moz-osx-font-smoothing . FWIW, это код, который я использую на многих своих сайтах просто потому, что он работает. Конечно, вместо применения свойств сглаживания шрифта к все с помощью селектора body , вы можете применить стили к определенному элементу, например h2 , p

или тому, что требуется.

Рендеринг текста CSS

Другим часто встречающимся свойством для улучшения отображения текста является text-rendering со значением optimLegibility . Насколько мне известно, это более старая техника, которая использовалась до полной реализации свойства font-smoothing .