Google-Translate Войти на сайт
 
МЕНЮ САЙТА
РАЗДЕЛЫ
Уроки Ucoz [13]
Уроки Borda.ru [13]
Уроки Photoshop [32]
Уроки Adobe Illustrator [1]
Уроки HTML и CSS [13]
JAVA-Скрипты [15]
Веб-дизайн [17]
Создание и продвижение сайта [92]
Интересные статьи [279]
ВЕЛОЛЮБИТЕЛЯМ!
Ярмарка Мастеров - ручная работа, handmade
КОНТАКТЫ
ICQ: 177700574
skype: k-dezign
mail: k-dezign@mail.ru
Мы Вконтакте
НАШИ ДРУЗЬЯ
Быстрая и недорогая раскрутка сайта
Регистрация в каталогах
Сибирский рубеж - автоэмали оптом и в розницу. Подбор автоэмалей PROFIX.
Хорошие новости о животных
WOlist.ru - каталог качественных сайтов Рунета
FONWEB.RU - Веб-дизайн
Интересные статьи
Клипарт на прозрачной основе


ЗАРЕГИСТРИРОВАТЬ СВОЙ САЙТ
СТАТИСТИКА
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная | Полезные статьи
Главная » Статьи » Уроки HTML и CSS

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

Подключить свой шрифт к сайту нам поможет CSS.

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

Синтаксис
@font-face { свойства шрифта }

Значения
Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI), где URI — относительный или абсолютный путь к файлу.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@font-face</title>
  <style>
   @font-face {
    font-family: Pompadur; /* Имя шрифта */
    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
   }

   P {
    font-family: Pompadur;
   }

  </style>
 </head>
 <body>
  <p>Протяженность варьирует дорийский микрохроматический интервал,
     но если бы песен было раз в пять меньше, было бы лучше для всех.</p>

 </body>
</html>



Браузеры
Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).
Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно.



Источник: http://htmlbook.ru
Категория: Уроки HTML и CSS | Добавил: Белая_Кошка (09.08.2012)
Просмотров: 27028 | Комментарии: 2 | Теги: свой шрифт на сайте, как поставит на сайт свой шрифт | Рейтинг: 0.0/0


Всего комментариев: 2
1 VBIFonics  
А ведь можно использовать Google Web Fonts, там и инструкция по встраиванию есть:)

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

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Веб-студия "К-Дизайн" © 2009-2024
Контакты
ICQ: 177700574
skype: k-dezign
mail-агент: k-dezign@mail.ru

Счетчики
Яндекс цитирования
Работа
Создание сайтов и форумов
Порядок работы с заказами
Порядок оплаты заказов
Бонусы
Бесплатные кнопки для форумов
Бесплатные дизайны для форумов
Готовые шаблоны для сайтов
Уроки фотошоп
Уроки CMS Ucoz