From a60d498138ac2ca7a541abaeff517fcfd1416ddb Mon Sep 17 00:00:00 2001 From: Mykola Myslovskyi Date: Sat, 11 Jun 2022 17:06:39 +0300 Subject: [PATCH] update(CSS): /docs/Web/CSS/font-size (#293) * chore(css): update some terms according to convention * update(CSS): /docs/Web/CSS/font-size --- files/uk/web/css/font-size/index.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/files/uk/web/css/font-size/index.md b/files/uk/web/css/font-size/index.md index 25a2daf0cb..f437a90e65 100644 --- a/files/uk/web/css/font-size/index.md +++ b/files/uk/web/css/font-size/index.md @@ -12,7 +12,7 @@ browser-compat: css.properties.font-size {{CSSRef}} -Властивість [CSS](/uk/docs/Web/CSS) **`font-size`** встановлює розмір шрифту. Зміна розміру шрифту також змінює розміри одиниць вимірювання {{cssxref("<length>")}}, залежних від розміру шрифту, наприклад, `em`, `ex`, і так далі. +Властивість [CSS](/uk/docs/Web/CSS) **`font-size`** (розмір-шрифту) встановлює розмір шрифту. Зміна розміру шрифту також змінює розміри одиниць вимірювання {{cssxref("<length>")}}, залежних від розміру шрифту, наприклад, `em`, `ex`, і так далі. {{EmbedInteractiveExample("pages/css/font-size.html")}} @@ -44,6 +44,7 @@ font-size: 80%; font-size: inherit; font-size: initial; font-size: revert; +font-size: revert-layer; font-size: unset; ``` @@ -67,7 +68,7 @@ font-size: unset; - {{cssxref("<percentage>")}} - : Додатне значення {{cssxref("<percentage>")}}, відносне щодо розміру шрифту батьківського елемента. -> **Зверніть увагу:** Для якнайкращої доступності в загальному випадку найкраще використовувати значення, що відносні щодо усталеного розміру шрифту користувача. +> **Примітка:** Для якнайкращої доступності в загальному випадку найкраще використовувати значення, що відносні щодо усталеного розміру шрифту користувача. ## Опис @@ -83,7 +84,7 @@ font-size: unset; Налаштування розмірів шрифтів також може діяти у сполученні. Наприклад, якщо на батьківському елементі задано `16px`, а на дочірньому – `larger`, то дочірній елемент матиме шрифт, більший за шрифт батьківського елемента. -> **Зверніть увагу:** Визначення розмірів шрифтів у `px` _[не відповідає принципам доступності](https://en.wikipedia.org/wiki/Web_accessibility)_, тому що користувач не може змінити розмір шрифту в деяких браузерах. Наприклад, користувачі з обмеженим зором можуть забажати задати розмір шрифту набагато більший за обраний вебдизайнером. Слід уникати їх використання для розмірів шрифтів, якщо поставлена мета створювати інклюзивний вебдизайн. +> **Примітка:** Визначення розмірів шрифтів у `px` _[не відповідає принципам доступності](https://en.wikipedia.org/wiki/Web_accessibility)_, тому що користувач не може змінити розмір шрифту в деяких браузерах. Наприклад, користувачі з обмеженим зором можуть забажати задати розмір шрифту набагато більший за обраний вебдизайнером. Слід уникати їх використання для розмірів шрифтів, якщо поставлена мета створювати інклюзивний вебдизайн. ### Еми @@ -113,7 +114,7 @@ em = бажане піксельне значення елемента / роз ```css html { - font-size: 62.5%; /* font-size 1em = 10px із усталеними налаштуваннями браузера */ + font-size: 62.5%; /* 1rem = 10px, якщо усталений розмір шрифта в браузері дорівнює 16px. (62.5% від 16 = 10) */ } span { font-size: 1.6em; @@ -128,7 +129,7 @@ span { Результат: -{{EmbedLiveSample("Ems", 400, 40)}} +{{EmbedLiveSample("Ems", 400, 75)}} Виходячи із того, що усталене значення `font-size` в браузері – 16px, слова "зовнішній" будуть зображені із розміром 16px, а слово "внутрішній" – 25.6px. Так виходить, тому що `font-size` внутрішнього {{HTMLElement("span")}} – 1.6em, що є відносним значенням щодо батьківської `font-size`, котра і собі відносна щодо своєї батьківської `font-size`. Таку поведінку часто називають **комбінуванням**. @@ -140,7 +141,7 @@ span { ```css html { - font-size: 62.5%; /* font-size 1em = 10px з усталеними налаштуваннями браузера */ + font-size: 62.5%; /* font-size 1rem = 10px з усталеними налаштуваннями браузера */ } span { font-size: 1.6rem; @@ -153,13 +154,13 @@ span { Зовнішній внутрішній зовнішній ``` -{{EmbedLiveSample("Rems", 400, 40)}} +{{EmbedLiveSample("Rems", 400, 75)}} У цьому прикладі слова "зовнішній внутрішній зовнішній" – 16px (виходячи із того, що `font-size` браузера зберігає усталене значення 16px). ### Ex -Подібно до використання одиниці вимірювання `em`, `font-size` елемента, вказана із використанням одиниці вимірювання `ex`, є обчисленою, інакше кажучи – динамічною. Це працює у такий само спосіб, за винятком того, що коли властивість `font-size` встановлена із використанням одиниць `ex`, то `font-size` дорівнює висоті `x` [першого доступного шрифту](https://www.w3.org/TR/css3-fonts/#first-available-font) на сторінці. Числове значення обчислюється шляхом множення успадкованого і власного значень `font-size` відповідно. +Подібно до використання одиниці вимірювання `em`, `font-size` елемента, вказана із використанням одиниці вимірювання `ex`, є обчисленою, інакше кажучи – динамічною. Це працює у такий само спосіб, за винятком того, що коли властивість `font-size` встановлена із використанням одиниць `ex`, то `font-size` дорівнює висоті `x` [першого доступного шрифту](https://www.w3.org/TR/css-fonts-3/#first-available-font) на сторінці. Числове значення обчислюється шляхом множення успадкованого і власного значень `font-size` відповідно. Дивіться Чернетку редактора W3C для більш детального опису таких [залежних від шрифту одиниць вимірювання довжини](https://drafts.csswg.org/css-values-4/#font-relative-length), як `ex`. @@ -203,7 +204,7 @@ span { #### Результат -{{EmbedLiveSample('Setting_font_sizes','600','200')}} +{{EmbedLiveSample('Setting_font_sizes', 600, 200)}} ## Специфікації