Шрифты в CSS. Основы CSS для начинающих. Урок №6

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

Стиль шрифта в CSS

Свойство «FONT-STYLE»
Если вы захотели поменять стиль шрифта, а именно, сделать текст курсивом или просто наклонным, то воспользуйтесь правилом «font-style».

Значение:

• normal - нормальный шрифт;
• italic - курсив;
• oblique - наклонный шрифт.

Пример:

h1{
font-style:normal; /* нормальный шрифт */
}
h2{
font-style:italic ; /* курсив */
}
h3{
font-style:oblique; /* наклонный шрифт */
}

Результат:

Толщина шрифта в CSS

Свойство «FONT-WEIGHT»
Если вы хотите сделать шрифт жирным, используйте правило «font-weight».

Значение:

• normal - нормальная жирность
• lighter - светлое начертание
• bold - полужирный
• bolder– жирный

Пример:

h1{
font-weight: normal; /* нормальная жирность */
}
h2{
font-weight: lighter; /* светлое начертание */
}
h3{
font-style:bold; /* полужирный */
}
p {font-weight:bolder; /* жирный */}

Результат:

Можно указать толщину шрифта и обычными цифрами от 100 до 900.

Значение:

• 100 — светлый шрифт,
• 900 — самый жирный

Пример:

p {font-weight:900; /* жирный */}

Результат:

Размер шрифта в CSS

Свойство «FONT-SIZE»
Шрифт можно менять по размеру. Для этого используйте правило «font-size».

Значение задается в «px» и «%».

Пример:

h1{font-size: 120%; /* размер шрифта 120% */}
p {font-size: 36px; /* размер шрифта 36px */}

Результат:

Шрифты в CSS

Свойство «FONT-FAMILY»
На каждом компьютере установлены стандартные шрифты, такие как «Times New Roman», «Arial» или «Verdana». Выбор шрифта зависит от вкуса каждого, но потом он влияет на то, как внешне будет выглядеть сайт.
Чтобы указать шрифт, воспользуйтесь правилом «font-family».

Пример:

h1 {
font-family: Verdana; /* шрифт Verdana*/
}

Можно задавать в правилах несколько шрифтов. Это на тот случай, если у пользователя нет первого шрифта, тогда подключится второй.

Пример:

h1
{
font-family: "Times New Roman", Georgia, Verdana; /*шрифты*/
}

Обратите внимание, шрифт «"Times New Roman"» написан в кавычках (" ").
В кавычки берутся те шрифты, в которых название состоит из двух и более слов и есть пробел между словами.

Семейство шрифтов
Можно в правило «font-family» прописать и целое семейство шрифтов.
Наверное, вы меня не совсем поняли. Сейчас попробую объяснить.
Существует множество видов шрифтов, которые образуют так называемые семейства.
Существует всего пять семейств шрифтов:

• sans-serif – шрифты без засечек (как Arial).
  
• serif- семейство шрифтов с засечками (как Times New Roman).
  
• monospace – моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
  
• cursive–курсивные шрифты.
  
• fantasy - художественные и декоративные шрифты.
  

Пример:

h1 {
font-family: cursive; /*шрифты*/
}

А можно и вот так:

h1 {
font-family:"Times New Roman", Georgia, Serif; /*шрифты*/
}

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

Свойство «@FONT-FACE»
Бывает такой момент, что вам просто необходимо установить на сайт нестандартный шрифт, то есть, шрифт, который не установлен по умолчанию у пользователя на компьютере.
Правило «@font-face» позволяет нам импортировать внешний файл шрифтов в документ. После импортирования, мы можем использовать нестандартный шрифт как обычный через правило «font-family».
Залейте любой нестандартный шрифт формата «ttf» в папку вашего сайта рядом с файлом css, это для того, чтобы вы не запутались и правильно написали путь к шрифту. Для примера я возьму нестандартный шрифт с именем «DS-UncialFunnyHand-Medium.ttf».
Вот пример подключения нестандартного шрифта.

@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* Имя шрифта */
src: url(DS-UncialFunnyHand-Medium.ttf); /* Путь к файлу со шрифтом */
}

Разъяснения:

• font-family: ...;- здесь пишем имя шрифта;
• src: url(...); -  тут указываем путь к файлу со шрифтом который будет загружаться с сайта.

Вот полный пример с подключением нестандартного шрифта и его использование.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>подключение нестандартных шрифтов</title>
<style>
@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* Имя шрифта */
src: url(DS-UncialFunnyHand-Medium.ttf); /* Путь к файлу со шрифтом *
}

p{
font-family: "DS-UncialFunnyHand-Medium"; /* используем нестандартный шрифт */
}
</style>
</head>
<body>
<p>нестандартный шрифт</p>
</body>
</html>

Результат:

Жду вас на следующих уроках.
Удачи!