CSS-свойство `font-synthesis`

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

Попробуйте

font-synthesis: weight style small-caps;

font-synthesis: none;

font-synthesis: weight;

font-synthesis: style;

font-synthesis: small-caps;

font-synthesis: position;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p class="english">
      This font does not include <span class="bold">bold</span>,
      <span class="italic">italic</span>,
      <span class="small-caps">small-caps</span>, and
      <span class="sub">subscript</span> or
      <span class="sup">superscript</span> variants.
    </p>
    <p class="chinese">
      中文排版通常不用<span class="bold">粗体</span>或<span class="italic"
        >斜体</span
      >，也不会使用<span class="small-caps">小型大写字母</span>和<span
        class="sub"
        >下标</span
      ><span class="sup">上标</span>变体。
    </p>
  </div>
</section>

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

.english {
  font-size: 1.2em;
  font-family: "Oxygen", sans-serif;
}

.chinese {
  font-size: 1.2em;
  font-family: "Ma Shan Zheng", cursive;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.small-caps {
  font-variant: small-caps;
}

.sub {
  font-variant: sub;
}

.sup {
  font-variant: super;
}

Составные свойства

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

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

Синтаксис

/* none or one or more of the other keyword values */
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: position;
font-synthesis: small-caps style; /* property values can be in any order */
font-synthesis: style small-caps weight position; /* property values can be in any order */

/* Global values */
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: revert-layer;
font-synthesis: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

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 "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";
@import "https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap";

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

Результат

Спецификации

Совместимость с браузерами

См. также

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