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 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *