CSS - Fonts: A Comprehensive Guide for Beginners

Привет, ambitные веб-разработчики! Сегодня мы окунемся в чудесный мир шрифтов CSS. Как ваш добрый邻里ний учитель компьютера, я здесь, чтобы провести вас через это путешеcтвие шаг за шагом. Так что возьмите чашечку кофе (или чая, если это ваше дело) и начнем!

Введение в шрифты CSS

Прежде чем мы углубимся в детали, давайте поговорим о том, почему шрифты так важны. Представьте, что вы читаете книгу, написанную целиком kursivом Comic Sans - это не самое приятное впечатление, правда? Вот почему выбор правильного шрифта для вашего веб-сайта так важен. Это как выбрать идеальный костюм для первого свидания - вы хотите произвести хорошее впечатление!

Краткая запись шрифта CSS

Давайте начнем с удобного小小的 трюка, называемого краткой записью шрифта. Это как швейцарский армейский нож для стилизации шрифта - компактный и универсальный!

body {
font: italic small-caps bold 16px/2 Arial, sans-serif;
}

Эта одна строка устанавливает несколько свойств шрифта одновременно. Давайте разберем ее:

• italic: стиль шрифта
• small-caps: variante шрифта
• bold: вес шрифта
• 16px: размер шрифта
• 2: высота строки
• Arial, sans-serif: семейство шрифтов

Получается неплохо, правда? Это как заказать комбо-обед вместо отдельных блюд!

Шрифты CSS - с несколькими значениями

Иногда одного шрифта просто недостаточно. Вот где на помощь приходят несколько значений:

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

Это как иметь план Б. Если "Trebuchet MS" недоступен, он попробует Verdana, и если это также не удастся, он использует любой доступный sans-serif шрифт.

Шрифты CSS - Семейство шрифтов

Говоря о семействах шрифтов, давайте углубимся немного дальше:

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

Здесь мы используем разные семейства шрифтов для заголовков и абзацев. Это как одеть ваши заголовки в элегантный костюм, а абзацы оставить в smart casual!

Шрифты CSS - Настройки шрифтовых функций

Теперь давайте добавим немного изысканности с помощью настроек шрифтовых функций:

p {
font-feature-settings: "smcp" on, "swsh" 2;
}

Это активирует малые заглавные буквы и устанавливает level 2 для сваш. Это как дать вашим шрифтам суперсилы!

Шрифты CSS - С свойством font-feature-settings

Давайте рассмотрим еще один пример настройки шрифтовых функций:

.stylish-text {
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

Это включает стандартные лигатуры, дискреционные лигатуры и исторические лигатуры. Это как сделать ваш текст шедевром каллиграфии!

Шрифты CSS - Кернение

Кернение - это все о пространстве между символами:

.kerned-text {
font-kerning: normal;
}

Это обеспечивает правильное расстояние между буквами. Это как дать вашему тексту место для дыхания!

Шрифты CSS -Override языка шрифта

Иногда вам нужно изменить языковые настройки:

.japanese-text {
font-language-override: "JAN";
}

Это tells браузеру использовать японские Varianten глифов. Это как tell ваш текст speak по-японски!

Шрифты CSS - Оптическое масштабирование

Оптическое масштабирование корректирует шрифт в зависимости от его размера:

.headline {
font-optical-sizing: auto;
}

Это позволяет шрифту оптимизировать свой вид при разных размерах. Это как иметь шрифт, который может изменять форму!

Шрифты CSS - Палитра шрифтов

Палитры шрифтов позволяют использовать предопределенные цветовые схемы:

@font-palette-values --custom-palette {
font-family: Pixelify Sans;
base-palette: 1;
}

.colored-text {
font-palette: --custom-palette;
}

Это применяет пользовательскую палитру цветов к вашему шрифту. Это как сделать ваш текст underwent makeover!

Шрифты CSS - Размер шрифта

Размер шрифта quite прост:

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}

Здесь мы устанавливаем базовый размер для тела и делаем заголовки в два раза больше. Это как иметь зелье роста для вашего текста!

Шрифты CSS - Настройка размера шрифта

Настройка размера шрифта помогает поддерживать читаемость между разными шрифтами:

.adjusted-text {
font-size-adjust: 0.5;
}

