CSS - Веб-шрифты: руковод для начинающих
Здравствуйте, будущие веб-дизайнеры! Я рад быть вашим проводником в этом захватывающем путешествии в мир CSS веб-шрифтов. Кто-то, кто多年从事计算机科学教学， может告诉你, что понимание шрифтов похоже на изучение нового языка - это может показаться сложным в начале, но как только ты惯ёшься, ты удивишься, как это трансформирует твои веб-страницы!
Что такое веб-шрифты?
Прежде чем мы углубимся в детали, начнём с основ. Веб-шрифты - это пользовательские шрифты, которые можно использовать на вашем сайте, независимо от того, установлены ли они на компьютере пользователя. Это как дать вашему сайту уникальный голос!
Why Are Web Fonts Important?
Представьте, если бы каждая книга в мире использовала один и тот же шрифт. Скучно, правда? Веб-шрифты позволяют выразить индивидуальность вашего сайта и улучшить читаемость. Это secret sauce, который может сделать ваш сайт выделяющимся из толпы!
Форматы шрифтов CSS
Теперь давайте поговорим о различных форматах шрифтов. Это как выбирать между разными вкусами мороженого - у каждого свои характеристики!
| Формат | Описание | Поддержка браузеров |
|---|---|---|
| TTF/OTF | TrueType Font / OpenType Font | Все современные браузеры |
| WOFF | Web Open Font Format | Все современные браузеры |
| WOFF2 | Web Open Font Format 2 | Большинство современных браузеров |
| EOT | Embedded OpenType | Internet Explorer |
| SVG | Scalable Vector Graphics | Старые версии iOS |
Не волнуйтесь, если это пока resembles alphabet soup. Мы разберём это по мере продвижения!
Основные моменты CSS веб-шрифтов
Прежде чем мы начнём писать код, давайте рассмотрим несколько ключевых моментов:
- Веб-шрифты позволяют использовать пользовательские шрифты на вашем сайте.
- Они загружаются с сервера, а не с компьютера пользователя.
- Вы можете использовать сервисы, такие как Google Fonts, или размещать шрифты самостоятельно.
- Существуют различные форматы шрифтов для совместимости с браузерами.
- Rule
@font-faceиспользуется для определения пользовательских шрифтов в CSS.
CSS Web Fonts - @font-face At-Rule
Теперь давайте углубимся в код! Rule @font-face как если бы вы представляли новый шрифт на вашей веб-странице. Вот как это выглядит:
@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}Давайте разберём это:
-
font-family: Это имя, которое вы даёте своему шрифту. Вы будете использовать это имя позже, чтобы применить шрифт к элементам. -
src: Это specifies, где найти файл шрифта и в каком формате он находится. -
font-weightиfont-style: Эти параметры define характеристики шрифта.
После определения вашего шрифта, вы можете использовать его так:
body {
font-family: 'MyAwesomeFont', sans-serif;
}Это говорит браузеру: "Эй, используй MyAwesomeFont, но если ты не можешь его найти, вернись к любому sans-serif шрифту."
CSS Web Fonts - @font-face / font-stretch
Property font-stretch как если бы ваш шрифт пошёл на йогу. Он позволяет растягивать или сжимать шрифт. Вот как вы можете использовать его:
@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}
.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}Это сделает ваш текст look как будто он был в спортзале и набрал мышечную массу!
Использование онлайн сервиса шрифтов
Использование онлайн сервиса шрифтов как если бы вы заказывали еду на вынос вместо готовки - это удобно и есть большой выбор. Google Fonts - популярный выбор. Вот как вы можете использовать его:
- Перейдите на Google Fonts и выберите шрифт, который вам нравится.
- Скопируйте предоставленный тег link и вставьте его в ваш HTML
<head>:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">- Используйте шрифт в вашем CSS:
body {
font-family: 'Roboto', sans-serif;
}И вуаля! Вы теперь используете пользовательский шрифт из Google Fonts.
Import Font
Другой способ включить веб-шрифты - использовать rule @import. Это как если бы вы приглашали шрифт на вечеринку в вашем CSS. Вот как это работает:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}Этот метод позволяет вам держать все ваши шрифтовые декларации в вашем файле CSS, что некоторые разработчики предпочитают для организации.
Заключение
Поздравляю! Вы только что сделали свои первые шаги в чудесный мир CSS веб-шрифтов. Помните, как и при изучении любого нового навыка, практика делает perfect. Не бойтесь экспериментировать с различными шрифтами и observe, как они изменяют вид и ощущение ваших веб-страниц.
Заканчивая, вот небольшая история из моего опыта преподавания: у меня была студентка, которая мучилась с веб-дизайном. Она не могла понять, почему её сайты выглядят так... скучно. Затем мы рассмотрели веб-шрифты, и это было как если бы лампочка зажглась. Внезапно её сайты перешли от скучных к красивым. Это сила веб-шрифтов!
Так что идите вперёд, экспериментируйте с шрифтами и смотрите, как ваши веб-страницы оживают. Счастливо кодируйте и помните - в мире веб-дизайна, единственное ограничение - это ваша фантазия!
Credits: Image by storyset