css властивість font-synthesis

Властивість font-synthesis дає змогу вказати, чи може браузер дозволяти синтезувати жирний або косий шрифт, коли для цієї мети сімейство шрифтів не має спеціального гліфа.

Властивість font-synthesis є однією із властивостей, введених у CSS3, для того, щоб увімкнути різні функції, пов'язані з шрифтами, які можуть покращити зовнішній вигляд тексту на сторінці. Властивість дозволяє відключити поведінку користувацького агента за умов синтезу жирних та / або похилих шрифтів, коли у сімейства шрифтів немає жирних або похилих облич для гліфів.

На прикладі вище, для тексту застосований шрифт, який не має гліфів для похилих символів. Тому, як ми бачимо у першому рядку, він стає курсивним. Але для другого рядка ми застосували властивість font-synthesis зі значенням none, що відключило можливість браузера автоматично перетворити символи й залишило їх у нормальному вигляді.

Багато шрифтів включають жирний і курсивний варіанти кожного шрифту. Якщо сімейство шрифтів не включає їх, браузер синтезує процес. Властивість font-synthesis може бути використано для чіткої вказівки браузера не робити цього.

правити

+ додати пораду чи нотатку

Синтаксис

font-synthesis: none | [ weight || style ]

Властивість font-synthesis може отримувати 3 значень:

none

Заборонити всі синтетичні обличчя.

автор: Svitlana

правити

weight

Вказує, що браузеру дозволено синтезувати жирний текст.

автор: Svitlana

правити

style

Вказує, що браузеру дозволено синтезувати курсивний текст.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
font-synthesis	Не підтримується	34.0	9.0	Не підтримується	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
font-synthesis	Не підтримується	34.0	9.1

Приклади

+ запропонувати свій приклад у пісочниці

<p class="syn"><b>Жирний</b> і <i>курсив</i> — синтез дозволено.</p>
<p class="none"><b>Жирний</b> і <i>курсив</i> — синтез заборонено.</p>

p {
    font-family: cursive;
    font-size: 22px;
}

.none {
    font-synthesis: none;
}