Свойство CSS `font-smooth`

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

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

Синтаксис

/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> value */
font-smooth: 2em;

/* Global values */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;

Примечание: WebKit реализует похожее свойство, но с другими значениями: -webkit-font-smoothing. Оно работает только в macOS.

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

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

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

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

Исходное значение	auto
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	как задано
Тип анимации	дискретный

Формальный синтаксис

font-smooth = auto | never | always | <absolute-size> | <length>

Примеры

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

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

Если вы работаете не в macOS, вот снимок экрана (версия для просмотра появится ниже):

Two texts examples one with the font-smooth property and another one without

HTML

<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>

CSS

html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Результат

Спецификации

Не входит ни в один стандарт.

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`font-smooth`	5	79	25 Работает только в macOS.	15	4	18	Нет	14	3.2	1.0	4.4	3.2

См. также

Пожалуйста, перестаньте «исправлять» сглаживание шрифтов — Дмитрий Фадеев (2012)
Непринуждённое сглаживание шрифтов и сглаживание краёв — Зак Литерман (2017)
Улучшение отображения текста (современный сброс CSS) — Джош У. Комо (2021)
В чём дело со сглаживанием шрифтов в WebKit? — Дэвид Бушелл (2024)

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-smooth