Это корректирует размер шрифта на основе x-height. Это как дать вашему тексту pair of platform shoes!

Шрифты CSS - Расширение шрифта

Font stretch позволяет сжимать или расширять ваш шрифт:

.stretched-text {
font-stretch: extra-expanded;
}

Это делает ваш текст шире. Это как ваш текст hit gym и набрал мышечную массу!

Шрифты CSS - С свойством font-style

Стиль шрифта позволяет вам 斜印刷 ваш текст:

.emphasized {
font-style: italic;
}

Это gives ваш текст наклон. Это как ваш текст наклоняется, чтобы шепнуть secret!

Шрифты CSS - С свойством font-weight

Weight шрифта контролирует, насколько жирным будет ваш текст:

.important {
font-weight: bold;
}

Это делает ваш текст выделяться. Это как ваш текст flexes свои мышцы!

Шрифты CSS - С свойством font-synthesis

Font synthesis контролирует, как браузеры создают жирные или наклонные версии шрифта:

.no-fake-bold {
font-synthesis: none;
}

Это prevents браузеры от создания синтетической жирной версии. Это как tell ваш браузер, "No fake it till you make it!"

Шрифты CSS - С свойством font-variant

Font variant позволяет использовать альтернативные глифы:

.smallcaps {
font-variant: small-caps;
}

Это превращает строчные буквы в малые заглавные. Это как ваш текст wearing tiny tuxedo!

Шрифты CSS - С свойством font-variation-settings

Font variation settings дают вам точный контроль над переменными шрифтами:

.custom-font {
font-variation-settings: "wght" 375, "wdth" 80;
}

Это устанавливает пользовательские значения веса и ширины. Это как иметь量身 made suit для вашего текста!

CSS Line Height

Line height контролирует пространство между строками текста:

p {
line-height: 1.5;
}

Это устанавливает высоту строки в 1.5 раза больше размера шрифта. Это как дать вашему тексту место для растягивания ног!

Шрифты CSS - Google Fonts

Google Fonts - это сокровищница бесплатных, веб-дружественных шрифтов:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: 'Roboto', sans-serif;
}

Это импортирует и использует шрифт Roboto. Это как иметь personal font stylist!

Шрифты CSS - Fallback Fonts

Always предоставлять fallback шрифты:

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Это ensures ваш текст всегда looks خوبо, даже если ваш предпочтительный шрифт недоступен. Это как иметь план Б для вашего плана Б!

Шрифты CSS - Summary

Вот quick summary всех шрифтовых свойств, которые мы рассмотрели:

Свойство	Описание	Пример
font	Краткая запись для нескольких шрифтовых свойств	font: italic bold 16px/2 Arial, sans-serif;
font-family	Указывает семейство шрифтов	font-family: Arial, sans-serif;
font-feature-settings	Управляет avanzadas типографическими функциями	font-feature-settings: "smcp" on;
font-kerning	Управляет кернингом шрифта	font-kerning: normal;
font-language-override	Override language-specific глиф замены	font-language-override: "JAN";
font-optical-sizing	Управляет оптическим масштабированием	font-optical-sizing: auto;
font-palette	Указывает палитру шрифтов	font-palette: --custom-palette;
font-size	Устанавливает размер шрифта	font-size: 16px;
font-size-adjust	Корректирует размер шрифта на основе x-height	font-size-adjust: 0.5;
font-stretch	Управляет расширением шрифта	font-stretch: extra-expanded;
font-style	Устанавливает стиль шрифта (normal, italic, oblique)	font-style: italic;
font-weight	Устанавливает вес шрифта	font-weight: bold;
font-synthesis	Управляет синтезом шрифтовых лиц	font-synthesis: none;
font-variant	Указывает variant шрифта	font-variant: small-caps;
font-variation-settings	Управляет характеристиками переменных шрифтов	font-variation-settings: "wght" 375;
line-height	Устанавливает высоту строки	line-height: 1.5;

И вот и все, folks! Полное руководство по шрифтам CSS. Помните, типографика - это искусство, и теперь у вас есть инструменты, чтобы стать истинным художником. Счастливого кодирования, и пусть ваши шрифты всегда будут великолепны!

Credits: Image by storyset