Зачем нужны сторонние шрифты
До сих пор использовали стандартные шрифты браузера. Arial, Times New Roman, те, что установлены на каждом компьютере. Они работают, но выглядят обыденно. Посмотрите на сайт ADC. Видите совершенно другой шрифт в заголовках и тексте? Это не Arial. Это Inter.
Шрифт формирует характер сайта. Один шрифт серьёзный, другой игривый, третий технологичный. Inter нейтральный и читаемый, подходит для образовательных проектов. Чтобы использовать его на сайте, нужно подключить через Google Fonts.
Подключение Google Fonts
Откройте браузер. Зайдите на fonts.google.com. Найдите шрифт Inter. Выберите начертания: Regular 400, Medium 500, Bold 700. Нажмите «Get font», затем «Get embed code». Скопируйте код для вставки в <head>.
Откройте index.html. В секции <head> добавьте ссылку на шрифт:
<head>
<title>ADC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css">
</head>Три строки подключают шрифт. Первая устанавливает соединение с Google Fonts. Вторая с сервером шрифтов. Третья загружает Inter с нужными начертаниями. Теперь шрифт доступен на сайте.
Применение шрифта в CSS
Откройте style.css. Примените Inter ко всему сайту:
body {
font-family: "Inter", sans-serif;
color: #313131;
}font-family: "Inter", sans-serif устанавливает Inter основным шрифтом. Если Inter не загрузится, браузер возьмёт любой sans-serif шрифт. Сохраните. Обновите страницу. Видите? Весь текст стал Inter.
Настройка начертаний
Теперь настройте разные начертания для разных элементов:
h1, h2, h3 {
font-weight: 600;
line-height: 100%;
}
h1 {
font-size: 98px;
}
h2 {
font-size: 72px;
}
h3 {
font-size: 32px;
}
p {
font-weight: 400;
font-size: 22px;
line-height: 140%;
}font-weight: 700 делает заголовки жирными. font-weight: 400 делает текст обычным. line-height задаёт высоту строки. Каждый элемент получает своё начертание, создаётся визуальная иерархия.
Позиционирование элементов
Теперь позиционирование. Посмотрите на главную страницу ADC. Видите зелёный градиент вверху и внизу страницы? Он начинается с прозрачного и переходит в яркий зелёный. Это фон, который нужно разместить в определённом месте страницы.
Без позиционирования элементы располагаются друг за другом сверху вниз. Заголовок, потом параграф, потом картинка. Как текст в документе. Но иногда нужно разместить элемент в конкретном месте, независимо от других. Для этого существует position.
Давайте добавим наш градиент в хедер:
<header>
<div class="gradient-bg"></div>
<img src="logo.png" alt="Логотип ADC" class="logo-image">
<a href="history.html" class="nav-link">Наша история</a>
<a href="https://t.me/artdesigncoding">
<img src="telegram.png" alt="Telegram ADC" class="logo-telegram-small">
</a>
</header>Класс gradient-bg это пустой <div>, который станет фоном. В CSS позиционируйте его так:
header {
position: relative;
}
.gradient-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 700px;
background: linear-gradient(180deg, #78FF3A 0%, rgba(255, 255, 255, 0.00) 100%);
z-index: -1;
}position: relative на хедере создаёт контекст для абсолютного позиционирования внутри. position: absolute на градиенте вырывает его из потока документа и позиционируется он уже относительно элемента с position: relative. top: 0 прижимает к верхнему краю. left: 0 прижимает к левому краю. width: 100% растягивает на всю ширину. height: 700px задаёт высоту.
background: linear-gradient() создаёт градиент. rgba(255, 255, 255, 0.00) прозрачный белый сверху. #78FF3A яркий зелёный снизу. z-index: -1 отправляет градиент за контент, чтобы текст был поверх.
Обновите браузер. Видите? Вверху страницы зелёный градиент. Текст и ссылки поверх него, читаемые.
Теперь сделаем то же самое для футера:
<footer>
<div class="gradient-bg-bottom"></div>
<a href="history.html">Наша история</a>
<img src="telegram.png" alt="Telegram ADC">
<p>© ADC Community</p>
</footer>И стилизуем немного по-другому, так как наш градиент идёт уже от зелёного к прозрачному:
header, footer {
position: relative;
}
.gradient-bg-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 292px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #78FF3A 100%);
z-index: -1;
}Добавили footer рядом с header, оба они имеют одинаковое свойство position: relative. А также развернули наш градиент через изменение угла с 180deg на 0deg.
Заключение
Запомните главное. Сторонние шрифты подключаются через Google Fonts, ссылка в <head>, использование через font-family в CSS. font-weight управляет толщиной шрифта: 400 обычный, 500 средний, 700 жирный. Позиционирование управляет размещением элементов: relative для контекста, absolute для точного размещения. Градиенты создаются через linear-gradient(). z-index управляет слоями, большее число выше.
Теперь в качестве домашнего задания вам необходимо добавить такие же градиенты на страницу статьи.
Какое свойство используется для подключения шрифта в CSS?
Что делает position: absolute?
Для чего используется z-index?
Google Fonts — библиотека шрифтов