Bert Bosсоздано 17 Января 2001;
последняя правка $Date: 2007/07/20 16:07:21 $ GMT
(Эта страничка использует каскадные таблицы стилей CSS)
Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C https://www.w3.org/Style/Examples/007/fonts.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец - разработчик Speed Tests. Все переводы автора: en, ru, uk
Локальная версия: https://www.indeep76.com/Style/Example007/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', который делает буквы рельефными.