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

CSS

скачать бесплатно – ” 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. Как задать шрифт в css?

Вот и подключили только что вы нестандартный шрифт к вашему сайту. Далее, вы используете этот шрифт как обычно вы использовали для любых текстовых элементов сайта, через 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 ДЛЯ ЧАЙНИКОВ

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий