Как подключить ttf шрифт в css
Перейти к содержимому

Как подключить ttf шрифт в css

  • автор:

Как подключить ttf шрифт в css

Не всегда стандартные встроенные шрифты, как Arial или Verdana, могут быть удобны. Нередко встречается ситуация, когда веб-дизайнер хочет воспользоваться возможностями какого-то другого шрифта, которого нет среди встроенных, но который доступен из внешнего файла. Такой шрифт можно подключить с помощью директивы font-face :

@font-face < font-family: 'Roboto'; src: url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2); >

Свойство font-family задает название шрифта, а свойство src — путь к шрифту.

В данном случае веб-страница будет подгружать шрифт, который расположен в интернете по адресу http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2

В качестве альтернативы мы можем загрузить файл шрифта на локальный компьютер и уже оттуда подгружать его на веб-страницу. Как правило, для хранения своих шрифтов рядом с веб-страницей создается папка fonts :

@font-face < font-family: 'Roboto'; src:url('fonts/roboto.ttf'); >

После подключения шрифта, его можно использовать в стилях:

В данном случае используется шрифт Roboto, созданный компанией Google и определенный в файле в формате woff2. Однако не все браузеры поддерживают данный формат шрифтов.

Грубо говоря, существует несколько различных форматов шрифтов: TrueType( расширение ttf), Open Type (расширение otf), Embedded Open Type (расширение eot), Web Open Font Format (woff/woff2), Scalable Vector Graphic (svg). Разные браузеры могут поддерживать разные шрифты. И чтобы решить проблему поддержки шрифтов создатели шрифта часто создают сразу несколько форматов. И мы можем сразу эти форматы определить. Например:

@font-face < font-family:'FontAwesome'; src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot'); src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.svg') format('svg'); >

Как и в предыдущем случае свойства font-family и src задают название и путь к шрифту. Но теперь также для совместимости добавляется еще одно свойство src . Второе свойство src устанавливает сразу несколько шрифтов. Первым шрифтом также идет шрифт в формате EOT, но теперь к расширению файла .eot добавляется значение ?#iefix . Это делается для совместимости с версиями Internet Explorer 6–8. Если после .eot не будет добавляться это значение, то шрифт может неправильно отображаться в Internet Explorer 6-8.

После параметра url идет определение формата шрифта:

format('embedded-opentype')

Когда браузер начнет загружать веб-страницу, на которой таким образом определен шрифт, то браузер не будет подгружать все шрифты во всех форматах, а загрузит только первый шрифт, который для него окажется понятным.

Разные версии шрифта

Загрузим шрифт Roboto по ссылке Roboto на локальный компьютер. Распакуем загруженный архив в папку, которую назовем fonts, и положим эту папку в один каталог рядом с веб-страницей. В загруженной папке шрифта Roboto мы сможем увидеть, что она содержит не один файл, а сразу несколько:

Стиль Roboto в css 3

Зачем нам столько файлов? Дело в том, что каждый шрифт должен определять отдельный стиль для обычного текста, для текста, выделенного курсивом, для текста, выделенного жирным, для текста, сочетающего выделение жирным и курсивом и т.д.

Чтобы браузер мог автоматически распознавать разные варианты шрифта, к директиве @font-face добавляются свойства font-weight и font-style , которые соответственно устанавливают выделение жирным и выделение курсивом:

@font-face < font-family: 'Roboto'; src: url(fonts/Roboto-Regular.ttf); font-weight: normal; font-style: normal; >p

Поскольку версия шрифта 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-face < font-family: 'Roboto'; src: url(fonts/Roboto-Italic.ttf); font-weight: normal; font-style: italic; >

Значение 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; >

Значение font-weight: bold указывает, что данная версия шрифта применяется при выделении жирным.

Теперь используем все эти шрифты:

    Шрифты в CSS3 @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. Он предоставляет множество различных интересных иконок, которые можно использовать на веб-странице.

Подключение шрифтов

@font-face

С помощью селектора @font-face можно определить дополнительный шрифт, загружаемый с хостинга, для отображения на странице сайта, а так же задать ему сопутствующие настройки.

Декларация @font-face может содержать ряд свойств таких как: название шрифта, его размер, начертание шрифта и прочее. Здесь же указываются ссылки на необходимый шрифт.

 @font-face

Чтобы подключить выбранный шрифт следует создать правило @font-face которое включает в себя ряд свойств:

 CSS /* font-family: "AirportRegular"; */ @font-face

В самом начале декларации @font-face указан используемый шрифт, в данном примере это « AirportRegular ». Далее идут ссылки расположения шрифтов с разными расширениями .eot ; .woff ; .ttf .

*.ttf ( True Type ) – самый старый и широко используемый формат, разработанный Apple еще в восьмидесятых годах прошлого века. Шрифт с данным расширением понимает все браузеры.

