Как запретить искусственный жирный шрифт с помощью font-synthesis

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

Материал актуален на 22 июля 2026 года. Ниже разобраны принцип работы font-synthesis, различия между настоящим и синтетическим начертанием, практические CSS-примеры, типичные ошибки и правила проверки результата в интерфейсе.

font-synthesis — CSS-свойство, которое определяет, может ли браузер самостоятельно имитировать отсутствующие варианты шрифта. Когда в стилях указано font-weight: 700, а подключённый файл содержит только обычное начертание, браузер иногда расширяет штрихи и получает условный жирный текст. Аналогично он может наклонять символы при запросе курсива или имитировать малые капители.

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

Браузер стремится выполнить CSS-инструкцию автора страницы. Если элементу задано жирное начертание, но подходящего варианта нет среди доступных файлов, движок выбирает ближайшее решение. В зависимости от семейства, формата шрифта и настроек загрузки он может использовать имеющийся файл с другим весом или синтезировать требуемую толщину.

Для пользователя искусственный жирный часто выглядит почти незаметно отличающимся от настоящего, но на крупных заголовках и коротких интерфейсных подписях разница становится очевидной. Контуры букв могут выглядеть чрезмерно плотными, внутренние просветы — сужаться, а ритм строки — нарушаться. Особенно чувствительны к этому гротески с тонкими деталями и контрастные антиквы.

Проблема появляется не только из-за отсутствия файла weight 700. Причиной может быть неверно указанное имя font-family, ошибка в font-weight внутри правила @font-face, блокировка загрузки веб-шрифта или использование локальной версии гарнитуры, в которой набор начертаний отличается от ожидаемого.

Свойство позволяет отключить синтез полностью или перечислить разрешённые виды. На практике чаще всего используются три компонента: weight для жирного начертания, style для курсива и small-caps для малых капителей. Такой подход удобнее, чем безусловно полагаться на поведение браузера во всех комбинациях шрифта и CSS.

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

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

Практическая запись выглядит так: .text { font-family: "Название гарнитуры", sans-serif; font-weight: 700; font-synthesis: none; }. Если файл с весом 700 не загружен, браузер не должен дорисовывать жирность из обычного файла. Итогом может стать менее жирный текст, переход на запасную гарнитуру или визуально обычное начертание — это ожидаемое поведение, а не ошибка свойства.

В интерфейсе с жёсткими требованиями к брендингу правило можно задать на корневом контейнере: .app { font-synthesis: none; }. Такой вариант отключает не только искусственный жирный, но и синтез курсива и малых капителей внутри контейнера. Перед внедрением проверьте все компоненты: некоторые подписи могут специально рассчитывать на наклон или выделение средствами браузера.

Иногда полный запрет не нужен. Например, проекту важно сохранить курсив в цитатах, но нельзя допускать искусственное утолщение логотипа, заголовков или кнопок. Тогда применяйте font-synthesis: style; к конкретной группе элементов. Это разрешает синтез стиля, но не разрешает синтез веса.

Для более явной политики можно записать font-synthesis: style small-caps; или font-synthesis: weight style;. В первом случае жирный синтез отключён, а во втором разрешены только жирность и курсив. Значение выбирают не по названию класса, а по реальному набору начертаний и требованиям макета.

Качественная типографика начинается с корректной пары font-family и font-weight. Для каждого доступного веса создайте отдельное правило @font-face или используйте переменный шрифт с поддерживаемым диапазоном осей. Важно, чтобы значение font-weight в описании файла соответствовало тому весу, который запрашивает CSS.

Например, если файл содержит Bold, но в @font-face ему ошибочно назначен font-weight: 400, браузер может считать его обычным начертанием. При запросе 700 движок не найдёт ожидаемый вариант и начнёт подбирать замену. Проверяйте не только наличие файла на сервере, но и его связь с конкретным семейством, весом и стилем.

Заголовки, кнопки и элементы навигации обычно имеют короткий текст, поэтому даже небольшое изменение толщины заметно влияет на композицию. Если макет построен на конкретном жирном начертании, задайте для этих компонентов font-synthesis: none и подключите нужный файл. Так границы кнопок, ширина заголовка и переносы будут ближе к макету.

Для длинного текста иногда допустимо разрешить искусственный курсив, если настоящая версия не предусмотрена, но запретить искусственный вес. В этом случае применяйте font-synthesis: style; к текстовому контейнеру. Однако для брендовых материалов, сложной антиквы и интерфейсов с несколькими языками безопаснее отключить синтез полностью и подключить все необходимые стили.

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

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

font-weight сообщает, какую толщину текста нужно выбрать, а font-synthesis определяет, разрешено ли создавать отсутствующую толщину искусственно. Эти свойства не конкурируют и не заменяют друг друга. Запись font-weight: 700 без font-synthesis может привести к синтезу, если вес 700 недоступен; запись font-synthesis: none запрещает компенсацию, но сама по себе не делает текст жирным.

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

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

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

Да. Используйте значение font-synthesis: style;, если хотите запретить синтез веса, но сохранить возможность искусственного курсива. Такой выбор оправдан только при осознанной типографической политике. Если синтетика не нужна ни для одного начертания, используйте font-synthesis: none.

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

Нет. Свойство можно задать на общем контейнере и переопределить локально там, где требуется другое поведение. Для небольшого проекта удобно начать с отдельных компонентов, а после аудита вынести правило на корневой контейнер. При глобальном запрете заранее проверьте сторонние виджеты и формы.

Да, свойство может использоваться вместе с переменными шрифтами. Оно запрещает синтез отсутствующих стилей, но не отменяет доступный диапазон оси веса. Проверьте документацию конкретной гарнитуры и визуальный результат на нужных значениях, потому что variable font может поддерживать не все стили и параметры одинаково.

Причина может быть в другом файле, ошибке @font-face, запасной гарнитуре или неверном значении font-weight. Проверьте вычисленные стили, фактически используемый шрифт в инструментах разработчика, сетевые запросы и порядок правил CSS. Также убедитесь, что жирность не создаётся другим свойством или компонентной библиотекой.

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

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