Как установить шрифты в css

Css подключение шрифта ttf. Устанавливаем шрифты в css

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

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

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

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

Чтобы подключить шрифт с помощью правила @font-face , нужно:
1) загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
2) указать название шрифта, прописать ссылку на файл и задать описание шрифта,
3) добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.

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

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

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

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

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

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

Свойство @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.

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

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

Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS ? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1 ) нашего сайта. Для этого выполняем следующие действия:

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

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

Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров.woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них .

Как подключить шрифт с помощью различных сервисов

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

Самый простой способ подключения шрифтов

Как подключить шрифт к шаблону Moguta CMS

Как добавить ссылку с Google fonts в шаблон Moguta CMS

Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы

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

Зачем нужен font-face?

font-face используется для того, чтобы подключить к HTML -странице нестандартные шрифты через CSS . В большинстве современных броузеров будет отлично работать как TrueType шрифт (ttf) так и OpenType (otf). Во всех, кроме Internet Explorer . Но для них есть свой шрифт, и об этом позже.

Как подключить нестандартный ttf или otf шрифт в CSS?

В этом нет ничего сложного.
При помощи конструкции font-face в CSS мы можем указать путь к нестандартному ttf или otf файлу, проверить нет ли такого шрифта на компьютере и пользователя и указать имя шрифта, которое в дальнейшем сможем использовать в font-family. Делается это вот так:

Теперь шрифт будет доступен по заданному font-family в любом правиле css , а если такой шрифт не установлен на компьютере пользователя, то будет загружен с сервера наряду с картинками. Чтобы использовать его в своих правилах достаточно указать правильно имя:

После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.

Нестандартные шрифты средствами HTML и CSS в Internet Explorer.

Ещё один способ подключить нестандартный шрифт в IE

Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:

Таким образом Internet Explorer загрузит только EOT шрифт, пытаясь загрузить его по ссылке css/fonts/ptsans.eot#’) format…
А другие броузеры без проблем выберут TTF шрифт, и загрузят его.

Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT

Об этом можно писать отдельную статью, потому, что средств сегодня достаточно много, хотя еще несколько лет назад, для этого была только одна программа, разработанная Microsoft под Windows (не доступная для пользователей других ОС).
Особого внимания заслуживает программка fontoptimizer написанная на PERL, и соответственно абсолютно кроссплатформенная.
Надо сказать, что мне доставило огромное удовольствие использоваие этой программы на моем Mac. Программа запускается прямо из терминала и позволяет не только конвертировать шрифты из ttf в eot, но сжимать их, удаляя ненужные биты и байты, и даже удаляя ненужные глифы (символы).
Скачать fontoptimizer можно здесь: fontoptimizer

Для того, чтобы сконвертировать шрифт из ttf в eot с помощью fontoptimizer достаточно вызвать в терминале (или в консоли)

Convert-eot.pl —ttf-to-eot infile.ttf outfile.eot

Оптимизация размера файла шрифта для Web

Файлы шрифтов могут быть достаточно громоздкими. От нескольких сотен килобайт и до нескольких мегабайт. И их размер очень сильно влияет на скорость загрузки сайта. Поэтому логично оптимизировать размер шрифтов. Как? Очень просто:

  1. Удалить лишние глифы (символы) из шрифта
  2. Удалить лишнюю информацию

Это можно сделать с помощью той же утилиты fontoptimizer.
Всё что тебе понадобится это:

  1. Файл с исходным шрифтом
  2. Файл с символами, которые должны остаться в файле шрифта в кодировке UTF8

Subset.pl —charsfile chars.txt infile.ttf outfile.ttf

Где chars.txt – файл с набором символов, которые нужно оставить в файле шрифта (файл с символами обязательно должен быть в кодировке UTF8), ну а infile.ttf и outfile.ttf – входящий и выходящий файлы соответственно.
Во время тестирования с помощью fontoptimizer удалось получить из 450Kb-го файла 12Kb-й, что очень ускорило загрузку страницы.

Сервис для автоматического создания font-face, с оптимизацией и конвертацией ttf во все возможные форматы

Если лень делать все ручками, и если это не интересно или просто нет времени, то к твоим услугам отличный сервис, который сам производит оптимизацию шрифтов, конвертирует TTF в EOT, SVG, WOFF и другие форматы, которые можно загружать через font-face, и на выходе выдает архив со всеми файлами, и полностью прописанными правилами font-face для твоего шрифта. Разве не здорово?
Сервис доступен по адресу: www.fontsquirrel.com
Думаю в настройках ты разберешься:)

О недостатках

При всех преимуществах у подключения сторонних шрифтов на страницу есть 2 существенных недостатка:

  • во-первых, дополнительный файл шрифта – это дополнительные килобайты, и лишние секунды на загрузку
  • во-вторых, не во всех ОС есть хорошее сглаживание шрифтов (например в Windows XP оно просто ужасно), из-за чего по-настоящему красивый и качественный шрифт может выглядеть как-то не естественно и натянуто (особенно при больших кеглях). В таких случаях лучше подойдут векторные картинки SVG или растровые картинки, которые растягиваются средствами броузера, и выглядят достаточно гладко.

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

