• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → CSS → Правило CSS @font-face

Правило 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 уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru