Languages

Це переклад. Він може містити помилки або бути застарілим відносно Англійської версії. Перекладач: Євген (neighbor report)

Каскадні таблиці стилів CSS поради & прийоми

Дивіться також покажчик усіх прийомів.

На цій сторінці:

Cімейства шрифтів

Після кольору шрифт, можливо, найважливіша властивість сторінки. На цій сторінці я не буду демонструвати ніяких "трюків", але покажу ряд варіацій шрифтів, допустимих в CSS.

Оскільки не всі шрифти доступні на всіх комп'ютерах (існують тисячі шрифтів і більшість з них не безкоштовні), CSS передбачає резервну систему. Першим ви вказуєте шрифт, який хотіли б використовувати. За ним йдуть будь-які шрифти, які ви могли б використовувати, якщо перший зазначений шрифт недоступний. А закінчити список ви повинні типовим шрифтом, який має 5 видів: serif, sans-serif, monospace, cursive та fantasy.

Наступна таблиця показує приклади різних шрифтів (ваш браузер може не знати їх всіх) і ви можете побачити, що ваш браузер робить з кожним з п'яти типових шрифтів:

'sans-serif': звичайні шрифти без засічок
Arial, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Helvetica, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Verdana, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Trebuchet MS, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Gill Sans, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Noto Sans, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Arial Narrow, sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
sans-serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
'serif': звичайні шрифти із засічками
Times, Times New Roman, serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Georgia, serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Palatino, URW Palladio L, serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Bookman, URW Bookman L, serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
New Century Schoolbook, TeX Gyre Schola, serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
serif На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
'monospace': шрифти фіксованої ширини
Andale Mono, monospace На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Courier New, monospace На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Courier, monospace На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
FreeMono, monospace На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
DejaVu Sans Mono, monospace На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
monospace На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
'cursive': шрифти, що імітують почерк
Comic Sans MS, Comic Sans, cursive На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Bradley Hand, cursive На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Brush Script MT, Brush Script Std, cursive На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Snell Roundhand, cursive На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
cursive На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
'fantasy': декоративні шрифти, для назв і т.д. ..
Impact, fantasy На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Luminari, fantasy На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Marker Felt, fantasy На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
Trattatello, fantasy На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
fantasy На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати

Стилі шрифтів

Більшість шрифтів мають різноманітні стилі в межах одного і того ж шрифтового сімейства. Зазвичай це жирний стиль (bold) або курсив (italic), часто зустрічається також стиль "жирний курсив" (bold italic), менше — капітель (малі прописні літери — small-caps), а в ряді випадків — екстра-світлі/екстра-жирні або розтягнуті/стислі версії.

У таблиці нижче наведено кілька різних стилів. Багато з рядків будуть виглядати однаково, якщо у вас немає великої колекції шрифтів.

правило serif sans-serif
Стилі
font-style: normal На подушечці… На подушечці…
font-style: italic На подушечці… На подушечці…
font-style: oblique На подушечці… На подушечці…
Насиченість шрифту
font-weight: 100 На подушечці… На подушечці…
font-weight: 200 На подушечці… На подушечці…
font-weight: 300 На подушечці… На подушечці…
font-weight: normal На подушечці… На подушечці…
font-weight: 500 На подушечці… На подушечці…
font-weight: 600 На подушечці… На подушечці…
font-weight: bold На подушечці… На подушечці…
font-weight: 800 На подушечці… На подушечці…
font-weight: 900 На подушечці… На подушечці…
Варіанти
font-variant: normal На подушечці… На подушечці…
font-variant: small-caps На подушечці… На подушечці…
Розтягування
font-stretch: ultra-condensed На подушечці… На подушечці…
font-stretch: extra-condensed На подушечці… На подушечці…
font-stretch: condensed На подушечці… На подушечці…
font-stretch: semi-condensed На подушечці… На подушечці…
font-stretch: normal На подушечці… На подушечці…
font-stretch: semi-expanded На подушечці… На подушечці…
font-stretch: expanded На подушечці… На подушечці…
font-stretch: extra-expanded На подушечці… На подушечці…
font-stretch: ultra-expanded На подушечці… На подушечці…

Модуль "Шрифти" в CSS має більше властивостей для вказівки спеціальних стилів (для шрифтів, які підтримують кілька варіантів), зокрема, властивість font-variant має набагато більше значень.

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 17 Jan 2001;
Last updated ср, 06-січ-2021 05:40:49 +0000

Languages

About the translations