Редактирует статью про font-synthesis

css/font-synthesis/index.md

@@ -1,24 +1,222 @@
 ---
 title: "`font-synthesis`"
-description: "Позволяем браузеру создать недостающие начертания шрифта."
+description: "Контролируем синтез недостающих начертаний шрифта браузером."
+baseline:
+  - group: font-synthesis
+    features:
+      - css.properties.font-synthesis
 authors:
-  - doka-dog
+  - gazievri
+keywords:
+  - синтез шрифтов
+  - искусственный bold
+  - искусственный italic
+  - faux bold
+  - faux italic
+  - variable fonts
 related:
-  - css/font-variant
-  - css/font-variant-alternates
-  - css/font-variant-caps
+  - css/font-face
+  - css/font-weight
+  - css/font-style
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-Свойство `font-synthesis` контролирует, какие недостающие начертания (жирный, курсив или капитель) могут быть синтезированы браузером.
+Когда браузеру нужно отобразить текст с определённым начертанием, но соответствующего файла шрифта нет, он может попытаться сымитировать его самостоятельно. Такие синтетические имитации начертаний называют faux (от французского «faux» — ложный): faux-bold, faux-italic, faux-small-caps, faux-superscript/subscript.
+
+Свойство `font-synthesis` позволяет управлять этим поведением — разрешать или запрещать синтез недостающих начертаний (жирное, курсив, капитель, позицию подстрочных и надстрочных символов).
+
+## Пример
+
+Запретим браузеру синтезировать недостающие начертания:
+
+```css
+@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 {
+  /* Текст останется обычным - синтеза не будет */
+  /* Это ожидаемое поведение при font-synthesis: none */
+  font-weight: 700;
+}
+```
+
+⚠️ **Важно:** При `font-synthesis: none` семантические теги `<strong>` и `<em>` сохранят своё значение для скринридеров и поисковых систем, но визуально текст не будет выделен, если нет соответствующего файла шрифта.
+
+## Как понять
+
+Когда браузер должен отобразить текст жирным или курсивом (через CSS-свойства `font-weight`, `font-style` или HTML-теги `<b>`, `<strong>`, `<i>`, `<em>`), он ищет соответствующий файл шрифта. Если нужного файла нет, браузер по умолчанию пытается помочь и создаёт начертание сам — синтезирует.
+
+### Как работает синтез
+
+**Для bold** браузер имитирует жирность путём утолщения контура глифов. Конкретная реализация зависит от движка браузера (Blink, Gecko, WebKit) и не стандартизирована.
+
+**Для italic** браузер применяет геометрический наклон к глифам. Но настоящий курсив — это не просто наклонённые буквы, это отдельно нарисованное начертание с другой формой символов (например, буква *a* в курсиве часто имеет совершенно другую форму).
+
+**Для small-caps (капитель)** браузер заменяет строчные буквы на уменьшенные заглавные. Настоящая капитель — это отдельно нарисованные символы с правильными пропорциями и визуальным весом, которые гармонично выглядят в тексте.
+
+**Для position (позиция)** браузер искусственно сдвигает и уменьшает символы при использовании подстрочных и надстрочных элементов (`<sub>`, `<sup>`). Настоящие начертания имеют специально разработанные символы для этих позиций с правильным выравниванием и пропорциями.
+
+### Когда синтез особенно заметен
+
+Синтетические начертания особенно плохо смотрятся:
+
+- в дизайнерских и декоративных шрифтах;
+- на больших размерах текста (заголовки);
+- при печати страницы;
+- в логотипах и акцентных элементах.
+
+В системных шрифтах синтез менее критичен для `weight` и `style`, но `small-caps` и `position` почти всегда остаются синтетическими даже в системных шрифтах.
 
 ## Как пишется
 
-- `none` — любое из недостающих начертаний будет синтезировано браузером.
-- `weight` — жирное начертание будет синтезировано браузером.
-- `style` — курсивное начертание будет синтезировано браузером.
-- `small-caps` — капитель будет синтезирована браузером.
+Для `font-synthesis` можно выбрать одно значение или несколько через пробел:
+
+- `none` — запрещает любой синтез начертаний.
+- `weight` — разрешает синтез жирного начертания.
+- `style` — разрешает синтез курсива.
+- `small-caps` — разрешает синтез капители.
+- `position` — разрешает синтез позиции подстрочных и надстрочных символов.
+- `weight style small-caps position` — значение по умолчанию, разрешает синтез всех начертаний.
+
+```css
+.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` разрешит синтез жирного и курсива, но запретит капитель и позицию.
+
+### Variable fonts и font-synthesis
+
+С вариативными шрифтами ситуация отличается от обычных статических шрифтов. Вариативный шрифт содержит в одном файле диапазон значений веса и наклона, поэтому браузеру реже приходится прибегать к синтезу faux-bold и faux-italic.
+
+Если используется вариативный шрифт с поддержкой осей `wght` (weight) и `slnt` или `ital` (наклон), браузер использует реальные значения этих осей вместо синтеза. В таком случае `font-synthesis` влияет только на те начертания, которые не покрыты осями шрифта.
+
+```css
+@font-face {
+  font-family: 'Inter';
+  src: url('Inter.var.woff2');
+  font-weight: 100 900; /* Поддержка диапазона весов */
+  font-style: oblique 0deg 10deg; /* Поддержка наклона */
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  /* font-synthesis здесь менее критичен */
+  /* weight и style уже покрыты осями шрифта */
+}
+
+h1 {
+  font-weight: 700; /* Реальный глиф из оси wght, не синтез */
+}
+```
+
+💡 **Обрати внимание:** Даже при использовании variable font браузер может прибегнуть к синтезу, если нужная ось или диапазон значений отсутствуют. Например, если вариативный шрифт поддерживает только ось `slnt` (наклон), но не полноценную ось `ital` (курсив), поведение `font-style: italic` будет зависеть от реализации шрифта.
+
+Вариативные шрифты — современный стандарт, и при их использовании браузеру почти не приходится прибегать к синтезу для `weight` и `style`, если соответствующие оси покрыты диапазоном значений.
+
+### Когда использовать font-synthesis: none
+
+Используй `font-synthesis: none`, если:
+
+- работаешь с дизайнерским шрифтом, где качество типографики критично;
+- хочешь явно контролировать все начертания;
+- создаёшь брендовый UI-кит или дизайн-систему;
+- нужно заставить команду подключить все необходимые файлы шрифтов.
+
+**Не используй** `font-synthesis: none` в контентных проектах без строгого контроля разметки — визуальное выделение может пропасть, что ухудшит читаемость.
+
+### При использовании Google Fonts
+
+При подключении шрифтов через сервисы вроде Google Fonts указывай все нужные начертания в URL. Например, параметр `wght@400;700` подключает и regular (400), и bold (700):
+
+```
+https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
+```
+
+Без явного указания `700` браузер может использовать синтез для жирного текста, если нужный вес отсутствует.
+
+Для вариативных шрифтов можно указать диапазон:
+
+```
+https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap
+```
+
+Это подключит вариативный шрифт с поддержкой всех весов от 100 до 900, что избавит от необходимости синтеза.
+
+### Правильная загрузка статических шрифтов
+
+Для статических шрифтов лучшая стратегия — подключать все используемые начертания через отдельные `@font-face` блоки:
+
+```css
+/* 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. При кросс-браузерной разработке всегда проверяй результат визуально.

people/gazievri/index.md

@@ -0,0 +1,6 @@
+---
+name: 'Руслан Газиев'
+url: https://github.com/gazievri
+badges:
+  - first-contribution-small
+---