Способы задания шрифтов в css

Содержание:

Сложный способ подключения веб-шрифта
Семейства шрифтов в CSS
А теперь пришел час css хвастаться своими умениями
Подключение системных шрифтов к сайту
- Подключение шрифтов в CSS файле
- Подключение шрифтов в HTML документе
Правило
Оптимизация размера файла шрифта для Web
Системные, стандартные, безопасные шрифты
Шрифты используемые в веб-дизайне
Как подключить нестандартный шрифт в CSS
Установка шрифта с помощью @font-face.
Как подключить шрифт CSS?
Правовой вопрос использования шрифтов
«Печеньки»

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

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

В тех местах, где применены теги или , браузер IE8 будет сам делать из шрифта PTSans начертания и , а не подключать уже готовые шрифты в этих начертаниях. Результат такой “самодеятельности” будет плачевным.

Выходом из положения будет применение различных имен шрифта в директиве . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:

Обратите внимание на отсутствие правил и во всех четырех директивах. Такой код выглядит даже более понятным и логичным, нежели первый вариант

И вроде бы все хорошо, но задавайте теперь рассмотрим простой пример параграфа с тегами и , к которому следует применить шрифт PTSans.

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам , , ссылке ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?

Применять или не применять второй способ подключения веб-шрифтов — это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Семейства шрифтов в CSS

Виды шрифтов в css

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

sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
cursive — шрифты, имитирующие рукописный текст.
fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

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

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h1>CSS свойство font-family</h1>
    <p class="exserif">Абзац использующий шрифт Times New Roman.</p>
    <p class="exsansserif">Абзац использующий шрифт Arial.</p>
  </body>
</html>

Попробовать »

Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах

С этой темой смотрят:

Отступ текста в CSS
Выравнивание текста в CSS
Цвет и тень текста в CSS
CSS стиль и размер шрифта
Стандартные (безопасные) шрифты

А теперь пришел час css хвастаться своими умениями

Свойства шрифтов в css

Несмотря на целый набор разнообразных тегов, предусмотренных html, css является более удобным и гибким инструментом для оформления внешнего вида шрифтов.

Сначала разберем font. Это универсальный параметр, благодаря которому одновременно можно задать несколько значений. К тому же каждый параметр оперирует своими ключевыми словами.

Название свойства	Ключевые слова
font-family	Можно устанавливать как стандартные семейства шрифтов: · без засечек (sans-serif); · антиквенные (serif); · декоративные (fantasy); · курсивные (cursive); · моноширинные (monospace), так и стандартные существующие стили (Arial, Calibri и т.д.).
font-size	Для установки абсолютной размерности символов используются обозначения: xx-small, x-small, small, medium, large, x-large, xx-large. Также можно задать уникальное значение.
font-weight	Отвечает за насыщенность текстового начертания. Изменяется в диапазоне или задается при помощи слов normal, bold, lighter или bolder.
font-variant	Задает представление буквам, используя ключевые слова: small-caps, normal или inherit.
font-style	Устанавливает обычное (normal), наклоненное (oblique), курсивное (italic) начертание или наследует родителя (inherit).
font-stretch	Указывает плотность расположения букв. Можно указать такие значения: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed и inherit.

Свойство text-decoration помогает украсить текст дополнительными элементами, такими как подчеркивание (underline), зачеркивание (line-through), надчеркивание (overline), а также наследовать параметры родителя (inherit) или отменить все оформление (none).

А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text- shadow) и с контуром вокруг (border- color). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity для задания прозрачности подзаголовку.

<!DOCTYPE HTML>
<html>
 <head>
  <meta content="text/html; charset=utf-8">
  <title>Форматирование текста при помощи свойств css</title>
  <style>
  h1 {
    border-color: blue white; 
    border-style: solid;
    font-family: Calibri, fantasy;
    color: gold;
    text-shadow: black 3px 0 9px;
   }
   h3 {
    font-size: x-large;
    opacity: 0.6;
    color: blue;
   text-decoration: underline;
   }
  em, strong {
   color: red;
   text-decoration: overline;
   }
  </style>
 </head>
 <body align = "center">
<h1>Название <big>первого</big> заголовка</h1>
  <h3>Полупрозрачный подзаголовок!</h3>
<p>Здесь расположен <em>первый</em> абзац <strong>текущего</strong> примера. Для наглядности <i>эти слова</i> будут написаны курсивом.</p>
 </body>
</html>

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

Прочитано: 735 раз

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

