Skip to content

Commit

Permalink
update(CSS): /docs/Web/CSS/font-size (#293)
Browse files Browse the repository at this point in the history
* chore(css): update some terms according to convention

* update(CSS): /docs/Web/CSS/font-size
  • Loading branch information
AdriandeCita authored Jun 11, 2022
1 parent 15bb027 commit a60d498
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions files/uk/web/css/font-size/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")}}

Expand Down Expand Up @@ -44,6 +44,7 @@ font-size: 80%;
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;
```

Expand All @@ -67,7 +68,7 @@ font-size: unset;
- {{cssxref("<percentage>")}}
- : Додатне значення {{cssxref("<percentage>")}}, відносне щодо розміру шрифту батьківського елемента.

> **Зверніть увагу:** Для якнайкращої доступності в загальному випадку найкраще використовувати значення, що відносні щодо усталеного розміру шрифту користувача.
> **Примітка:** Для якнайкращої доступності в загальному випадку найкраще використовувати значення, що відносні щодо усталеного розміру шрифту користувача.

## Опис

Expand All @@ -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)_, тому що користувач не може змінити розмір шрифту в деяких браузерах. Наприклад, користувачі з обмеженим зором можуть забажати задати розмір шрифту набагато більший за обраний вебдизайнером. Слід уникати їх використання для розмірів шрифтів, якщо поставлена мета створювати інклюзивний вебдизайн.

### Еми

Expand Down Expand Up @@ -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;
Expand All @@ -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`. Таку поведінку часто називають **комбінуванням**.

Expand All @@ -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;
Expand All @@ -153,13 +154,13 @@ span {
<span>Зовнішній <span>внутрішній</span> зовнішній</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`.

Expand Down Expand Up @@ -203,7 +204,7 @@ span {

#### Результат

{{EmbedLiveSample('Setting_font_sizes','600','200')}}
{{EmbedLiveSample('Setting_font_sizes', 600, 200)}}

## Специфікації

Expand Down

0 comments on commit a60d498

Please sign in to comment.