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