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 {  /* Браузер не сможет отобразить weight 700 */  /* и использует ближайшее доступное начертание (обычно 400) */  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 {
  /* Браузер не сможет отобразить weight 700 */
  /* и использует ближайшее доступное начертание (обычно 400) */
  font-weight: 700;
}

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

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

Для 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 разрешит синтез жирного и курсива, но запретит капитель и позицию.

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

Под «начертанием» далее понимаются вес (weight), наклон (style) и специальные формы символов (small-caps, position).

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

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

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

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

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

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

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

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

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

В примерах ниже показан один из возможных вариантов описания наклона; фактическая поддержка диапазона oblique зависит от браузера и реализации шрифта.

        
          
          @font-face {  font-family: 'Inter';  src: url('Inter.var.woff2');  font-weight: 100 900; /* Поддержка диапазона весов */  font-style: oblique 0deg 10deg; /* Если шрифт и браузер поддерживают маппинг 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');
  font-weight: 100 900; /* Поддержка диапазона весов */
  font-style: oblique 0deg 10deg; /* Если шрифт и браузер поддерживают маппинг 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-таблицах.

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

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

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

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

Поведение зависит от того, разрешён ли синтез начертаний.

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

Обязательно указывай все используемые начертания в URL. Параметр wght@400;700 подключает regular (400) и bold (700):

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

При font-synthesis: none текст в <strong> не получит визуального выделения, если в URL не указан параметр с нужным весом. Например, для <strong> или font-weight: 700 необходимо явно подключить wght@...;700.

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

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

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

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

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

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

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

Это подключит вариативный шрифт с поддержкой всех весов от 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.

💡 Свойство font-synthesis-position появилось позже остальных значений, и его поддержка в браузерах может отличаться. Проверяй совместимость перед использованием в production.

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

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