Скачиваем и устанавливаем шрифты для microsoft word. самая полная коллекция word-овских шрифтов, с инструкцией по установке

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

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

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

body {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к всему документу */
font-size: 16px; /* дополнительно устанавливаем размер шрифта */
font-weight: 400; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */
}

Назначаем шрифт для заголовков (здесь аналогично, только устанавливаем значение жирности, для выделения заголовков):

h1,h2,h3,h4,h5,h6{
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к заголовкам */
font-weight: 600; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
}

Присваиваем шрифт только параграфам:

p{
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к параграфам, можно применять к спискам li, блокам div, формам form и другим элементам */
font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */
}

Что-бы присвоить шрифт только к определенному параграфу, или блоку, нужно сначала в документе назначить класс этому блоку

<p class="font">Здесь параграф с назначаемым шрифтом</p>

А в таблице CSS прописать следующий код:

.font{
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к определенным параграфам, можно применять к отдельным спискам li, блокам div, формам form и другим элементам */
font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */
}

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

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

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

Подключаем шрифты в заголовке, между тегами . Для этого в html документ добавьте такой код:

<head>
<!-- Начало кода -->
<style>
body {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к всему документу */
font-size: 16px; /* дополнительно устанавливаем размер шрифта */
font-weight: 400; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */
}
</style>
<!-- Окончание кода -->
</head>

Здесь я повторяться не буду. Все аналогично подключению в CSS файле.

Подключение шрифтов inline, непосредственно к элементам сайта. Приведу несколько примеров:

Подключаем шрифт к параграфу

<p style="font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-size: 16px; font-weight: 400;">Здесь параграф с текстом</p>

Выделяем жирным шрифтом отдельное слово и присваиваем отдельный от основного шрифт

<p>Здесь параграф с текстом, а это <span style="font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-size: 16px; font-weight: bold;">слово</span>, которое нужно выделить жирным</p>

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

<a href="#" style="font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-size: 16px; font-weight: bold;">Здесь ссылка</a>

Аналогично назначаем шрифты любому html тегу.

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

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

Правило

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

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

Теперь нужно сделать так, чтобы браузер самостоятельно загрузил наш шрифт. Для этого нужно дать ему указание. Используем директиву @font-face. Команда у нас будет выглядеть следующим образом:

@font-face {

font-family: MyUniqueFont;

src: url(‘fonts/ font.ttf’);

}

Команда font-family отвечает за то, чтобы шрифт получил свое имя и после его можно было использовать в написании стиля. Во второй строке имеется указание пути, по которому браузер должен найти стиль и подключить его. Это не универсальный адрес. В зависимости от того, куда вы поместили файл со шрифтом, будет отличаться и этот путь. Так вы узнаете, как подключить шрифт CSS из папки.

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

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

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

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

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

А далее все проще простого:

subset.pl --charsfile chars.txt  infile.ttf outfile.ttf

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

Системные, стандартные, безопасные шрифты

Любой браузер отображает только те шрифты, которые присутствуют в операционной системе компьютера. Поэтому их и называют системными и устанавливаются по умолчанию вместе с операционной системой.

А безопасными шрифтами их называют, потому что с большой вероятностью они отобразятся в браузере у большенства посетителей сайта.

Но вся проблема заключается в том, что в разных операционных системах устанавливаются разные наборы шрифтов. Посмотреть наборы поставляемых шрифтов вместе с операционной системой можно на официальных страницах Windows, Mac OS. А в Unix/Linux вообще нет стандартного набора.

Для того, чтобы интернет страничка отображалась в соответствии с задумкой дизайнера, в CSS установили свойство шрифтов, которое называется

Свойство шрифтов font-family

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

Родовые семейства:

serif — шрифты с засечками на концах;
sans-serif — шрифты без засечек;
cursive — шрифты курсивного начертания;
fantasy — декоративные шрифты;
monospace — моноширинный шрифт(с буквами одинаковой ширины).

Таким образом просто подбираются похожие шрифты из разных операционных систем и через запятую подключаются к интернет странице.

Вот как пример, просто для визуального восприятия. К этому примеру мы еще вернемся, когда будет рассматриваться непосредственно подключение шрифтов.

Просто проследите логику и все станет предельно ясно.

body {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}

Разберем написанное:

OC Windows — Arial;
OC Mac OS — Helvetica CY;
OC Unix/Linux — Nimbus Sans L;
Родовое семейство — sans-serif.

Так называемые безопасные шрифты

