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

(Ця сторінка використовує каскадні таблиці стилів CSS)

Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C http://www.w3.org/Style/Examples/007/fonts.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген — розробник проекту SSL (всі переклади автора: en, ru, uk )
Локальна копія: http://www.indeep76.com/Style/Example007ukr/fonts.html

Групи шрифтів

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

Групи шрифтів

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

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

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

'sans-serif': звичайний шрифт без зарубок
Arial, sans-serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Helvetica, sans-serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Gill Sans, sans-serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Lucida, sans-serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Helvetica Narrow, sans-serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
sans-serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
'serif': звичайний шрифт із зарубками
Times, serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Times New Roman, serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Palatino, serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Bookman, serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
New Century Schoolbook, serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
serif Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
'monospace': шрифт фіксованої ширини
Andale Mono, monospace Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Courier New, monospace Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Courier, monospace Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Lucidatypewriter, monospace Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Fixed, monospace Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
monospace Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
'cursive': шрифт, що імітує почерк
Comic Sans, Comic Sans MS, cursive Гей, встигну, не встигну - на ґанку ваша файна їжа знищується бурундучком
Zapf Chancery, cursive Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Coronetscript, cursive Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Florence, cursive Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Parkavenue, cursive Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
cursive Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
'fantasy': декоративний шрифт, для заголовків и т.д.
Impact, fantasy Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Arnoldboecklin, fantasy Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Oldtown, fantasy Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Blippo, fantasy Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
Brushstroke, fantasy Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком
fantasy Гей, хлопці, не встигну - на ґанку ваша файна їжа знищується бурундучком

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

Більшість шрифтів мають різну систему у межах однієї групи, зазвичай жирний та курсив, часто також жирний курсив, менш часто прописні букви й в декількох випадках екстра-світлі/екстра-жирні або розтянуті/стислі версії.

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

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

У CSS3 є ще один стиль: 'font-effect', який робить букви рельєфними.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Документ створено Feb 2003;
Остання зміна документу $Date: 2007/07/20 16:16:25 $ GMT