Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

Использование нестандартных шрифтов на сайте
с помощью CSS.



чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - " HTML на примерах, всё доступно и просто (для начинающих)"
- - -чайник, HTML ДЛЯ ЧАЙНИКОВ- - - >> с к а ч а т ь <<

чайник, HTML ДЛЯ ЧАЙНИКОВ скачать бесплатно - "Как создать классный сайт!
От начала и до конца"
---чайник, HTML ДЛЯ ЧАЙНИКОВ--->> с к а ч а т ь <<

Использование нестандартных шрифтов на сайте с помощью CSS.

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



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

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


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

Нам нужен шрифт в формате ttf, других я вам не рекомендую. Скачайте этот шрифт для примера, он называется
DS-UncialFunnyHand-Medium.ttf. Установите этот шрифт в папку img, там где лежит ваш сайт, а если вы используете Wordpress, то в папку вашей темы.
Откройте файл стилей style.css. Добавьте следующий код в ваш файл style.css. Если вы используете Wordpress, тогда файл стилей style.css должен быть текучей темы.

@font-face
 {
    font-family: DS-UncialFunnyHand-Medium;
/* имя шрифта для CSS правил */
    src: local("DS-UncialFunnyHand-Medium"),
/* проверяем наличие шрифта в ОС пользователя */
         url(img/DS-UncialFunnyHand-Medium.ttf);
/* если шрифт не установлен, тогда загружаем его по указанному пути */
  }

 
Объясняю.

font-family: DS-UncialFunnyHand-Medium - это имя шрифта для CSS правил.
src: local("DS-UncialFunnyHand-Medium") - это проверка наличие шрифта на компьютере пользователя
url(img/DS-UncialFunnyHand-Medium.ttf) - если шрифт у пользователя на компьютере не установлен, тогда шрифт будет загружается с сайта по указанному пути .
DS-UncialFunnyHand-Medium.ttf – это название шрифта, а ttf, это его расширение.

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

Например.

h1
{
font-family:
DS-UncialFunnyHand-Medium;
}

Все заголовки H1 на вашем сайте будут отображаться шрифтом DS-UncialFunnyHand-Medium. Вы теперь сможете этот шрифт использовать к любому элементу, р, h1- h6 и т.д.

С помощью CSS вы сможете быстро использовать нестандартный шрифт на сайте WordPress, HTML или PHP



 

 

 

 

Можно и таким способом:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css">

@font-face
{
font-family:
DS-UncialFunnyHand-Medium; /* имя шрифта для CSS правил */
src: local("
DS-UncialFunnyHand-Medium"), /* проверяем наличие шрифта в ОС пользователя */
url(
img/DS-UncialFunnyHand-Medium.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

h1
{
font-family:
DS-UncialFunnyHand-Medium;
}
</style>


<title>Untitled Document</title>
</head>

<body>

<h1>
нестандартный шрифт
</h1>

</body>
</html>

Вот что получилось

нестандартный шрифт

THE TND чайник, CSS  ДЛЯ ЧАЙНИКОВ


Понравилась статья? - добавь ее себе!


 

 



сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012