На основе OC Windows был составлен список из нескольких безопасных шрифтов.

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Все эти шрифты установлены на Mac OS X, Windows, и у многих пользователей Unix/Linux, у которых установлен пакет Core fonts for the Web.

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

Таблица соответствия и принадлежности шрифтов к определенному семейству:

Windows	Mac OS	Unix/Linux	Родовое семейство
Arial Black	Helvetica CY	Nimbus Sans L	Sans-serif
Arial	Helvetica CY	Nimbus Sans L	Sans-serif
Comic Sans MS	Monaco CY	* (см. ниже)	cursive
Courier New	* (см. ниже)	Nimbus Mono L	Monospace
Georgia	* (см. ниже)	Century Schoolbook L	Serif
Impact	Charcoal CY	* (см. ниже)	Sans-serif
Times New Roman	Times CY	Nimbus Roman No9 L	Serif
Trebuchet MS	Helvetica CY	* (см. ниже)	Sans-serif
Verdana	Geneva CY	DejaVu Sans	Sans-serif

* При подключении шрифтов, можете смело опираться на нее. Таблица поддерживает кириллические символы, русский алфавит.
Саму таблицу я взял в этой статье.

Шрифты используемые в веб-дизайне

Arial

Компактный шрифт, имеет преимущество благодаря высоте букв.

Tahoma

Подходит больше для технической тематики, имеет средне-широкие буквы.

Verdana

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

Trebuchet MS

Не совсем подходит для чтения, даже при 12 px. приходится напрягать глаза.

Times New Roman

Шрифт имеет хорошую читаемость, используется во всех редакторах. Но при 12 px выглядит мелко.

MS Sans Serif

Системный шрифт Windows, хорошо читается при разных режимах.

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

Так какой все таки шрифт считается самым оптимальным?

Тот, от которого меньше устают глаза. По мнению ученых из Лаборатории зрительной эргономики США, это шрифт Verdana. Врачи утверждают, что он максимально снижает напряжение глазных мышц при чтении.

Американские специалисты отмечают: шрифт Verdana 10-13 кегля наиболее комфортен для восприятия с экрана. Преимущества шрифта — отсутствие засечек, увеличенный межстрочный интервал, большая высота строчных букв без выносных элементов и четкие различия между знаками схожего начертания (такими как i/I/L/l/1).

Создатель шрифта Verdana — художник Мэттью Картер (Matthew Carter). Он разработал данный шрифт для компании Microsoft в 1996 году. Целью было создание шрифта, который легко читается с экрана даже при малом размере букв. Сегодня Verdana входит во все версии Windows, Office и Internet Explorer для операционных систем Windows и Macintosh. Плюс все перечисленные выше шрифты.

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

Google Fonts — один из самых крупных архивов реально бесплатных шрифтов с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию.

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

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

Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты.
Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Чтобы их
найти, нужно в поисковике написать — шрифты. Файл шрифта нужно скачать и присоединить к странице.
Некоторые шрифты являются платными. Об этом должна быть информация на странице,
с которой Вы скачиваете шрифт.

Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой
набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается
страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат
woff. Он должен работать в большинстве современных браузеров. Также распространены ttf и otf.

Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны
быть два свойства: в свойстве font-family указывается название шрифта, под которым
он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве
src указывается путь к файлу шрифта.

После этого, шрифт можно
использовать для любого селектора. В свойстве font-family нужно указать название,
которое Вы выбрали для шрифта.

Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и
страница. Шрифт я назову Nfont.

Стиль:

7891011121314
1516

@font-face
  {
  font-family: Nfont;
  src: url("unineue.woff");
  }
#text
  {
  font-family: Nfont;
  font-size: 40px;
  }

HTML код:

31	<div id="text">Текст с нестандартным шрифтом</div>

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

789101112

@font-face 
  {
  font-family: Nfont; 
  src: url("unineue.woff") format("woff"),
  url("unineue.ttf") format("truetype");
  }

Установка шрифта с помощью @font-face.

Первым делом нужно подключить шрифт с помощью @font-face – в файле css нужно написать такую строчку :

@font-face { font-family: Название шрифта; src: url(https://ваш_сайт.ru/путь_до_файла_шрифта.ttf); }

С нашим примером… а мы будем любой например шрифт терминатор и подключение шрифта будет выглядеть таким образом:

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/путь до файла/terminator.ttf); }

Здесь… есть один подводный камень, о который многие стукаются!

Название шрифта очень часто не совпадает с тем, как может отображаться название файла шрифта скачанного…

