css властивість font-size
Властивість font-size встановлює розмір шрифту. Розмір шрифту - це висота від базової лінії літери до її верхнього краю.
Ви можете вказати в якості значення абсолютний або відносний розмір, довжину або відсоток.
Ключові слова для задання абсолютного розміру зберігаються браузером в таблиці розмірів шрифтів. Коли ви використовуєте таке ключове слово, користувацький агент шукає таблицю і відповідно обчислює розмір шрифту.
Ключові слова для задання відносного розміру переміщають розмір шрифту за списком абсолютних розмірів шрифтів вище. Наприклад, якщо батьківський елемент має середовище, значення меншого за чинним елементом зробить його розмір шрифтом маленьким. Якщо розмір шрифту батька не збігається з абсолютним ключовим словом, користувацький агент обчислює його або шляхом вибору розміру між абсолютними значеннями ключових слів або округленням до найближчого.
Якщо розмір знаходиться за межами діапазону абсолютних значень ключових слів, користувальницький агент буде екстраполювати розмір відповідно.
Ось приблизне керівництво щодо відображення між абсолютними розмірами CSS, заголовком HTML та абсолютними розмірами шрифтів. Зверніть увагу, що фактичне значення може змінюватися в залежності від значення параметра font-size-adjust та недоступності певних розмірів шрифтів.
| Значення абсолютної величини CSS | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| Масштабний коефіцієнт | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML-заголовки | h6 | h5 | h4 | h3 | h2 | h1 | ||
| Розміри шрифтів HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Також дозволяється використовувати будь-які допустимі одиниці CSS: em (висота шрифту елемента), ex (висота символу х), пункти (pt), пікселі (px), відсотки (%) і ін. За 100% береться розмір шрифту батьківського елементу. Негативні значення не допускаються.
Обмеження властивості font-size
Різні шрифти мають різні висоти. Таким чином, один шрифт може виглядати більшим за заданим розміром, ніж інший шрифт. Це добре, якщо ви маєте справу лише з одним шрифтом. Але ми, як правило, розглядаємо список шрифтів: шрифт першого вибору, а потім один або декілька "резервних" шрифтів, якщо користувач не має першого шрифту.
Зазвичай це виглядає приблизно так:
font-size: 16px;
font-family: "Open Sans", Verdana, sans-serif;
Припущення полягає в тому, що, як розробники, у нас буде встановлений перший вибір шрифту (Open Sans) на нашому комп'ютері. Тому, коли ми перевіряємо розмір шрифту на веб-сайті, ми будемо тестувати за допомогою шрифту першого вибору.
Але як щодо користувачів, які не можуть використовувати наш шрифт першого вибору? Вони отримають другий вибір (якщо він є доступним) або третій вибір, якщо ні одна з них не є доступною тощо.
У багатьох випадках шрифти другого або третього вибору будуть відображатися на іншій висоті, ніж шрифт першого вибору. Це означає, що ваш шрифт другого вибору може виглядати більшим або меншим, ніж передбачалося. У деяких випадках це може не бути проблемою, але в інших випадках ви можете виявити, що шрифт резервного копіювання видається занадто малим або набагато більшим - до того моменту, коли текст стає нечитабельним. Це може виявитися досить розчаровуючим, оскільки може бути важко знайти відповідні шрифти для резервування.
На щастя, CSS дає змогу вирішити цю проблему.
CSS має властивість font-size-adjust для вирішення цієї проблеми. В основному вона дозволяє вказати, щоб всі резервні шрифти використовували одне і те ж співвідношення сторін. Коли ви це зробите, резервний шрифт відображається у дуже близькому розмірі до потрібного шрифту.
Синтаксис
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;Властивість font-size може отримувати 13 значень:
-
medium -
Середній розмір шрифту. Без задання.
автор: Svitlana -
xx-small -
Шрифт екстра-екстра малого розміру.
автор: Svitlana -
x-small -
Шрифт екстра малого розміру.
автор: Svitlana -
small -
Шрифт малого розміру.
автор: Svitlana -
large -
Шрифт великого розміру.
автор: Svitlana -
x-large -
Шрифт екстра великого розміру.
автор: Svitlana -
xx-large -
Шрифт екстра-екстра великого розміру.
автор: Svitlana -
smaller -
Розмір шрифту трохи меньший, ніж у батьківського елемента.
автор: Svitlana -
larger -
Розмір шрифту трохи більший, ніж у батьківського елемента.
автор: Svitlana -
length -
Фіксований розмір шрифту в px, cm, etc
автор: Svitlana -
% -
Розмір шрифту у відсотках. Примітка: За 100% береться розмір шрифту батьківського елементу. Від'ємні значення не допускаються.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.fontSize="14px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Відсотки відлічуються від успадкованого розміру: заголовки збільшені відносно базового, абзац лишився один в один.
HTML
<h1>Заголовок на 250%</h1>
<h2>Заголовок на 200%</h2>
<p>Абзац на 100% — базовий розмір.</p>CSS
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}Приклад використання
Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!