Отправка сообщения






Добро пожаловать!

Как подключить шрифт в CSS?

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

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

Для того чтобы подключить шрифт в CSS, используется правило:

@font-face { /* свойства шрифта */ }.

Конструкция @font-face может содержать несколько свойств, которые определяют параметры шрифта, к примеру, такие как font-family, font-size, font-style. Основное свойство это ссылка на сам файл шрифта, указывается в виде src: путь_к_файлу_шрифта. Путь к файлу может быть относительным, либо абсолютным.

Пример, как подключить шрифт в CSS:

@font-face {
	font-family:'DINProLt';
	font-style:lighter;
	src:url(fonts/DINPro-Light.woff) format('woff');
}
@font-face {
	font-family:'DINProB';
	font-style:bolder;
	src:url(fonts/DINPro-Black.woff) format('woff');
}

Далее мы можем воспользоваться им для оформления:

p {  font-family:DINProLt;  }
b { font-family:DINProB; }

В целом это будет выглядеть таким образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Как подключить шрифт в css?</title>
<style>
	@font-face {
		font-family:'DINProLt';
		font-style:lighter;
		src:url(fonts/DINPro-Light.woff) format('woff');
	}
	@font-face {
		font-family:'DINProB';
		font-style:bolder;
		src:url(fonts/DINPro-Black.woff) format('woff');
	}

	p { font-family:DINProLt; }
	b { font-family:DINProB; }

</style>
</head>
<body>
	<p>Этот текст будет оформлен шрифтом, который был присвоен тегу p</p>
	<b>Этот текст будет оформлен шрифтом, который был присвоен тегу b</b>
</body>
</html>

Просмотреть рабочий пример вы можете по этой ссылке.

Добавил: htmaker, 22.07.2016 г.
 
плохослабосойдетхорошоотлично (Еще не оценили)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Форум digital-planet.info

Комментарии

  • Загрузка...

Наверх