| Інтернет Експлорер | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | середній |
|---|---|
| Наслідується | Так |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Визначає розмір шрифту елемента. Розмір можна встановити кількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) встановлює розмір, який називається абсолютним. Насправді вони не зовсім абсолютні, оскільки залежать від налаштувань браузера та операційної системи.
Інший набір констант (larger, smaller) встановлює відносні розміри шрифту. Оскільки розмір успадковується від батьківського елемента, ці відносні розміри застосовуються до батьківського елемента, щоб визначити розмір шрифту поточного елемента.
У кінцевому підсумку, розмір шрифту сильно залежить від значення властивості font-size у батьківського елемента.
Сам розмір шрифту визначається як висота від базової лінії до верхньої границі підстави кегельної площини, як показано на рис. 1.
Рис. 1. Розмір шрифту
Синтаксис
font-size: абсолютний розмір | відносний розмір | значення | відсотки | успадкувати
Значення
Для встановлення абсолютного розміру використовуються наступні значення: xx-small, x-small, small, medium, large, x-large, xx-large. Їх відповідність з розміром шрифту в HTML наведено в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Відносний розмір шрифту встановлюється значеннями larger та smaller.
Також дозволяється використання будь-яких допустимих одиниць CSS: em (висота шрифта елемента), ex (висота символу х), пункти (pt), пікселі (px), відсотки (%) та інші. За 100% береться розмір шрифта батьківського елемента. Від'ємні значення не допускаються.
- успадкувати
- Наслідує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-size</title>
<style>
h1 {
font-family: 'Times New Roman', Times, serif; /* Гарнітура тексту */
font-size: 250%; /* Розмір шрифту в відсотках */
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt; /* Розмір шрифту в пунктах */
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Рис. 2. Застосування властивості font-size
Об'єктна модель
[window.]document.getElementById("elementID").style.fontSize
Браузери
Інтернет Експлорер до версії 7.0 включно не підтримує значення успадкувати.