font-synthesis-small-caps

Baseline 2023

Новое

С марта 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможны проблемы с работой на более старых устройствах и браузерах.

Свойство CSS позволяет указать, может ли браузер синтезировать шрифт small-caps, если он отсутствует в семействе шрифтов. Символы small-caps обычно используют форму прописных букв, но уменьшены до размера строчных букв.

Часто удобно использовать сокращённое свойство font-synthesis для управления всеми значениями синтеза шрифтов.

Синтаксис

/* Keyword values */
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;

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

Значения

auto: Указывает, что браузер может синтезировать отсутствующий шрифт small-caps, если это необходимо.
none: Указывает, что синтез отсутствующего шрифта small-caps браузером запрещён.

Формальное определение

Начальное значение	`auto`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

font-synthesis-small-caps = 
  auto  |
  none

Примеры

Отключение синтеза шрифта small-caps

В этом примере показано отключение браузером синтеза шрифта small-caps для шрифта Montserrat.

HTML

<p class="english">
  These are the default <span class="small-caps">small-caps</span>,
  <strong>bold</strong>, and <em>oblique</em> typefaces.
</p>

<p class="english no-syn">
  The <span class="small-caps">small-caps</span> typeface is turned off here but
  not the <strong>bold</strong> and <em>oblique</em> typefaces.
</p>

CSS

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

.english {
  font-family: "Montserrat", sans-serif;
}
.small-caps {
  font-variant: small-caps;
}
.no-syn {
  font-synthesis-small-caps: none;
}

Результат

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

Спецификация
CSS Fonts Module Level 4 # font-synthesis-small-caps

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

	Десктопные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-synthesis-small-caps`	97	97	111	83	16.4	97	111	68	16.4	18.0	97
`auto`	97	97	111	83	16.4	97	111	68	16.4	18.0	97
`none`	97	97	111	83	16.4	97	111	68	16.4	18.0	97

См. также

font-synthesis сокращение, font-synthesis-style, font-synthesis-weight
font-style, font-variant, font-variant-caps, font-weight
CanvasRenderingContext2D: свойство fontVariantCaps

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis-small-caps