Изменение шрифта с помощью CSS. font

Когда необходимо изменить начертание шрифта, мы можем сделать это пятью свойствами: font-family - устанавливает шрифт, который будет использоваться при начертании текста.
1
2
3
div {
    font-family: Arial, sans-serif;
}
При отсутствии первого шрифта, браузер будет пытаться установить следующий шрифт. font-style - Используется для изменения стиля начертания шрифта. Он может быть: normal - стандартное начертание italic - курсивное начертание (подражание рукописному) oblique - наклонное (косое начертание печатных букв) inherit - такое же, как у родительского объекта
1
2
3
div {
    font-style: italic;
}
font-weight - насыщенность(жирность) шрифта. Возможно указание насыщенности как в словесной формулировке: bold - насыщенный bolder - насыщеннее lighter - тоньше normal - стандартный Также запись можно произвести цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900
1
2
3
4
5
6
div {
    font-weight: bold;
}
div {
    font-weight: 900;
}
font-size - указание размера шрифта. Указывается в различных единицах (самые популярные: пункты (pt), пикселы (px), проценты (%)). За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются. Примечание: по версии SmashingMagazine оптимальным шрифтом для контента считается 16px.
1
2
3
div {
    font-size: 24px;
}
font-variant - данное свойство поможет Вам отобразить текст заглавными буквами т.е. "капсом". Возможные значения: normal - стандартное начертание. small-caps - все буквы будут заглавными inherit - наследовать от родителя
1
2
3
div {
    font-variant: small-caps;
}
Подключение нестандартного шрифта на страницу Для подключения шрифтов, которых нет на компьютере пользователя используется CSS-объект @font-face со следующими параметрами: font-family: название подключаемого шрифта; src: local('название подключаемого шрифта'), url(путь к нему);
1
2
3
4
5
6
7
8
div {
    font-family: Roboto Regular;
}
@font-face {
    font-family: Roboto Light;
    src: local('Roboto Light'),
        url(fonts/Roboto-Light.ttf);
}
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru