Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы работы со шрифтами в HTML и CSS

Шрифты в HTML — пример файла index.html с комментариями

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="fonts.css">
    <title>Шрифты</title>
</head>
<body>
<!-- Шрифты-->
<h1>Этот шрифт находится в пределах тега body и называется Helvetica</h1>
<p>Этот шрифт тоже называется Helvetica и находится в пределах тега body</p>
<h2>Этот шрифт размером в 26px и он жирный</h2>
<h3>Это жирный шрифт 900</h3>
<p>Этот шрифт имеет несколько свойств &copy;</p>
<div>
    <p>Этот шрифт имеет несколько свойств &copy;</p>
    <p>Этот шрифт имеет несколько свойств &copy;</p>
    <p>Этот шрифт имеет несколько свойств &copy;</p>
</div>
</body>
</html>

Шрифты в CSS — пример файла fonts.css с комментариями

/*Шрифты*/
/*Шрифты и их стили можно контролировать с помощью CSS*/

/*Смена шрифтов*/

/*font-family*/
/*Это свойство используют для установки одного идеального шрифта и нескольких резервных вариантов*/
/*Если вы используете семейство шрифтов в теге body, то на всей странице будет задан шрифт этого семейства*/
body {
    /*Выбранный идеальный шрифт стоит на первом месте*/
    /*Браузер пытается подгружать шрифты по очереди*/
    font-family: Helvetica, Arial, sans-serif;
    /*Не все шрифты установлены в браузер*/
}

/*Шрифты браузера по умолчанию*/
/*Браузер имеет стандартные шрифты, которые вы можете поменять*/
/*С помощью этого, ширина шрифтов и их размер не будут произвольными*/
html, body, h1, h2, h3, p, ol, ul, li, a {
    font-size: 100%;
    font:inherit;
}

/*Ширина шрифта*/
/*Размер шрифта может быть выставлен с помощью свойства "font-size"*/
h2{
    font-size: 26px;
}
/*Толщина шрифта*/
/*Толщина может быть выставлена с помощью свойства "font-weight"*/
h2{
    font-weight: bold;
    /*Вот альтернативные значения этого свойства:*/
    /*normal, lighter, bolder*/
}
/*Вы так же можете использовать числовые значения*/
/*100 - 900*/
h3{
    font-weight: 900;
}

/*Общие свойства*/
p{
    font-weight: bolder;
    font-size: 12px;
    font-style: italic;
    text-transform: uppercase;
}

/*Высота линий*/
/* Имеет такое же поведение как margin*/
/* Margin не влияет на расстояние между строками в контейнере*/
/* Используйте "line height" для указания высоты линии*/
div p{
    line-height: 5px;
}