Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Shrifty-css

Задание шрифтов в CSS с помощью свойств font

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

Рассмотрим каждое из этих свойств по отдельности

Свойство font-family

Дело в том что все шрифты делятся на семейства. Да и в переводе с английского font-family означает семейство шрифта. В основном в CSS используют три основных вида семейства, это — Serif, Sans-serif и Monospace.

Так как же используется свойство font-family? Да очень легко и просто. Например, для селекторов h1 и p мы можем прописать следующее:

h1 {font-family: "Times New Roman", serif;}
p {font-family:arial, verdana,  sans-serif;}

А теперь по порядку. Для заголовка h1 будет использоваться шрифт «Times New Roman», если по каким либо причинам данный шрифт не установлен на компьютер, то браузер вместо него выберет любой шрифт доступный из данного семейства. Заметьте, что некоторые из названий шрифтов записываются в кавычках, так принято что если в названии шрифта более одного слова, то его заключают в кавычки.

Для селектора p я прописал два шрифта. По аналогии с селектором h1 не трудно догадаться, что для текста первым выбирается шрифт arial, если он не установлен, тогда следом за ним verdana. А если вдруг и такой шрифт не установлен на компьютере, то браузер выберет шрифт из семейства sans-serif

Свойство font-style

Font-style задаёт стиль шрифта. Это свойство может принимать всего три значения: normal, italic и oblique.

Применяется это свойство довольно часто. Я думаю у вас не должно возникнуть проблем с его применением:

h1 {font-family: "Times New Roman", serif;
font-style:oblique;
}
p {font-family:arial, verdana,  sans-serif;
font-style:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
}

Следует отметить что italic и oblique отличаются друг от друга тем, что стиль oblique задаёт искусственный наклон букв на определённый угол, а стиль italic — это задаёт естественный курсив буквы, который уже есть в шрифте.

Свойство font-variant в CSS

Свойство font-variant имеет всего два значения: normal, small-caps и выбирает вариант написания букв нижнего регистра.

Способ применения:

h1 {font-family: "Times New Roman", serif;
font-style:oblique;
font-variant:small-caps; 
}
p {font-family:arial, verdana,  sans-serif;
font-style:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
font-variant:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
}

Свойство font-weight

Свойство font-weight имеет два основных значения:normal — обычный шрифт (стоит по умолчанию) и bold — жирный шрифт. Также можно использовать числовые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900. Но использовать их я вам не рекомендую, так как они поддерживаются не всеми браузерами. Способ использования очень прост, его вы можете увидеть ниже:

h1 {font-family: "Times New Roman", serif;
font-style:oblique;
font-variant:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
}
p {font-family:arial, verdana,  sans-serif;
font-style:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
font-variant:small-caps; 
font-weight: bold;
}

Свойство font-size в CSS

Свойство font-size задаёт размер шрифта. Задаётся в основном с помощью относительных единиц. Например:

h1 {
font-size: 24pt;
font-family: "Times New Roman", serif;
font-style:oblique;
font-variant:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
}
p {
font-size: 14px;
font-family:arial, verdana,  sans-serif;
font-style:normal; /* Применять такой стиль не обязательно,
он стоит по умолчанию */
font-variant:small-caps; 
font-weight: bold;
}

Свойство font

Это свойство используется для сокращенной записи. Порядок свойств, которые прописываются через пробел такой:
font-style_ font-variant_font-weight_font-size_font-family

То есть вместо:

p {
font-size: 14px;
font-family:arial, verdana,  sans-serif;
font-style:normal; /* Применять такой стиль не обязательно,
 он стоит по умолчанию */
font-variant:small-caps; 
font-weight: bold;
}

Можно записать следующим образом:

p {
font:normal small-caps bold 14px arial, verdana, sans-serif; 
}

Записывая код в такой форме вы не только сокращаете время написания кода, но и уменьшаете его, тем самым повышаете загрузку файла стилей и самого сайта. Если в записи пропустить одно и свойств, то браузер выберет значение по умолчанию. Предлагаю вам закрепить пройденный материал и рассмотреть вот такой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Свойство font в CSS</title>
 <style type="text/css">
h1 {
font-size: 24pt;
font-family: "Times New Roman", serif;
font-style:oblique;
font-variant:normal; /* Применять такой стиль не обязательно,
 он стоит по умолчанию */
}
p {
font:normal small-caps bold 14px arial, verdana, sans-serif; 
background-color:#FFF2E6
}
</style>
 </head> 
 <body>
<h1>Это наклонный заголовок с шрифтом "Times New Roman",
 размером 24 пункта</h1>
<p>Это обычный жирный текст размером 14 пикселей, в
 котором буквы нижнего регистра выглядят как заглавные буквы.
Для этого текста используется рубленный шрифт arial</p>
 </body>
</html>

В результате у вас должно получиться следующее:

Применение свойства font в CSS

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



наверх