From f28633f43dc8dc0cca5e65f7bfaba47bf7b90b41 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Mon, 18 Nov 2024 11:46:37 +0200 Subject: [PATCH] update(CSS): web/css/@font-face (#3607) --- files/uk/web/css/@font-face/index.md | 45 ++++++++++++---------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/files/uk/web/css/@font-face/index.md b/files/uk/web/css/@font-face/index.md index 3fabcbcb33..a6c5f39dab 100644 --- a/files/uk/web/css/@font-face/index.md +++ b/files/uk/web/css/@font-face/index.md @@ -40,7 +40,8 @@ browser-compat: css.at-rules.font-face - : Значення {{cssxref("font-weight")}}. Приймає два значення для задання діапазону, котрий підтримується гарнітурою, наприклад, `font-weight: 100 400;` - > **Примітка:** Дескриптор font-variant був прибраний зі специфікації у 2018 році. Підтримуються значення властивості {{cssxref("font-variant")}}, але немає рівносильного дескриптора. + > [!NOTE] + > Дескриптор font-variant був прибраний зі специфікації у 2018 році. Підтримуються значення властивості {{cssxref("font-variant")}}, але немає рівносильного дескриптора. - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - : Дає змогу контролювати передові типографські можливості в шрифтах OpenType. @@ -66,7 +67,8 @@ browser-compat: css.at-rules.font-face Даючи розробникам змогу задавати власні шрифти, `@font-face` уможливлює проєктування вмісту без обмеження так званими "безпечними для Вебу" шрифтами (тобто шрифтами, котрі так поширені, що вважаються загальнодоступними). Змога задати назву встановленого локально шрифту для його пошуку та застосування – уможливлює налаштування шрифту понад базові можливості, до того ж – без покладання на зв'язок з Інтернетом. -> **Примітка:** Запасні стратегії завантаження шрифтів, для старих браузерів, описані на [сторінці дескриптора `src`](/uk/docs/Web/CSS/@font-face/src#zadannia-zapasnykh-znachen-dlia-starykh-brauzeriv). +> [!NOTE] +> Запасні стратегії завантаження шрифтів, для старих браузерів, описані на [сторінці дескриптора `src`](/uk/docs/Web/CSS/@font-face/src#zadannia-zapasnykh-znachen-dlia-starykh-brauzeriv). Директива `@font-face` може використовуватися не лише на зовнішньому рівні CSS, а й також всередині будь-якої [директиви умовного групування CSS](/uk/docs/Web/CSS/CSS_conditional_rules#dyrektyvy). @@ -105,33 +107,24 @@ browser-compat: css.at-rules.font-face Цей приклад задає використання віддаленого шрифту, застосовуючи його до всього тіла документа: -```html - - - - - - Зразок вебшрифту - - - - Це – Bitstream Vera Serif Bold. - - +```html live-sample___web-font-example + + Це Bitstream Vera Serif Bold. + ``` -Вивід цього коду прикладу матиме такий вигляд: +```css live-sample___web-font-example +@font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf"); +} + +body { + font-family: "Bitstream Vera Serif Bold", serif; +} +``` -{{EmbedGHLiveSample("css-examples/web-fonts/basic-web-font.html", '100%', '100')}} +{{EmbedLiveSample("web-font-example", "", "100px")}} ### Задання взаємозамінних локальних шрифтів