Семейство шрифтов

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 18 из 76.

В CSS свойство font-family используется для указания шрифта текста внутри HTML-элемента. Это свойство позволяет перечислить предпочтительные шрифты для вашего текста. Если первый шрифт недоступен, браузер будет использовать следующий в списке, обеспечивая схожий внешний вид.

Вот базовый синтаксис для использования свойства font-family:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: Предпочтительные названия семейств шрифтов, перечисленные в порядке предпочтения. Если font1 недоступен, браузер попробует font2 и так далее.

generic-family: Название общего семейства шрифтов, такое как serif, sans-serif, monospace, cursive или fantasy. Это служит резервным вариантом, если ни один из указанных шрифтов не доступен.

При указании названий семейств шрифтов важно следовать этим рекомендациям:

Если название семейства шрифтов содержит пробелы, его следует заключать в кавычки (например, "Times New Roman", "Courier New").

Несколько названий семейств шрифтов должны разделяться запятыми.

Хорошей практикой является включение общего семейства шрифтов в качестве последнего варианта в списке, чтобы обеспечить использование подходящего резервного шрифта, если ни один из указанных шрифтов недоступен.

Например:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Задание

Легко

Вам дан HTML-документ с заголовком (<h1>) и абзацем (<p>). Ваша задача — использовать свойство font-family для стилизации этих элементов. Выполните следующие шаги:

Напишите CSS-правило для элемента <h1>. Установите font-family в значение "Times New Roman", Times, serif.
Напишите CSS-правило для элемента <p>. Установите font-family в значение Arial, Helvetica, sans-serif.

Шпаргалка

Свойство font-family определяет шрифт для текста. Перечислите предпочтительные шрифты по порядку — если первый недоступен, браузер будет использовать следующий.

Базовый синтаксис:

selector {
    font-family: font1, font2, generic-family;
}

Рекомендации:

Названия шрифтов с пробелами должны быть в кавычках: "Times New Roman"
Разделяйте несколько шрифтов запятыми
Включайте общее семейство шрифтов (serif, sans-serif, monospace, cursive, fantasy) в качестве резервного варианта

Пример:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Попробуйте сами

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>