Bert Bosсъздадено на 17 Jan 2001;
последна промяна $Date: 2008/07/07 15:03:47 $ GMT
Настоящият документ е превод на статията "Fonts".
Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/fonts.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.
Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.
Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.
Документът е преведен със съдействието на Lunar calendar и Фази на луната.
(Тази страница използва CSS style sheets)
След цвета, може би, шрифта е най-основното свойство в една страница. Тази страница показва "трикове", но тук ще Ви покажем редица разновидности от шрифтове, които CSS предоставя.
Тъй като не всички шрифтове са достъпни на всеки компютър (има хиляди шрифтове и повечето не са безплатни), CSS предлага система от заместители. Описват се шрифтовете, които да се използват първо, след това други шрифтове, които да заместят първите ако не са налични и списъкът завършват с род шрифтове (generic font), които са пет: serif, sans-serif, monospace, cursive и fantasy.
Таблицата показва примери за различни шрифтове (браузърът Ви може и да не познава всички от тях) и може да видите, какво предприема браузърът Ви с петте рода шрифтове:
| 'sans-serif': нормални шрифтове без серифи | |
|---|---|
Arial, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica Narrow, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'serif': нормални шрифтове със серифи | |
Times, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Palatino, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Bookman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
New Century Schoolbook, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'monospace': шрифтове с фиксирана ширина | |
Andale Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier New, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucidatypewriter, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Fixed, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'cursive': шрифтове, имитиращи ръкопис | |
Comic Sans, Comic Sans MS, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Zapf Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Coronetscript, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Florence, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Parkavenue, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
| 'fantasy': декоративни шрифтове за заглавия и т.н. | |
Impact, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Arnoldboecklin, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Oldtown, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Brushstroke, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Повечето шрифтове имат различни стилове в самото семейство, обикновено bold (удебелен) и italic (наклонен), често и bold italic стил, по-рядко имат small-caps (малки букви) и в някои случаи extra-light/extra-bold или stretched/condensed версии.
Таблицата по-долу показва редица различни стилове. Ако нямате богата колекция от шрифтове е възможно много от редовете да изглеждат еднакви.
| правило | 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' прави буквите да изглеждат като гравирани или релефни.