Bert BosДокумент створено Feb 2003;
Остання зміна документу $Date: 2007/07/20 16:16:25 $ GMT
(Ця сторінка використовує каскадні таблиці стилів 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', який робить букви рельєфними.