синтез шрифтов

Это свойство является сокращенным записью для следующих свойств CSS:

• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-synthesis-position

none

Указывает, что браузер не должен синтезировать полужирный, курсивный или полужирный курсивный шрифты.

weight

Указывает, что браузер может синтезировать полужирный шрифт, если он отсутствует.

style

Указывает, что браузер может синтезировать курсивный шрифт, если он отсутствует.

small-caps

Указывает, что браузер может синтезировать полужирный курсивный шрифт, если он отсутствует.

position

Указывает, что браузер может синтезировать подстрочные и надстрочные шрифты, если они нужны при использовании font-variant-position.

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

Например, с помощью псевдокласса :lang() можно отключить синтез полужирных и наклонных символов для определённого языка, в данном случае для арабского языка:

*:lang(ar) {
  font-synthesis: none;
}

В таблице ниже показано, как значение свойства сокращённой записи font-synthesis сопоставляется со значениями составных свойств.

font-synthesis = 
  none                                           |
  [ weight || style || small-caps || position ]  

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

HTML

<pre> DEFAULT </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS DISABLED </pre>
<p class="english no-syn">
  This font supports <strong>bold</strong> and <em>italic.</em>
</p>
<p class="chinese no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS ENABLED </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.chinese {
  font-family: "Ma Shan Zheng";
}
.no-syn {
  font-synthesis: none;
}
.syn {
  font-synthesis: style weight;
}

Результат

• font-style
• font-weight
• font-variant-caps
• font-variant-position