Поэтому … скачали шрифт… на комп… кликаем по шрифту… и нам нужно вот это:

ИМЯ ШРИФТА

Что мы и выделили в строке подключения @font-face(см.пункт 1)

Ну и собственно — теперь нам нужно… какой-то стиль, чтобы к нем у приклеить данный шрифт…

Давайте соорудим вот такую конструкцию:

<div class=»example_font»>Здесь текст, example of text</div>

Далее нам понадобится файл css — можно написать прямо под подключением

div.example_font {font-family: ‘Terminator Cyr’ ; color: red; }

Если вы подключали шрифт в файле css, то у вас должно получиться…

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/путь до файла/terminator.ttf); }

div.example_font {font-family: ‘Terminator Cyr’ ; color: red; }

Если вы подключали шрифт в конкретном файле, то у вас должно получиться…

<style>

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/путь до файла/terminator.ttf); }

div.example_font {font-family: ‘Terminator Cyr’ ; color: red; }

</style>

Здесь текст, example of text

Вас может еще заинтересовать список тем : #CSS | #FONTS | Последняя дата редактирования : 2020-11-14 13:43
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no

Как подключить шрифт CSS?

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

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

Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff

3.Скачанный файл нам нужно загрузить в папку fonts в корневом каталоге сайта. Если же ваш сайт сделан на WordPress или другой CMS, то вам нужно загрузить файл в папку fonts, которая находится в папке с темой оформления.

4.Далее открываем css-файл стилей сайта или используемой темы. Это можно сделать, подключившись к сайту по FTP в текстовом редакторе NotePad++ или его аналоге.

5.Затем нам нужно подключить шрифт CSS-правилом font-face

Для этого в самом начале файла стилей style.css, после комментария, содержащего информацию о теме, вставляем следующий код:

PHP

@font-face {
font-family: ‘Font Name’;
src: url(‘fonts/ Font Name.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

1
2
3
4
5
6

@font-face{

font-family’Font Name’;

srcurl(‘fonts/ Font Name.ttf’)format(‘truetype’);

font-weightnormal;

font-stylenormal;

}

Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.

Вот примеры подключения в CSS наиболее популярных форматов:

PHP

src: url(‘fonts/ Font Name.woff’) format(‘woff’);
src: url(‘fonts/ Font Name.eot’) format(‘eot’);
src: url(‘fonts/ Font Name.svg’) format(‘svg’);

1
2
3

srcurl(‘fonts/ Font Name.woff’)format(‘woff’);

srcurl(‘fonts/ Font Name.eot’)format(‘eot’);

srcurl(‘fonts/ Font Name.svg’)format(‘svg’);

6.Теперь наш шрифт подключен, и мы можем его использовать

Для того, что бы применить его к определенному блоку, нам нужно в css-стилях для класса этого блока дописать свойство font-family:

PHP

font-family: ‘ JuraBook ‘;

font-family’ JuraBook ‘;

Например:

PHP

.main-navigation ul li a {
font-family: ‘JuraBook’;
font-size:18px;
}

1
2
3
4

.main-navigationullia{

font-family’JuraBook’;

font-size18px;

}

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

можно использовать в Веб
нельзя использовать в Веб

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

The League of Movable Type (https://www.theleagueofmoveabletype.com/)
FontSquirrel (http://www.fontsquirrel.com/)
Google Fonts (https://www.google.com/fonts)
The Open Font Library (http://openfontlibrary.org/ru)
Fontex.org (http://fontex.org/)
Exljbris Font Foundry (http://www.exljbris.com/)

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

Единственное ограничение этого сервиса — он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

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

EOT — формат только для Internet Explorer 8 и ниже
WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
TTF — сравнительно большой по размеру шрифт и достаточно устаревший
SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

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

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

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

Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.

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

The Big List of Flat Icons & Icon Fonts
HTML for Icon Font Usage
Icon Fonts are Awesome
Шрифтовые иконки и сервис IcoMoon

Способы задания шрифтов в css

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

Семейства шрифтов в CSS

А теперь пришел час css хвастаться своими умениями

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

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

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

Правило

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

Системные, стандартные, безопасные шрифты

Свойство шрифтов font-family

Так называемые безопасные шрифты

Таблица соответствия и принадлежности шрифтов к определенному семейству:

Шрифты используемые в веб-дизайне

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

Установка шрифта с помощью @font-face.

Как подключить шрифт CSS?

Правовой вопрос использования шрифтов

«Печеньки»