От автора: «Перед написанием данной статьи, я пролистал довольно много информации по теме «Шрифты». И очень выразительно запомнил один момент, многие отрицательно отзываются о подключении нестандартных шрифтов. Точнее, не рекомендуют, мол это неправильно, сильная нагрузка и тому подобное.

На самом дели такое высказывание, во многих случаях расценивается, как навязывание своего мнения, или даже передача чужого от себя. Стоить отметить, что абсолютно любое дополнительное подключение дает нагрузку на сайт, следуя таким доводом — смело можно сносить пол сайта. Если есть более весомые аргументы в пользу отказа от шрифтов, то да, пожалуйста… а так. необходимо экспериментировать.»

Что значит нестандартный шрифт?

Это шрифт, который по умолчанию отсутствует в программном обеспечении (Windows, Linux и т. д.). Следовательно, если у пользователя в его ПО не окажется соответствующего шрифта, то он автоматически задействует стандартный шрифт из системы. Тем самым нарушается первоначальная идея автора в передаче нужного характера дизайна.

Подключение своих шрифтов на сайт

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

Пояснение: свойство font-family определяет семейство шрифта, а src: local осуществляет проверку установки шрифта у читателя. Но такая возможность, что шрифт окажется установлен, выпадает один раз на миллион. Поэтому строка «проверка» не столь обязательная, а вот последняя url «путь» должна находиться непременно (т.к. это путь к самому шрифту, который непосредственно и будет загружаться на сайте).

Кроссбраузерность шрифтов

Следует упомянуть о поддержки браузеров так, как может возникнуть нестыковка. Все популярные браузеры, последних версий, отлично взаимодействует с подключением шрифтов в формате ttf . А говоря о поздних версиях, в частности, IE, а также устройства от Apple, то могут быть трудности. Эту проблему решает специальные сервисы, позволяющие генерировать формат шрифта для каждого браузера в отдельности.

На мой взгляд, это крайняя необходимость. Поясню: IE ниже 10 версии уже требует дополнительных действий. Но процент его использования совсем невелик. А насчет мобильных устройств Apple, то здесь все сводится к минимализму. определенно должна быть быстрее и легче чем обычная.

Формат Explorer Chrome Firefox Safari Opera IOS Android
TTF 9.0+ 4.0+ 3.5+ 3.1+ 10.0+ X 2.2+
OTF 9.0+ 4.0+ 3.5+ 3.1+ 10.0+ X 2.2+
EOT 6.0+ X X X X X X
WOFF 9.0+ 5.0+ 3.6+ 5.1+ 11.1+ 5 X
WOFF2 X 36.0+ 35.0+ X 26.0+ X X
SVG X 4.0+ X 3.2+ 9.0+ 3.1+ X

Форматы шрифтов

Шрифты, как и у многих других файлов, имеют различные расширения (форматы). В кратком обзоре рассмотрим какие именно…

TTF (TrueType Fonts) – самый распространенный формат шрифта в операционных системах. Разработан был еще в конце 80-х, по одному источнику, компанией Apple, а по-другому, совместно с Microsoft. Чаще всего используют именно этот формат шрифта для подключения на веб-страницу. Исходя из поддержки всеми популярными браузерами последних версий.

OTF (OpenType Fonts) – модификация своего предшественника (TrueType) с более расширенными возможностями. Больше символов и меньше веса. Официально был представлен в 96-году компанией Adobe разработан был совместно с Microsoft.

WOFF (Web Open Font Format) – создан на основе двух первых шрифтов с некоторыми изменениями.

WOFF 2.0 (Web Open Font Format) – мелкие изменения в сжатии.

EOT (Embedded OpenType) – создан компанией Microsoft в 2007 году исключительно для браузеров Internet Explorer.

SVG Fonts – поддержка iOS Safari.

Сервис для конвертации шрифтов

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

Слева в сценарии выбираем кириллицу.

Определяемся с выбором шрифта и кликаем на иконку «быстрое использование».

На открывающей странице имеется информация, разбитая по шагам:

1. Выбрать стиль шрифта (normal, bold и т.д.);
2. Выбрать поддержку (латынь, кириллица и т.д.);
3. Способы подключения (подробнее чуть ниже);
4. Интеграция шрифта.

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

1. Стандартное подключение через тег обычно прописывается между тегами (WordPress файл: header.php ).

2. Импортирование в каскадную таблицу через правило @import (WordPress файл: style.css ).

3. Подключение через JavaScript в отдельный файл или также между тегами .

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

Font-family: "Comfortaa", cursive;

На этом все! Надеюсь, вы нашли что-то полезное в этом материале для себя. Если остались вопросы прошу задавайте их в комментариях, не стесняйтесь).

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.

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

  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст (курсив ). Аналогичный ему тег ;

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

font-family: имя шрифта [, имя шрифта[, . ]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении ( xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах (pt ).

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

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

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

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