*.eot ( Embedded OpenType ) – продукт компанией Microsoft. Он задействован для старых браузеров Internet explorer ниже девятой версии.

*.woff ( Web Open Font Format ) – подобный формат был специально разработан именно для web- страниц в 2009 году.

В окончании декларации @font-face записаны свойства начертания шрифта и насыщенность шрифта. Сам шрифт и указанный выше код можно скачать с сайта – fonts4web

Скаченный файл со шрифтами разархивировать в папке сайта, которая имеет, как правило, название « fonts », затем в папке « css » нужно создать файл « fonts.css », где и будут записываться подобные свойства шрифтов.

Путь к папке с файлами шрифта указывается в зависимости от структуры сайта и может быть, например таким:

 /myfolder/fonts/AirportRegular/AirportRegular.eot /myfolder/fonts/AirportRegular/AirportRegular.eot?#iefix /myfolder/fonts/AirportRegular/AirportRegular.woff /myfolder/fonts/AirportRegular/AirportRegular.ttf 

Путь к CSS файлу где находятся правила @font-face выглядит следующим образом:

 /myfolder/css/fonts.css 

В каскадных таблицах стилей можно задать шрифт, например для заголовков второго и третьего уровня:

Правило @font-face

Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.

Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).

Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.

Правило @font-face позволяет подключать разнообразные пользовательские шрифты. Браузер загружает шрифты в кэш и использует их для оформления текста на странице. Такой подход называется встраиванием шрифтов, а встроенные шрифты — веб-шрифтами.

Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts , созданную на сервере.

Чтобы подключить шрифт с помощью правила @font-face , нужно:

  • загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
  • указать название шрифта, прописать ссылку на файл и задать описание шрифта,
  • добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.
@font-face < font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */ url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */ url(WebFont.ttf) format("truetype"); /* все современные браузеры */ >p

Этот код говорит браузеру отображать текст внутри элемента

, используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.

Внутри каждого семейства шрифта можно определить до девяти значений жирности (веса). Поэтому для каждого встраиваемого шрифта, а также для каждого начертания нужно задавать отдельное правило @font-face , т.е. нельзя объявить в одном правиле два разных шрифта или шрифт одного семейства, но разных стилей и веса.

@font-face
@font-face

В общем виде для шрифта можно задать следующие свойства:

@font-face

Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:

@font-face

Форматы веб-шрифтов

Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:

  • Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.
  • Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.
  • Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.
  • SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.

Сложности использования встроенных шрифтов

  • Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
  • С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
  • Некоторые шрифты просто плохо смотрятся на веб-страницах.

Полезные ресурсы

font-squirrel

Font Squirrel — сервис, позволяющий конвертировать веб-шрифты разных форматов. Небольшой минус — высота некоторых символов после конвертации может различаться. Шрифт загружается на сервис по кнопке Upload Fonts.

Webfont.ru — ресурс, содержащий коллекцию бесплатных шрифтов для сайтов. На сайте также есть форум, где можно задавать вопросы, касающиеся использования того или иного шрифта. В закладке «Полигон» вы сможете увидеть, как будет выглядеть текст, поиграв с размерами, задав для него тень и т.д.

Transfonter — быстрый и удобный генератор правила @font-face для веб-шрифтов.

Как осуществить подключение нескольких шрифтов в css?

Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.

Почти все из них используются на странице. Вопрос вот в чем, если мне нужно подключить три файла из двенадцати или более, как должна выглядеть запись в @font-face?

@font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); >/*И повторяем этот кусок кода изменяя гарнитуру и имя файла*/
/*Либо можно использовать такой вариант?*/ @font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); /*И так далее. */ >

Как будет правильно?

  • Вопрос задан более трёх лет назад
  • 70972 просмотра

Комментировать
Решения вопроса 2

Zoxon

Веб-разработчик

@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-normal.eot"); src: local('☺'), url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-normal.woff") format("woff"), url("../fonts/ptserif-normal.ttf") format("truetype"), url("../fonts/ptserif-normal.svg#PT Serif") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bold.eot"); src: local('☺'), url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bold.woff") format("woff"), url("../fonts/ptserif-bold.ttf") format("truetype"), url("../fonts/ptserif-bold.svg#PT Serif") format("svg"); font-weight: bold; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-italic.eot"); src: local('☺'), url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-italic.woff") format("woff"), url("../fonts/ptserif-italic.ttf") format("truetype"), url("../fonts/ptserif-italic.svg#PT Serif") format("svg"); font-weight: normal; font-style: italic; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bolditalic.eot"); src: local('☺'), url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bolditalic.woff") format("woff"), url("../fonts/ptserif-bolditalic.ttf") format("truetype"), url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg"); font-weight: bold; font-style: italic; >

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Подробнее смотрите на caniuse.com

@font-face < font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *