Правило CSS @font-face

Правило CSS @font-face отвечает за подключение своих или внешних шрифтов на странице сайта. Предварительно рекомендую прочитать про свойство CSS font

Правило CSS @font-face

@font-face: {
font-family: NameFont;
font-size: Xpx;
font-style: Style;
src: url(usershrift.ttf);
}

Где:

  • font-family – свое название шрифта
  • font-size – размер шрифта
  • font-style – стиль шрифта
  • src:url(addr) – адрес где лежит подключаемый шрифт. В рассмотренном примере он лежит в корне под именем usershrift.ttf

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

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

  • EOT
  • TTF
  • OTF
  • CFF
  • AFM
  • LWFN
  • FFIL
  • FON
  • PFM
  • PFB
  • WOFF
  • SVG
  • STD
  • PRO
  • XSF





Примечание

Не все браузеры поддерживают все форматы шрифтов. Поэтому нужно через запятую перечислять несколько вариантов форматов шрифтов. Например, IE поддерживает только формат eot. Синтаксис @font-face допускает подключать через запятую несколько форматов:

@font-face: {
font-family: NameFont;
font-size: Xpx;
font-style: Style;
src: url(usershrift.ttf),
url(usershrift.eot);
}

Пример: как сделать свой шрифт на html

<html>
<head>
<style>
.@font-face{
font-family: svoy_shrift1;
font-size: 14px;
src: url(svoy_shrift1.ttf);
}
P{
font-family: svoy_shrift1;
}
</style>
</head>
<body>
<p>Этот текст будет выведен с использованием своего шрифта</p>
</body>
</html>

Необычные шрифты для сайта

Шрифт можно создать самостоятельно через специальные онлайн генераторы шрифтов:

  • online-letters.ru
  • gfto.ru

Помимо этого Google предоставляет целую коллекцию шрифтов на странице fonts.google.com.




Читайте также:

• Свойство text-transform

• Свойство text-align

• Свойство vertical-align

• Свойство text-indent

• Свойство font

• Свойство text-decoration

• Свойство cursor (Курсоры)

• Все про CSS border

• Все про CSS background

• Все про CSS transition

• CSS position absolute


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.