CSS3 Шрифтове в уеб - Правилото @font-face
Уеб шрифтовете позволяват на уеб дизайнерите да използват шрифтове които не са инсталирани на техните компюътри.
Когато намерите или купите шрифта който искате да използвате, просто качете файлът при другите файлове, и ще бъде изтеглен автоматично когато потребител се нуждае от него. Точно по-този начин виждате текста в нашите уроци с различен шрифт.
"Собствените" ви шрифтове или тези които вие задавате на страницата да използва се задават чрез CSS3 правилото @font-face.
Поддържащи браузъри:
Числата в таблицата определят най-ниската версия на браузъра която напълно поддържа свойството font.
| Свойство |
|
|
|
|
|
| text-shadow |
10.0 |
4.0 |
3.5 |
4.0 |
9.5 |
| word-wrap |
5.5 |
23.0 |
3.5 |
6.1 |
12.1 |
Различни шрифтови формати.
TrueType Fonts (TTF)
- TrueType е шрифтов стандарт създаден през 1980г. , от Apple и Microsoft. TrueType е най-използвания шрифтов формат както за операционната система Mac OS така и за Microsoft Windows.
OpenType Fonts (OTF)
- OpenType е формат за мащабируеми компютърни шрифтове. Създаден е на базата на TrueType, и е продукт на Microsoft. Днес OpenTypе шрифтовете се използват в основните компютърни платформи.
The Web Open Font Format (WOFF)
- WOFF е шрифтов формат за уеб-страници. Създаден е през 2009г., и вече е набрал висока популярност. По-същество WOFF е OpenType или TrueType с компресия и допълнителни метаданни. Целта е да се поддържа шрифтовата дистрибуция от сървъра на клиента по мрежов път като създава ограничения в достъпа.
SVG Fonts/Shapes
- SVG шрифтовете позволяват SVG да бъде използван SVG fonts allow SVG да бъде използван като глифове когато се показва текст.SVG 1.1 спесификацията определя шрифтов модул който позволява създаването на шрифтове чрез SVG документ. Можете също да приложите CSS в SVG документите, и правилото @font-face може да бъде приложено върху текст в SVG документите.
Embedded OpenType Fonts (EOT)
- EOT шрифтовете са компактна форма на OpenType шрифтовете създадени от Microsoft за използване на вградени шрифтове в уеб-страници.
Поддържащи браузъри за шрифтовите формати
Числата в таблицата определят най-ниската версия на браузъра която напълно поддържа шрифтовите формати
Шрифтов
формат |
|
|
|
|
|
| TTF/OTF формат |
9.0* |
4.0 |
3.5 |
3.1 |
10.0 |
| WOFF формат |
9.0 |
5.0 |
3.6 |
5.1 |
11.1 |
| SVG формат |
Не се поддържа |
4.0 |
Не се поддържа |
3.2 |
9.0 |
| EOT формат |
6.0 |
Не се поддържа |
Не се поддържа |
Не се поддържа |
Не се поддържа |
*Шрифтовите формати работят само когато имате настройка "installable" в случай, че ще правите сами шрифтовете си го имайте в предвид.
Използване на шрифт по избор:
В CSS3 правилото @font-face трябва първо да зададете име на шрифта (като myFirstFont), след това директорията на шрифта.
 |
Съвет: Винаги ползвайте малки букви за URL адреса на шрифта. Главните букви могат да доведат до неочаквани резултати в Internet Explorer. |
За да използвате шрифта като HTML елемент, посочете името на шрифта (myFirstFont) чрез свойството : font-family
Пример
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Използване на Bold текст (удебелен)
Трябва да добавите друго @font-face правило което да съдържа индикатори за подчертан текст (bold text):
Пример
@font-face {
font-family: myFirstFont;
src: url(пример_bold.woff);
font-weight: bold;
}
Файлът "пример_bold.woff" е друг шрифтов файл, който съдържа удебелените (bold) букви за шрифта "пример".
Браузърите ще използват този файл когато текст посочен с font-family "myFirstFont" трябва да бъде удебелен.
По този начин можете да създадете много @font-face правила за един и същи шрифт.
CSS3 Шрифтови дескриптори
Следващата таблица разглежда всички шрифтови дескриптори които могат да бъдат зададени в правилото @font-face:
| Дескриптор |
Стойност |
Описани |
| font-family |
name |
Изисква се*: Задава името на шрифта. |
| src |
URL |
Изисква се* : Задава местоположението на шрифта (и неговите файлове) |
| font-stretch |
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded |
По желание : Определя как да бъде изобразен шрифта. По подразбиране стойността е normal. |
| font-style |
normal
italic
oblique |
По желание : Определя как да бъде стилизиран шрифта. По подразбиране е normal. |
| font-weight |
normal
bold
100
200
300
400
500
600
700
800
900 |
По желание : Определя дебелината на шрифта. По подразбиране е normal. |
| unicode-range |
unicode-range |
По желание : Определя обхвата на UNICODE, буквите които шрифта поддържа. По подразбиране е "U+0-10FFFF" |
