3.1 Веб-шрифты
Подключение шрифтов на веб-страницах играет ключевую роль в создании уникального и привлекательного дизайна. Веб-шрифты позволяют использовать шрифты, которые не установлены на компьютере пользователя, за счет их загрузки с сервера. Google Fonts — один из самых популярных сервисов для использования веб-шрифтов. Рассмотрим подробнее, как подключать веб-шрифты и Google Fonts на веб-страницах.
Веб-шрифты — это шрифты, которые загружаются с удаленного сервера и отображаются на веб-странице, даже если они не установлены на устройстве пользователя. Это обеспечивает большую гибкость в выборе шрифтов и позволяет создать более привлекательный дизайн.
Подключение веб-шрифтов
Пример подключения веб-шрифтов с помощью @font-face:
Сначала необходимо загрузить файлы шрифта на ваш сервер. Обычно это файлы форматов .woff, .woff2, .ttf, .eot и .svg.
Шаг 2. Использование @font-face в CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Преимущества использования @font-face:
- Контроль: полный контроль над выбором и использованием шрифтов
- Совместимость: поддержка различных форматов шрифтов для обеспечения совместимости с разными браузерами
- WOFF (Web Open Font Format): широко поддерживаемый формат для веб-шрифтов
- WOFF2: улучшенная версия WOFF с лучшей сжатием
- TTF (TrueType Font): стандартный формат для шрифтов, поддерживаемый большинством браузеров
- EOT (Embedded OpenType): формат, поддерживаемый Internet Explorer
- SVG: формат для использования шрифтов в SVG-графике
3.2 Google Fonts
Google Fonts предоставляет коллекцию бесплатных шрифтов, которые можно легко интегрировать на ваш веб-сайт. Преимуществом использования Google Fonts является простота подключения и разнообразие доступных шрифтов.
Подключение шрифтов с помощью Google Fonts:
1. Выбор шрифта на сайте Google Fonts:
Перейдите на Google Fonts и выберите шрифт, который хотите использовать.
2. Получение ссылки для подключения:
На странице выбранного шрифта выберите нужные начертания и стили. После этого Google Fonts сгенерирует ссылку для подключения шрифта.
3. Вставка ссылки в HTML-документ:
Скопируйте сгенерированную ссылку и вставьте ее в секцию <head> вашего HTML-документа.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Применение шрифта в CSS:
Используйте свойство font-family для применения шрифта к элементам на странице.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Пример использования Google Fonts через HTML:
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Этот текст отображается с использованием шрифта Roboto.</p>
</body>
</html>
3.3 Использование CSS @import
Шрифты Google также можно подключить с помощью правила @import в CSS.
Пример использования Google Fonts через @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Преимущества использования Google Fonts:
- Простота использования: легко интегрировать шрифты с помощью одной строки кода
- Большой выбор: доступ к большому количеству шрифтов различных стилей и категорий
- Оптимизация производительности: шрифты загружаются с высокопроизводительных серверов Google
Атрибут display="swap" в коде для подключения веб-шрифтов Google Fonts улучшает производительность и пользовательский опыт. Когда вы подключаете веб-шрифты, браузер должен сначала загрузить и отобразить шрифт, прежде чем сможет отобразить текст. Это может вызвать задержку, особенно при медленном интернете. display="swap" решает эту проблему, указывая браузеру использовать системный шрифт по умолчанию, пока загружается веб-шрифт. Как только веб-шрифт загрузится, браузер заменит им системный.
Влияние на производительность:
При использовании веб-шрифтов важно учитывать их влияние на производительность веб-страницы. Загрузка большого количества шрифтов или начертаний может увеличить время загрузки страницы. Чтобы минимизировать это влияние, следуйте следующим рекомендациям:
- Используйте минимально необходимое количество начертаний: выбирайте только те начертания, которые вам действительно нужны
- Используйте атрибут
display="swap": это обеспечивает отображение текста системным шрифтом, пока загружается веб-шрифт, что улучшает восприятие производительности пользователем - Оптимизация доставки шрифтов: используйте кеширование и предварительную загрузку (preload) для улучшения производительности
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