font-family – Атрибут задает имя шрифта.
body {
font-family: "Arial";На компьютере пользователя может отсутствовать выбранный шрифт , поэтому лучше указывать несколько альтернативных шрифтов . Имена шрифтов указывают через запятую.
p { font-family: "Verdana", "Tahoma";}Можно также указывать одно из пяти типовых семейств шрифтов.
sans-serif, cursive, fantasy и monospace
serif - Шрифт с засечками
Шрифты с засечками имеют зазубренные окончания.
Шрифты с засечками не имеют различий между толстыми и тонкими штрихами, чем у шрифтов из sans-serif общего семейства шрифтов.
Lucida Bright, Lucida Fax, Palatino, , Palatino Linotype, Palladio, URW Palladio, serif
Синтаксис
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>serif - Шрифт с засечками</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.6rem;
}
.text {
font-family:"New Century Schoolbook", serif;
}
</style>
</head>
<body>
<h1>serif - Шрифт с засечками</h1>
<p class="text">font-family: "New Century Schoolbook", serif</p>
</body>
</html>serif - Шрифт с засечками
sans-serif - Шрифт без засечек
В шрифтах без засечек обычно имеют низкую контрастность (вертикальные и горизонтальные стержни имеют примерно одинаковую толщину) и имеют гладкие окончания штрихов . Шрифты без засечек обычно имеют пропорциональный интервал. У них часто есть небольшие различия между толстыми и тонкими штрихами по сравнению со шрифтами из семейства serif.
Open Sans, Fira Sans, Lucida Sans, , Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif
Синтаксис
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sans-serif - Шрифт без засечек</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.6rem;
}
.text {
font-family:"New Century" Schoolbook;
}
</style>
</head>
<body>
<h1>sans-serif - Шрифт без засечек</h1>
<p class="text">font-family: "New Century Schoolbook"</p>
</body>
</html>sans-serif - Шрифт без засечек
cursive - Курсив
В курсивном шрифте обычно используют более неформальный стиль письма, и результат больше похож на рукописный текст ручкой или кистью, чем на печатные буквы. CSS использует термин cursive для применения к шрифту любого скрипта, хотя в названиях шрифтов также используются другие имена, такие как Chancery, Brush, Swing и Script.
Синтаксис
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cursive - Курсив</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.6rem;
}
.text {
font-family:"Chancery",cursive;
}
</style>
</head>
<body>
<h1>cursive - Курсив</h1>
<p class="text">font-family: "Chancery",cursive</p>
</body>
</html>cursive - Курсив
fantasy - Фантазия
Фэнтезийные шрифты - это в первую очередь декоративные или выразительные шрифты, содержащие декоративные или выразительные изображения символов. К ним не относятся шрифты Pi или Picture, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy которые не представляют фактические символы.
Синтаксис
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fantasy - Фантазия</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.6rem;
}
.text {
font-family:"Herculanum",fantasy;
}
</style>
</head>
<body>
<h1>fantasy - Фантазия</h1>
<p class="text">font-family: "Herculanum",fantasy</p>
</body>
</html>fantasy - Фантазия
monospace - Моноширинный
Единственным критерием моноширинного шрифта является то, что все глифы имеют одинаковую фиксированную ширину. Это часто используется для визуализации образцов компьютерного кода,Например, "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
Синтаксис
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>monospace - Моноширинный</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.6rem;
}
.text {
font-family:"Fira Mono",monospace";
}
</style>
</head>
<body>
<h1>monospace - Моноширинный</h1>
<p class="text">font-family: "Fira Mono",monospace</p>
</body>
</html>monospace - Моноширинный
