font-synthesis

Когда браузеру нужно отобразить текст с определённым начертанием, но соответствующего файла шрифта нет, он может попытаться сымитировать его самостоятельно. Такие синтетические имитации начертаний называют faux (от французского «faux» — ложный): faux-bold, faux-italic, faux-small-caps, а также faux-superscript и faux-subscript (через синтез параметра position — позиционных глифов).

Свойство font-synthesis позволяет управлять этим поведением — разрешать или запрещать синтез недостающих вариантов шрифта (жирное, курсив, капитель, подстрочные и надстрочные символы).

Запретим браузеру синтезировать недостающие варианты шрифта:

        
          
          @font-face {  font-family: 'CustomFont';  src: url('custom-regular.woff2');  font-weight: 400;  font-style: normal;}body {  font-family: 'CustomFont', sans-serif;  font-synthesis: none;}strong {  /*    <strong> и так запрашивает более жирный вес (font-weight: bolder),    здесь задаём его явно для демонстрации  */  font-weight: 700;}
          @font-face {
  font-family: 'CustomFont';
  src: url('custom-regular.woff2');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'CustomFont', sans-serif;
  font-synthesis: none;
}

strong {
  /*
    <strong> и так запрашивает более жирный вес (font-weight: bolder),
    здесь задаём его явно для демонстрации
  */
  font-weight: 700;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

⚠️ Важно: При font-synthesis: none семантические теги <strong> и <em> сохранят своё значение для скринридеров и поисковых систем. Визуальное выделение будет только если среди подключённых файлов шрифта есть более жирное или курсивное начертание — браузер использует его через алгоритм font matching. В примере выше, где подключён только один вес 400, визуального выделения не будет.

Для font-synthesis можно выбрать одно значение или несколько через пробел:

• none — запрещает любой синтез параметров шрифта.
• weight — разрешает синтез жирного начертания.
• style — разрешает синтез курсива.
• small-caps — разрешает синтез капители.
• position — разрешает синтез позиции подстрочных и надстрочных символов.
• weight style small-caps position — значение по умолчанию, разрешает синтез всех параметров шрифта.

        
          
          .no-synthesis {  font-synthesis: none;}.allow-bold {  font-synthesis: weight;}.allow-italic {  font-synthesis: style;}.allow-bold-italic {  font-synthesis: weight style;}
          .no-synthesis {
  font-synthesis: none;
}

.allow-bold {
  font-synthesis: weight;
}

.allow-italic {
  font-synthesis: style;
}

.allow-bold-italic {
  font-synthesis: weight style;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значения можно комбинировать. Например, font-synthesis: weight style разрешит синтез жирного и курсива, но запретит капитель и позицию.

font-synthesis — это шорткат для индивидуальных свойств:

        
          
          .element {  /* Вместо font-synthesis: none можно записать: */  font-synthesis-weight: none;  font-synthesis-style: none;  font-synthesis-small-caps: none;  font-synthesis-position: none;}.flexible {  /* Запретить только синтез жирности, остальное разрешить */  font-synthesis-weight: none;  font-synthesis-style: auto;  font-synthesis-small-caps: auto;  font-synthesis-position: auto;}
          .element {
  /* Вместо font-synthesis: none можно записать: */
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-synthesis-small-caps: none;
  font-synthesis-position: none;
}

.flexible {
  /* Запретить только синтез жирности, остальное разрешить */
  font-synthesis-weight: none;
  font-synthesis-style: auto;
  font-synthesis-small-caps: auto;
  font-synthesis-position: auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Каждое свойство принимает значения:

• auto — разрешает синтез (по умолчанию)
• none — запрещает синтез

Использование индивидуальных свойств даёт более гибкий контроль над синтезом отдельных параметров шрифта.

Свойство font-synthesis и его индивидуальные варианты наследуются от родительских элементов. Это означает, что если вы установите font-synthesis: none на контейнере, все дочерние элементы также будут иметь запрет синтеза, если явно не переопределить это свойство.

        
          
          .container {  font-synthesis: none;}.container p {  /* Наследует font-synthesis: none от .container */  /* Синтез запрещён */}.container .special {  /* Явное переопределение наследования */  font-synthesis: weight style;  /* Теперь синтез разрешён только для weight и style */}
          .container {
  font-synthesis: none;
}

.container p {
  /* Наследует font-synthesis: none от .container */
  /* Синтез запрещён */
}

.container .special {
  /* Явное переопределение наследования */
  font-synthesis: weight style;
  /* Теперь синтез разрешён только для weight и style */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Это может приводить к неожиданному поведению в сложных layouts, поэтому важно учитывать наследование при использовании font-synthesis на верхних уровнях DOM-дерева.

Когда браузер должен отобразить текст жирным или курсивом (через CSS-свойства font-weight, font-style или HTML-теги <b>, <strong>, <i>, <em>), он ищет соответствующий файл шрифта. Если нужного файла нет, браузер по умолчанию пытается помочь и создаёт недостающее начертание сам.

Теги <b> и <i> влияют только на визуальное оформление, а <strong> и <em> добавляют семантический акцент (важность и выделение), который сохраняется для скринридеров и поисковых систем даже при font-synthesis: none.

Далее под синтезируемыми параметрами понимаются вес (weight), наклон (style) и типографические формы символов: капитель (small-caps) и позиционные глифы (position для надстрочных и подстрочных символов).

Для bold браузер имитирует жирность путём утолщения контура глифов. Конкретная реализация зависит от движка браузера (Blink, Gecko, WebKit) и не стандартизирована.

Для italic браузер применяет геометрический наклон к глифам. Но настоящий курсив — это не просто наклонённые буквы, это отдельно нарисованное начертание с другой формой символов (например, буква a в курсиве часто имеет совершенно другую форму).

Для small-caps (капитель) браузер заменяет строчные буквы на уменьшенные заглавные. Настоящая капитель — это отдельно нарисованные символы с правильными пропорциями и визуальным весом, которые гармонично выглядят в тексте.

Пример работы с капителью:

        
          
          .title {  font-variant: small-caps;  font-synthesis: none;}
          .title {
  font-variant: small-caps;
  font-synthesis: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При отсутствии капительных глифов и запрете синтеза текст отобразится обычными строчными буквами. Если синтез разрешён (по умолчанию), браузер создаст faux-small-caps из уменьшенных заглавных букв.

Для position (позиция символов) при использовании подстрочных и надстрочных элементов (<sub>, <sup>) браузер сначала пытается использовать OpenType-глифы (subs и sups). Если в шрифте их нет, браузер искусственно уменьшает и сдвигает обычные символы. Именно это синтетическое поведение и контролируется через font-synthesis-position. Настоящие позиционные глифы имеют специально разработанные пропорции и правильное выравнивание базовой линии.

Синтетические варианты шрифта особенно плохо смотрятся:

• в дизайнерских и декоративных шрифтах;
• на больших размерах текста (заголовки);
• при печати страницы;
• в логотипах и акцентных элементах.

В системных шрифтах проблема синтеза weight и style обычно менее заметна из-за большого количества реальных начертаний, но она всё равно возможна при использовании нестандартных значений (например, 500 или 600). Синтез small-caps и position почти всегда остаётся заметным даже в системных шрифтах.

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

Если используется вариативный шрифт с поддержкой оси wght (вес) и оси наклона (slnt для oblique или ital для курсива), браузер использует реальные значения из осей шрифта вместо синтеза.

Важное различие осей наклона:

• slnt — непрерывная ось (например, от 0 до -15 градусов), которая изменяет угол наклона существующих глифов. Это создаёт oblique (наклонное начертание).
• ital — бинарная ось (0 или 1), которая переключает между двумя разными наборами глифов: прямым и курсивным. Настоящий курсив имеет специально нарисованные символы с другой формой.

В таком случае font-synthesis влияет только на те параметры, которые не покрыты осями шрифта (чаще всего это small-caps и position), а также на случаи, когда запрошенное значение выходит за пределы диапазона оси.

        
          
          @font-face {  font-family: 'Inter';  src: url('Inter.var.woff2') format('woff2-variations');  font-weight: 100 900; /* Поддержка диапазона весов через ось wght */  font-style: normal;  /* Управление наклоном через ось slnt происходит автоматически */}body {  font-family: 'Inter', sans-serif;  /* font-synthesis здесь менее критичен */  /* weight и style уже покрыты осями шрифта */}h1 {  font-weight: 700; /* Реальный вариант из оси wght, не синтез */}
          @font-face {
  font-family: 'Inter';
  src: url('Inter.var.woff2') format('woff2-variations');
  font-weight: 100 900; /* Поддержка диапазона весов через ось wght */
  font-style: normal;
  /* Управление наклоном через ось slnt происходит автоматически */
}

body {
  font-family: 'Inter', sans-serif;
  /* font-synthesis здесь менее критичен */
  /* weight и style уже покрыты осями шрифта */
}

h1 {
  font-weight: 700; /* Реальный вариант из оси wght, не синтез */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Обрати внимание: Даже при использовании variable font браузер может прибегнуть к синтезу, если нужная ось или диапазон значений отсутствуют. Например, если вариативный шрифт поддерживает только ось slnt (наклон), но не полноценную ось ital (курсив), поведение font-style: italic будет зависеть от того, как дизайнер шрифта связал оси slnt и ital в OpenType-таблицах.

Простое правило: Если у variable-шрифта есть ось ital, браузер активирует ital=1 для font-style: italic. Если есть только slnt, то font-style: italic обычно автоматически мапится браузером на значение slnt=-14 (или другое значение, определённое в шрифте), что создаёт oblique (наклонное), а не настоящее italic (курсивное) начертание.

Вариативные шрифты — современный стандарт, и при их использовании браузеру почти не приходится прибегать к синтезу для weight и style, если соответствующие оси покрыты диапазоном значений.

💡 Дополнительно: При работе с variable fonts полезно использовать font-optical-sizing: auto, которое автоматически подстраивает оптические размеры глифов в зависимости от font-size. Это не влияет на синтез, но дополняет качественную типографику при работе с вариативными шрифтами, особенно на маленьких и больших размерах текста. Свойство применяется при наличии оси opsz в шрифте.

Используй font-synthesis: none, если:

• работаешь с дизайнерским шрифтом, где качество типографики критично;
• хочешь явно контролировать все варианты шрифта;
• создаёшь брендовый UI-кит или дизайн-систему;
• нужно заставить команду подключить все необходимые файлы шрифтов.

Не используй font-synthesis: none в контентных проектах без строгого контроля разметки — визуальное выделение может пропасть, что ухудшит читаемость.

Поведение зависит от того, разрешён ли синтез параметров шрифта, и сколько весов подключено.

Если синтез запрещён (font-synthesis: none):

Браузер не будет создавать синтетические варианты шрифта, но будет подбирать ближайший доступный вес из подключённых. Параметр wght@400;700 запрашивает веса 400 и 700 (Google Fonts может отдать либо статические файлы, либо variable-версию с ограниченным диапазоном, в зависимости от семейства):

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap

При таком подключении браузер использует алгоритм font matching:

• font-weight: 100–500 отобразятся как 400
• font-weight: 600–900 отобразятся как 700

Это происходит из-за специального правила спецификации: для font-weight: 500 браузер сначала проверяет наличие веса 400, и если он есть — использует его. Граница перехода от 400 к 700 находится между значениями 500 и 600.

Текст в <strong> получит визуальное выделение, потому что браузер использует вес 700 вместо 400. Выделение пропадёт только если подключить единственный вес:

https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap

В этом случае и обычный текст, и <strong> будут отображаться одинаково (вес 400).

Если синтез разрешён (по умолчанию или font-synthesis: weight style):

Можно загрузить только базовое начертание:

https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap

Браузер будет использовать синтез для жирного текста, если синтез разрешён и файл шрифта с нужным весом не был загружен. Качество faux-bold будет ниже, чем у оригинального начертания.

Для вариативных шрифтов:

Указывай диапазон весов:

https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap

Это подключит вариативный шрифт с поддержкой всех весов от 100 до 900, что избавит от необходимости синтеза.

Выводы для Google Fonts:

👉 При font-synthesis: none подключай все реально используемые веса
👉 Для статических шрифтов лучше подключить 400 и 700, чем полагаться на faux-bold
👉 Для вариативных шрифтов используй диапазоны весов (100..900)

Для статических шрифтов лучшая стратегия — подключать все используемые начертания через отдельные @font-face блоки:

        
          
          /* Regular */@font-face {  font-family: 'MyFont';  src: url('myfont-regular.woff2');  font-weight: 400;  font-style: normal;}/* Bold */@font-face {  font-family: 'MyFont';  src: url('myfont-bold.woff2');  font-weight: 700;  font-style: normal;}/* Italic */@font-face {  font-family: 'MyFont';  src: url('myfont-italic.woff2');  font-weight: 400;  font-style: italic;}/* Bold Italic */@font-face {  font-family: 'MyFont';  src: url('myfont-bold-italic.woff2');  font-weight: 700;  font-style: italic;}body {  font-family: 'MyFont', sans-serif;  font-synthesis: none; /* Безопасно - все варианты подключены */}
          /* Regular */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-regular.woff2');
  font-weight: 400;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff2');
  font-weight: 700;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-italic.woff2');
  font-weight: 400;
  font-style: italic;
}

/* Bold Italic */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold-italic.woff2');
  font-weight: 700;
  font-style: italic;
}

body {
  font-family: 'MyFont', sans-serif;
  font-synthesis: none; /* Безопасно - все варианты подключены */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если не подключить Bold Italic, то текст вроде <strong><em>важно</em></strong> будет отображаться некорректно при font-synthesis: none.

Выводы для статических шрифтов:

👉 Подключай все используемые комбинации weight + style через отдельные @font-face
👉 Минимум: Regular (400 normal) + Bold (700 normal) + Italic (400 italic) + Bold Italic (700 italic)
👉 Не забывай про комбинации — <strong><em> требует Bold Italic

💡 Браузеры используют специальный алгоритм font matching для подбора ближайшего доступного веса. Важная особенность: для font-weight: 500 браузер сначала проверяет наличие веса 400. Если доступны только 400 и 700, то веса 100–500 отобразятся как 400, а 600–900 как 700.

💡 Важно: Свойство font-synthesis работает только в CSS-селекторах (на элементах), но не в правилах @font-face. Оно управляет поведением браузера при отрисовке, а не при загрузке шрифта.

💡 Свойство font-synthesis-position появилось позже остальных значений (2022-2023), и его поддержка в браузерах может отличаться. Safari внедрял поддержку отдельных компонентов font-synthesis постепенно. Старые версии Chromium (до 97) могли игнорировать значение small-caps. Всегда проверяй совместимость на Can I Use перед использованием в production.

💡 При запрете синтеза важно убедиться, что все семантические акценты (<strong>, <em>, <b>, <i>) имеют реальные файлы шрифтов с соответствующими весами и стилями, иначе визуальное выделение пропадёт. Семантика сохранится для скринридеров, но пользователи со стандартным зрением не увидят акцент.

💡 В некоторых старых версиях Safari поведение faux-italic и критерии его применения отличались от Chromium и Firefox. При кросс-браузерной разработке всегда проверяй результат визуально.

💡 Проверка в DevTools: В Chrome/Edge DevTools можно проверить, используется ли синтез шрифта. В панели "Fonts" (экспериментальная функция, включается в Settings → Experiments) отображается информация о загруженных шрифтах и доступных осях для variable fonts. Синтез может быть помечен как "Synthesized" или проявляться отсутствием реального файла для запрошенного веса/стиля.

💡 Производительность: Синтез шрифтов создаёт дополнительную вычислительную нагрузку для браузера, особенно заметную при большом объёме текста или сложных шрифтах. При использовании font-synthesis: none браузер не тратит ресурсы на синтез, что может улучшить производительность рендеринга. Однако на современных устройствах эта разница обычно незаметна для пользователя.

---

В большинстве проектов лучше подключать реальные варианты шрифта и использовать font-synthesis как защитный механизм, а не как основной способ получения bold и italic.