Html font style ttf
Не всегда стандартные встроенные шрифты, как Arial или Verdana, могут быть удобны. Нередко встречается ситуация, когда веб-дизайнер хочет воспользоваться возможностями какого-то другого шрифта, которого нет среди встроенных, но который доступен из внешнего файла. Такой шрифт можно подключить с помощью директивы font-face :
Свойство font-family задает название шрифта, а свойство src — путь к шрифту.
В данном случае веб-страница будет подгружать шрифт, который расположен в интернете по адресу http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2
В качестве альтернативы мы можем загрузить файл шрифта на локальный компьютер и уже оттуда подгружать его на веб-страницу. Как правило, для хранения своих шрифтов рядом с веб-страницей создается папка fonts :
После подключения шрифта, его можно использовать в стилях:
В данном случае используется шрифт Roboto, созданный компанией Google и определенный в файле в формате woff2. Однако не все браузеры поддерживают данный формат шрифтов.
Грубо говоря, существует несколько различных форматов шрифтов: TrueType( расширение ttf), Open Type (расширение otf), Embedded Open Type (расширение eot), Web Open Font Format (woff/woff2), Scalable Vector Graphic (svg). Разные браузеры могут поддерживать разные шрифты. И чтобы решить проблему поддержки шрифтов создатели шрифта часто создают сразу несколько форматов. И мы можем сразу эти форматы определить. Например:
Как и в предыдущем случае свойства font-family и src задают название и путь к шрифту. Но теперь также для совместимости добавляется еще одно свойство src . Второе свойство src устанавливает сразу несколько шрифтов. Первым шрифтом также идет шрифт в формате EOT, но теперь к расширению файла .eot добавляется значение ?#iefix . Это делается для совместимости с версиями Internet Explorer 6–8. Если после .eot не будет добавляться это значение, то шрифт может неправильно отображаться в Internet Explorer 6-8.
После параметра url идет определение формата шрифта:
Когда браузер начнет загружать веб-страницу, на которой таким образом определен шрифт, то браузер не будет подгружать все шрифты во всех форматах, а загрузит только первый шрифт, который для него окажется понятным.
Разные версии шрифта
Загрузим шрифт Roboto по ссылке Roboto на локальный компьютер. Распакуем загруженный архив в папку, которую назовем fonts, и положим эту папку в один каталог рядом с веб-страницей. В загруженной папке шрифта Roboto мы сможем увидеть, что она содержит не один файл, а сразу несколько:
Зачем нам столько файлов? Дело в том, что каждый шрифт должен определять отдельный стиль для обычного текста, для текста, выделенного курсивом, для текста, выделенного жирным, для текста, сочетающего выделение жирным и курсивом и т.д.
Чтобы браузер мог автоматически распознавать разные варианты шрифта, к директиве @font-face добавляются свойства font-weight и font-style , которые соответственно устанавливают выделение жирным и выделение курсивом:
Поскольку версия шрифта Roboto-Regular.ttf применяется для текста, не выделенного курсивом и жирным, то вместе с ним устанавливаются значения:
font-weight: normal; font-style: normal;
То есть тем самым мы устанавливаем, что выделения курсивом не будет ( font-style: normal; ) и выделения жирным не будет ( font-weight: normal; )
Кроме версии Roboto-Regular.ttf , как видно выше на картинке, в папке есть еще другие версии шрифта Roboto. Например, курсивная версия шрифта Roboto-Italic.ttf и ряд других.
Если мы хотим, чтобы при выделении курсивом браузер использовал именно курсивную версию, то нам надо добавить еще одну директиву font-face:
Значение font-style: italic указывает, что данную версию шрифта следует применять при выделении курсивом.
Аналогично мы можем задать те версии шрифта, которые должны использоваться при выделении сразу и жирным, и курсивом, либо только при выделении жирным:
Значение font-weight: bold указывает, что данная версия шрифта применяется при выделении жирным.
Теперь используем все эти шрифты:
@font-face < font-family: 'Roboto'; src: url(fonts/Roboto-Regular.ttf); font-weight: normal; font-style: normal; >@font-face < font-family: 'Roboto'; src: url(fonts/Roboto-Italic.ttf); font-weight: normal; font-style: italic; >@font-face < font-family: 'Roboto'; src: url(fonts/Roboto-Bold.ttf); font-weight: bold; font-style: normal; >@font-face < font-family: 'Roboto'; src: url(fonts/Roboto-BoldItalic.ttf); font-weight: bold; font-style: italic; >pСтиль Roboto может выделять курсивом и жирным, либо и тем, и другим
Теперь к тексту в тегах , который использует курсив, будет применяться версия «Roboto-Italic.ttf», а к тексту в тегах — шрифт «Roboto-Bold.ttf».
Источники шрифтов
В интернете можно найти множество нестандартных шрифтов. Наиболее популярным репозиторием шрифтов является https://www.google.com/fonts/ — набор шрифтов от компании Google.
Также другим известным репозиторием шрифтов является Font Squirrel.
Следует также упомянуть такой популярный шрифт как FontAwesome. Он предоставляет множество различных интересных иконок, которые можно использовать на веб-странице.
CSS Web Fonts
Web fonts allow Web designers to use fonts that are not installed on the user’s computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your «own» fonts are defined within the CSS @font-face rule.
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Browser Support for Font Formats
The numbers in the table specifies the first browser version that fully supports the font format.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: The font format only works when set to be «installable».
Using The Font You Want
In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
Example
@font-face <
font-family: myFirstFont;
src: url(sansation_light.woff);
>
div font-family: myFirstFont;
>
Using Bold Text
You must add another @font-face rule containing descriptors for bold text:
Example
The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.
This way you can have many @font-face rules for the same font.
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the @font-face rule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Defines how the font should be stretched. Default is «normal» |
| font-style | normal italic oblique | Optional. Defines how the font should be styled. Default is «normal» |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Defines the boldness of the font. Default is «normal» |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF» |
Подключение шрифтов в CSS
Если не вникать в подробности, по быстрому подключить шрифт можно так:
/* Обычный */ @font-face < font-family: 'FontName'; src: url(/fonts/font.ttf); >/* Жирный */ @font-face < font-family: 'FontName bold'; src: url(/fonts/font-bold.ttf); >.text-1 < font-family: 'FontName'; font-size: 20px; >.text-2
Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:
- Нет названия шрифта в свойстве local .
- Подключен только один формат шрифта.
- Неправильно настроены начертания.
Локальные шрифты
Правило @font-face src позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.
Можно указать несколько названий:
Форматы шрифтов
Сегодня используются четыре формата, рассмотрим их подробнее:
TTF/OTF – работают в большинстве браузеров, кроме IE.
EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.
WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.
WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.
Как видно нет единого формата, который поддерживается всеми браузерами, поэтому нужно делать подключение нескольких файлов, браузер сам выберет подходящий формат. Рекомендуется подключать файлы шрифтов по приоритету:
- WOFF2 для современных браузеров.
- WOFF для браузеров, которые не поддерживают WOFF2.
- TTF для устаревших браузерах
- EOT для поддержки IE.
Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.
Разные начертания шрифтов
Пример подключения шрифта «Crimson Text» в разных начертаниях: