Текст и шрифт
Оновлено: 20.01.2023
-
@font-face
@font-face
Правило @font-face дає змогу визначити налаштування шрифтів, а також завантажити специфічний шрифт на комп'ютер користувача.
-
box-decoration-break
box-decoration-break
Вказує, як оформляти фрагмент тексту під час його перенесення на інший рядок. Працює тільки для таких властивостей: background, border, border-image, box-shadow, clip-path, margin і padding.
-
caret-color
caret-color
Задає колір текстового курсору, який відображається в текстових полях форми (<input>, <textarea>), а також для елементів з атрибутом contenteditable. Такий курсор за аналогією з друкарськими машинками також називається кареткою і показує місце введення наступного символу. Як правило, текстовий курсор має вигляд вертикальної миготливої лінії.
-
direction
direction
direction призначений для сайтів, у яких має значення напрямок тексту. Наприклад, при використанні арабського алфавіту читання відбувається справа наліво.
-
font
font
Універсальна властивість, що дозволяє одночасно задати кілька характеристик шрифту та тексту.
-
font-family
font-family
Встановлює сімейство шрифту, яке використовуватиметься для оформлення тексту змісту. Список шрифтів може містити одну або кілька назв, розділених комою. Якщо в імені шрифту містяться пробіли, наприклад Trebuchet MS, воно має братися в одинарні або подвійні лапки.
-
font-kerning
font-kerning
Властивість font-kerning керує кернінгом шрифту. Кернінг – це зміна інтервалу між певними поєднаннями літер для збереження щільності літер у тексті. Це особливо важливо для літер, у яких є похилі лінії, наприклад А, У, W, V. Інформація про кернінг зберігається в самому шрифті, і якщо шрифт не підтримує цю можливість, то властивість font-kerning не вплине на текст.
-
font-size
font-size
Визначає розмір елемента шрифту. Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) визначає розмір, який називається абсолютним. Правду кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера та операційної системи.
-
font-stretch
font-stretch
Встановлює вузьке, нормальне або широке зображення шрифту, що дозволяє розширювати текст або робити його більш щільним.
-
font-style
font-style
Визначає зображення шрифту - звичайне, курсивне або похиле. Коли для тексту встановлено курсивне або похиле зображення, браузер звертається до системи для пошуку відповідного шрифту. Якщо шрифт не знайдено, браузер використовує спеціальний алгоритм для імітації потрібного вигляду тексту.
-
font-variant
font-variant
Визначає, як потрібно представляти малі літери: залишити їх без модифікацій або робити їх великими зменшеними розмірами. Такий спосіб зміни символів називається капітель.
-
font-weight
font-weight
Встановлює насиченість шрифту. Значення вказується у вигляді чисел від 100 до 900 з кроком 100 або за допомогою ключових слів.
-
hyphens
hyphens
Властивість hyphens повідомляє браузеру, як розставляти переноси слів у блоці тексту. Словник переносів зберігається в браузері та підключається за наявності атрибута lang з кодом мови. Так, для російської мови слід додати lang="ru" до елемента <html> або безпосередньо до абзацу тексту. Правила переносів визначаються браузером і можуть відрізнятися.
-
letter-spacing
letter-spacing
Визначає інтервал між символами в межах елемента. Браузери зазвичай встановлюють відстань між символами, виходячи з типу і виду шрифту, його розмірів і налаштувань операційної системи. Щоб змінити це значення і застосовується ця властивість. Припустимо використовувати від'ємне значення, але в цьому випадку треба переконатися, що зберігається читабельність тексту.
-
line-clamp
line-clamp
Обмежує текст заданим числом рядків. Якщо текст перевищує вказане число рядків, то текст обрізається і в кінці додається три крапки.
-
line-height
line-height
Для блокових елементів визначає мінімальну висоту рядка тексту. Для вбудованих рядкових елементів (на кшталт <img>) властивість line-height не має жодного ефекту. Для решти рядкових елементів line-height задає висоту, яка використовується для розрахунку висоти рядка блоку.
-
tab-size
tab-size
Використовується для зміни ширини відступу, заданого за допомогою символу табуляції (клавіша Tab).
-
text-decoration
text-decoration
Додає оформлення тексту у вигляді його підкреслення, перекреслення або лінії над текстом. Одночасно можна застосувати більше одного стилю, перераховуючи значення через пробіл.
-
text-decoration-color
text-decoration-color
Встановлює колір лінії, яка додається через властивість text-decoration.
-
text-decoration-line
text-decoration-line
Визначає, як має додаватися декоративна лінія до тексту - підкреслення, перекреслення, над текстом. Одночасно можна додавати кілька ліній, перераховуючи значення через пробіл.
-
text-decoration-skip-ink
text-decoration-skip-ink
Задає, як виводити лінію під або над текстом, коли лінія перетинає виносні елементи букв, на кшталт "у", "р", "ц" тощо. Лінія може бути суцільною або перериватися, щоб пропустити "хвостики" букв.
-
text-decoration-style
text-decoration-style
Встановлює стиль декоративної лінії, яка додається до тексту через властивість text-decoration або text-decoration-line.
-
text-emphasis
text-emphasis
Скорочена властивість, що дає змогу встановити значення властивостей text-emphasis-style і text-emphasis-color одночасно.
-
text-emphasis-color
text-emphasis-color
Встановлює колір маркерів, що відображаються за допомогою властивості text-emphasis-style.
-
text-emphasis-position
text-emphasis-position
Встановлює положення маркерів, що відображаються за допомогою властивості text-emphasis-style.
-
text-emphasis-style
text-emphasis-style
Встановлює вид маркерів над кожним символом тексту. Такі маркери зазвичай використовуються в азіатських мовах щоб показати, як вимовляється слово. Для української мови аналогом є знак наголосу, який ставиться над голосною літерою.
-
text-indent
text-indent
Встановлює величину відступу першого рядка блоку тексту (наприклад, для абзацу <p>). Впливу на всі інші рядки не чинить. Допускається від'ємне значення для створення виступу першого рядка, але слід перевірити, щоб текст не виходив за межі вікна браузера.
-
text-orientation
text-orientation
Властивість text-orientation встановлює орієнтацію текстових символів у рядку і застосовується тільки до вертикального тексту (коли властивість writing-mode задано як vertical-lr або vertical-rl).
-
text-overflow
text-overflow
Визначає параметри видимості тексту в блоці, якщо текст цілком не поміщається в задану область. Можливі два варіанти: текст обрізають; текст обрізають і до кінця рядка додають три крапки. text-overflow працює в тому разі, якщо для блоку значення властивості overflow встановлено як auto, scroll або hidden.
-
text-shadow
text-shadow
Додає тінь до тексту, а також встановлює її параметри: колір тіні, зміщення щодо напису та радіус розмиття. Властивість text-shadow може працювати спільно з псевдоелементами :first-letter і :first-line.
-
text-transform
text-transform
Керує перетворенням тексту елемента на великі або прописні символи. Коли значення відмінне від none, регістр вихідного тексту буде змінено.
-
unicode-bidi
unicode-bidi
У європейських мовах читання тексту відбувається зліва направо, тоді як є мови, де текст читається справа наліво. У разі змішування в одному документі різних за написанням символів (української мови з івритом, наприклад) у системі юнікод, їхній напрямок визначається браузером із характеристик і вмісту тексту. Властивості unicode-bidi і direction задають, як має розташовуватися текст використовуваної мови.
-
white-space
white-space
Властивість white-space встановлює, як відображати пробіли між словами. За звичайних умов будь-яка кількість пробілів у коді HTML показується на веб-сторінці як один. Винятком є елемент <pre>, поміщений у цей контейнер текст виводиться з усіма пробілами, як він був відформатований користувачем. Таким чином, white-space імітує роботу <pre>, але на відміну від нього не змінює шрифт на моноширинний.
-
word-break
word-break
Властивість word-break вказує, як робити перенесення рядків усередині слів, які не поміщаються по ширині в задану область.
-
word-spacing
word-spacing
Встановлює інтервал між словами. Якщо для тексту задано вирівнювання через text-align зі значенням justify (вирівнювання по ширині), то інтервал між словами буде встановлено примусово, але не менше за значення, зазначене через word-spacing.
-
word-wrap
word-wrap
Властивість word-wrap указывает, переносити чи ні довгі слова, які не вміщаються по ширині у задану область.
-
Псевдоелемент ::first-letter
Псевдоелемент ::first-letter
Псевдоелемент ::first-letter визначає стиль першого символу в тексті елемента, до якого додається. До цього псевдоелемента можуть застосовуватися тільки стильові властивості, пов'язані з властивостями шрифту, полів, відступів, кордонів, кольору і фону.
-
Псевдоелемент ::first-line
Псевдоелемент ::first-line
Псевдоелемент ::first-line задає стиль першого рядка форматованого тексту. Довжина цього рядка залежить від багатьох чинників, як-от використовуваний шрифт, розмір вікна браузера, ширина блоку, мови тощо. У правилах стилю припустимо використовувати тільки властивості, що стосуються шрифту, зміни кольору тексту і фону.
-
Псевдоелемент ::selection
Псевдоелемент ::selection
Псевдоелемент ::selection застосовує стиль до виділеного користувачем тексту. У правилах стилів допускається використовувати такі властивості: color, background, background-color, cursor, outline і text-shadow.