Главная страница » CSS » 18. Семейство шрифта
Семейство шрифта (или font-family) определяет типографическое оформление текста на веб-странице. Оно позволяет задать один или несколько шрифтов, которые браузер будет использовать для отображения текста. Важно правильно выбирать и использовать семейства шрифтов, чтобы улучшить визуальную привлекательность и читаемость вашего сайта.
font-family
font-family
— это CSS-свойство, которое позволяет определить шрифты, используемые для текста. Можно указать несколько шрифтов в одном свойстве, чтобы браузер использовал доступный шрифт из списка.
Основные синтаксические структуры:
Семейство шрифта
p {
font-family: Arial, sans-serif; /* Использует Arial, если он доступен, иначе sans-serif */
}
p {
font-family: "Times New Roman", serif; /* Использует Times New Roman, если он доступен, иначе serif */
}
h1 {
font-family: "Open Sans", Arial, sans-serif; /* Использует Open Sans, если он доступен, иначе Arial, если он доступен, иначе sans-serif */
}
Примечание: Если шрифт имеет пробелы в названии, его нужно заключать в двойные кавычки.
body {
font-family: Arial, Helvetica, sans-serif; /* Системные шрифты */
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif; /* Веб-шрифт Roboto */
}
p {
font-family: serif; /* Использует шрифт с засечками */
}
Пример 1: Простой выбор шрифта
Этот текст будет отображаться шрифтом Arial, если он доступен. В противном случае будет использован шрифт sans-serif.
Пример 2: Веб-шрифты
Этот текст будет отображаться шрифтом Roboto, загруженным с Google Fonts. В случае отсутствия шрифта Roboto будет использован sans-serif.
Пример 3: Классы и семейства шрифтов
Этот текст использует шрифт с засечками.
Этот текст использует шрифт без засечек.
Этот текст использует моноширинный шрифт.
Неправильное указание шрифтов: Не указывайте шрифты без запятых и кавычек, если это необходимо. Всегда используйте кавычки для шрифтов с пробелами.
Отсутствие запасных шрифтов: Всегда указывайте запасные шрифты после основных шрифтов. Это обеспечивает корректное отображение текста, если основной шрифт недоступен.
Неоптимизированные веб-шрифты: Использование большого количества веб-шрифтов или слишком многих вариаций может замедлить загрузку страницы. Выбирайте только те веса и стили, которые действительно необходимы.
Свойство font-family
позволяет управлять типографическим оформлением текста на веб-странице. Правильное использование семейства шрифтов помогает улучшить визуальное восприятие контента и обеспечивает хорошую читаемость. Учитывайте поддержку шрифтов на различных устройствах и браузерах для достижения оптимальных результатов.
HTML-документ:
Заголовок первого уровня
Этот параграф использует шрифт Georgia. Он представляет собой шрифт с засечками, предоставляемый системой.
Параграфы в этом документе могут использовать разные шрифты в зависимости от их класса и семейства шрифтов.
Этот текст отображается с использованием моноширинного шрифта Courier New.
- Первый элемент списка
- Второй элемент списка
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024 Все права защищены. CodeFor.