В этой части учебника про CSS, разберём как происходит работа со шрифтами в CSS, например, как менять цвет и т.д., ну и конечно работу с текстом.
Как установить шрифт:
Для начала ну узнать как добавлять шрифты, для этого есть два способа, через HTML и CSS.
Но где можно взять шрифты, для этого можно зайти на сайт Google fonts, там они бесплатные, я же для примера выбрал шрифт .
Через HTML:
Для этого вы должны использовать тег <link> как и при подключение CSS.
1 | <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> |
Как видите всё просто.
Через CSS:
Тут сделаем импорт шрифтов в CSS, делается это тоже очень просто.
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'); |
Эти два примера должны быть работать, но мне больше нравится через HTML.
Свойства для работы с текстом:
Перед тем как перейти к работе со шрифтами, рассмотрим несколько свойств для работы со самим текстом.
- color — меняет цвет текста;
- line-height — назначает расстояние между строк;
- text-decoration — добавляет или убирает различные подчёркивания;
- text-transform — делает вес текст прописным или не прописным;
- text-align — выравнивает текст;
- text-indent — добавляет левый отступ первой строки;
Теперь давайте посмотрим на не большой пример работы с этими свойствами, покажем, как изменить цвет шрифта в CSS и выравнять текст.
1 2 3 4 5 6 7 8 9 | <div class="color"> <p>Это красный текст</p> </div> <div class="link"> <p>Это <a href="#">ссылка</a> без подчёркивания</p> </div> <div class="center"> <p>Этот текст по центру</p> </div> |
Вот CSS.
1 2 3 4 5 6 7 8 9 10 11 | div.color p { color: red } div.link a { text-decoration: none; } div.center p { text-align: center; } |
Вот результат.
Как видите текст стал красным, черты у ссылки нет и текст по середине.
Конечно, есть ещё много значений у этих свойств, но тут показал самые главные их применения.
Свойства для работы с шрифтом:
Теперь перейдём к самому главному, это к работе со шрифтами, вот какие свойства для изменения их есть.
- font-family — Назначает шрифт;
- font-style — Делает шрифт курсивным;
- font-weight — Делает шрифт жирным;
- font-size — Определяет размер;
Их всего четыре, но собственно говоря больше и не надо.
Вот сейчас сделаем не большой пример, где покажу, как указать шрифт, как изменить размер шрифта и т.д..
1 2 3 | <p class="size">Этот абзац очень большой</p> <p class="style">Этот абзац курсивный</p> <p class="weight">Этот абзац жирный</p> |
А вот CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | p { font-family: 'Roboto', sans-serif; } p.size { font-size: 50px; } p.style { font-style: italic; } p.weight { font-weight: bold; } |
Пожалуй самое интересное это font-family, первое значение это сам шрифт, второй это тип шрифта, оно нужно что бы если не сможет загрузить шрифт, то он подключит системный шрифт этого типа.
Вот результат.
Как видите работает всё как надо, единственное, стоит сказать ещё что для свойства font-weight, не обязательно задавать значение словами, можно и числами, это полезно, если вам нужно более точно задать жирность, но это не со всеми шрифтами.
Виды шрифтов в CSS:
Последнее что стоит сказать, так это про виды шрифтов, их несколько видов.
- serif — Шрифты с засечками;
- sans-serif — Шрифты без засечек или гротески;
- cursive — Курсивные шрифты или подобие прописного;
- fantasy — Декоративные шрифты;
- monospace — Моноширинные шрифты, ширина каждого символа в таком семействе одинакова;
Типы нужно знать для того, что бы, при случае, если не удалось загрузить шрифты, он использовал системные этого же типа.
Вывод:
В этой части учебника мы разобрали, как происходит работа со шрифтами в CSS 3, но только базовая, так как, все свойства которые были показаны, они гораздо больше значений имеют.
Подписываетесь на соц-сети:
Оценка:
Загрузка...