Урок 9. Шрифты. Группы шрифтов. Подключение шрифтов.
Все шрифты можно разделить на три основные группы:
- шрифты с засечками Serif, например Times New Roman;
пример латинской буквы T:
Здесь конечности букв заканчиваются засечками, на рисунке засечка обведена красной линией.
- Шрифты без засечек Sans. Например шрифт Areal:
Это шрифт ареал.
- И моноширинные шрифты monospace, у которых ширина пространства, которое занимает любой символ одинаковая. Например шрифт Courier New:
Это моноширинный шрифт
.в : d s (
Как правило программисты пишут код моноширинным шрифтом, для того, что бы было удобно его форматировать таким образом, что бы он был читаемым.
Мы уже знаем, что шрифт в css настраивается свойством font-family. Family, потому что в этом свойстве мы должны указывать не только нужный шрифт, но и семейство. Семейство указывается на тот случай, если нужного шрифта не окажется у пользователя. В таком случае браузер выберет существующий у пользователя шрифт нужного семейства.
В vsCode при вводе css свойства font-family выскакивает подсказка, с различными вариантами значений этого свойства:
В качестве значения свойству font-family необходимо перечислить названия шрифтов через запятую и в конце указать семейство. Если первого шрифта у пользователя нет, то будет использован второй. Если и второго нет, то будет использован третий. И т.д. Если ни одного шрифта из списка не окажется у пользователя, то будет выбран из тех, что есть принадлежащий указанному семейству.
Примечание: если название шрифта состоит из двух и более слов, то их необходимо заключить в кавычки.
Подключение шрифтов.
Иногда бывает необходимость в том, что бы у пользователя на странице сайта отображался определенный шрифт не зависимо от того есть он у него на компьютере или нет. В таком случае нужный шрифт нужно подключить. Сделать это можно следующим образом:
На сайте https://fonts.google.com/ выбираем нужный шрифт:
Далее выбираем нужные толщину и начертание шрифта, которые будут использованы.
Далее в правой панели страницы выбираем радиокнопку @import
И копируем текст к себе в стили.
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
</style>
</head>
<body>
<h1>Hellow</h1>
</body>
Так же в низу правой панели страницы сайта есть пример кода для подключения данного шрифта нужному элементу.
Подключим к элементу h1 нужный шрифт:
h1 {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Hellow</h1>
Жирность шрифта.
На сайте https://fonts.google.com/ вы могли заметить, что у одного и того же шрифта есть варианты с разной жирностью. Жирность указывается не только словами bold, medium, regular, но и целыми числами 500, 700, 900.
Те жирности шрифтов, которые были выбраны, мы можем присвоить элементу в css коде с помощью свойства font-weight:
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
}