CSS3 Web Fonts - The @font-face Правило
Веб-шрифты позволяют веб-дизайнерам использовать шрифты, которые не установлены на компьютере пользователя.
Когда вы нашли / купили шрифт, который вы хотите использовать, просто включите файл шрифта на вашем веб-сервере, и он будет автоматически загружаться пользователю при необходимости.
Ваши "собственные" шрифты определяются в CSS3 @font-face правила.
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Различные форматы шрифтов
TrueType шрифты (TTF)
TrueType является стандартный шрифт разработан в конце 1980 - х годов, от компании Apple и Microsoft. TrueType является наиболее распространенным форматом шрифтов для операционных систем как Mac OS и Microsoft Windows.
OpenType шрифты (ОПФ)
OpenType является форматом для масштабируемых компьютерных шрифтов. Он был построен на TrueType , и является зарегистрированной торговой маркой компании Microsoft. OpenType шрифты используются обычно сегодня на основных компьютерных платформах.
Формат Web Open Font (WOFF)
WOFF представляет собой формат шрифта для использования в веб - страницах. Она была разработана в 2009 году и в настоящее время является Рекомендация W3C. WOFF, по существу , OpenType или TrueType со сжатием и дополнительные метаданные. Цель состоит в том, чтобы поддержать распространение шрифта от сервера к клиенту по сети с ограничениями пропускной способности.
Формат Web Open Font (WOFF 2.0)
TrueType/OpenType шрифт , который обеспечивает лучшее сжатие , чем WOFF 1.0.
SVG Fonts / Формы
SVG-шрифты позволяют SVG, которые будут использоваться в качестве глифов при отображении текста. 1.1 спецификации SVG определить модуль шрифта, который позволяет создавать шрифты в пределах SVG документа. Можно также применить CSS для SVG документов, а @font-face правило может быть применено к тексту в SVG документов.
Встроенные OpenType шрифты (СРВ)
СРВ шрифты компактная форма 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 |
| WOFF2 | Не поддерживается | 36,0 | 35,0 * | Не поддерживается | 26,0 |
| SVG | Не поддерживается | 4.0 | Не поддерживается | 3.2 | 9.0 |
| EOT | 6.0 | Не поддерживается | Не поддерживается | Не поддерживается | Не поддерживается |
* IE: Формат шрифта работает только тогда, когда установлен быть "устанавливаемое".
* Firefox: Не поддерживается по умолчанию, но может быть включена (необходимо установить флаг "истина", чтобы использовать WOFF2).
Использование шрифта, который вы хотите
В CSS3 @font-face правило необходимо сначала определить имя шрифта (например , myFirstFont ), а затем указать на файл шрифта.
 | Совет: Всегда используйте строчные буквы для URL шрифта. Прописные буквы могут дать неожиданные результаты в IE. |
|---|
Чтобы использовать шрифт для HTML - элемента, ссылаться на имя шрифта ( myFirstFont ) через font-family собственности:
пример
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Попробуй сам " Использование полужирный текст
Вы должны добавить еще один @font-face правило , содержащий дескрипторы для жирного текста:
пример
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Попробуй сам " Файл "sansation_bold.woff" еще один файл шрифта, который содержит символы для смелых шрифта Sansation.
Браузеры будут использовать это всякий раз , когда фрагмент текста с семейства шрифтов " myFirstFont " должны оказывать как полужирный.
Таким образом , вы можете иметь много @font-face правила для того же шрифта.
Проверьте себя с упражнениями!
CSS3 Дескрипторы шрифта
В следующей таблице перечислены все дескрипторы шрифта , которые могут быть определены внутри @font-face правило:
| дескриптор | Значения | Описание |
|---|---|---|
| font-family | name | Необходимые. Определяет имя шрифта |
| src | URL | Необходимые. Определяет URL файла шрифта |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Необязательный. Определяет, как должен быть растянут шрифт. По умолчанию это "нормальный" |
| font-style | normal italic oblique | Необязательный. Определяет, как должно быть в стиле шрифта. По умолчанию это "нормальный" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Необязательный. Определяет дерзновение шрифта. По умолчанию это "нормальный" |
| unicode-range | unicode-range | Необязательный. Определяет диапазон символов UNICODE поддерживает шрифт. По умолчанию "U + 0-10FFFF" |