Стилизуйте текст с помощью свойств шрифтов CSS

Введение

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

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

Создайте HTML-файл и настройте базовую структуру

В этом шаге вы узнаете, как создать HTML-файл и настроить его базовую структуру для стилизации текста с использованием CSS. Мы будем использовать WebIDE для создания нового HTML-документа, который станет основой для нашей работы по стилизации шрифтов.

Сначала перейдите в каталог ~/project в WebIDE. Создайте новый файл с именем typography.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав пункт "Новый файл".

Вот базовая структура HTML, которую вы создадите:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* Мы добавим наши стили CSS здесь в последующих шагах */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Typography</h1>
    <p>This paragraph will demonstrate various text styling techniques.</p>
  </body>
</html>

Разберём основные компоненты этой структуры HTML:

<!DOCTYPE html> объявляет это как HTML5-документ
<html lang="en"> задает язык документа
<head> содержит метаданные о документе
<meta charset="UTF-8"> обеспечивает правильную кодировку символов
<meta name="viewport"> помогает при адаптивном дизайне
<title> задает заголовок страницы
Тег <style> — это место, где мы добавим наш CSS (мы расширим его в последующих шагах)
<body> содержит видимый контент страницы

Пример вывода при открытии этого файла в браузере:

[Простая страница с заголовком "Welcome to CSS Typography"
и абзацем под ним]

Примените семейство шрифтов к заголовкам

В этом шаге вы узнаете, как применить разные семейства шрифтов к заголовкам с использованием CSS. Семейство шрифтов — это важное свойство, которое определяет типографику текста, позволяя создавать привлекательный и читаемый стиль.

Откройте файл typography.html в WebIDE и измените раздел <style>, чтобы добавить свойства семейства шрифтов:

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

Рассмотрим основные концепции семейства шрифтов:

Веб-стандартные шрифты: Это шрифты, которые обычно доступны на разных устройствах и браузерах.
- Шрифты без засечек (например, Arial): Чистый, современный вид
- Шрифты с засечками (например, Times New Roman): Традиционный, официальный вид
Фонтовые запасные варианты: Всегда указывайте общий тип шрифта в качестве резервного варианта
- sans-serif
- serif
- monospace
Несколько вариантов шрифтов: Перечисляйте шрифты в порядке предпочтения
- Первый шрифт — это основной выбор
- Последующие шрифты — это резервные варианты, если предыдущие шрифты недоступны

Расширьте свой HTML, чтобы показать разные заголовки:

<body>
  <h1>Main Heading (Arial)</h1>
  <h2>Subheading (Times New Roman)</h2>
  <p>Paragraph text in Verdana</p>
</body>

Пример вывода в браузере:

[Страница, на которой показано:
- Main Heading в Arial
- Subheading в Times New Roman
- Абзац в Verdana]

Настройте размер шрифта и межстрочный интервал

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

Откройте файл typography.html и обновите раздел <style> следующим CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

Рассмотрим основные концепции:

Размер шрифта:
- Измеряется в пикселях (px), em или rem
- Управляет высотой текста
- Типичные размеры:
  - Заголовки: 24—36 px
  - Текст тела: 14—16 px
Межстрочный интервал:
- Управляет вертикальным расстоянием между строками текста
- Повышает читаемость
- Обычно задается в диапазоне от 1,4 до 1,6
- Может быть без единиц (рекомендуется) или в пикселях

Расширьте свой HTML, чтобы показать разные размеры текста:

<body>
  <h1>Main Heading (36px)</h1>
  <h2>Subheading (24px)</h2>
  <p>Paragraph text with increased line height for better readability.</p>
</body>

Пример вывода в браузере:

[Страница, на которой показано:
- Большой главный заголовок
- Маленький подзаголовок
- Абзац с комфортным межстрочным интервалом]

Добавьте стиль и толщину шрифта

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

Откройте файл typography.html и обновите раздел <style> следующим CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

Рассмотрим основные концепции:

Стиль шрифта:
- normal: Стандартный вид текста
- italic: Наклонный текст
- oblique: Похож на italic, но менее распространенный
Толщина шрифта:
- normal: Обычный текст (400)
- bold: Толще, более заметный текст (700)
- Числовые значения: 100—900 (увеличение на 100)
  - 400: Нормальный
  - 600: Полужирный
  - 700: Жирный

Измените свой HTML, чтобы продемонстрировать эти свойства:

<body>
  <h1>Main Heading (Italic and Bold)</h1>
  <h2>Subheading (Semi-Bold)</h2>
  <p>
    Regular paragraph text.
    <span class="highlight">This text is highlighted</span>.
  </p>
</body>

Пример вывода в браузере:

[Страница, на которой показано:
- Главный заголовок в italic и bold
- Подзаголовок в полужирном стиле
- Абзац с выделенным span]

Объедините свойства шрифта с использованием сокращенной записи

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

Откройте файл typography.html и обновите раздел <style> следующим CSS:

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

Рассмотрим синтаксис сокращенного свойства font:

Основной синтаксис: font: [font-style] [font-weight] [font-size] [line-height] [font-family]
- Порядок важен!
- Не все значения обязательны
Общие шаблоны сокращенной записи:
- font: style weight size family
- font: size/line-height family
- font: weight size family

Измените свой HTML, чтобы продемонстрировать сокращенные свойства:

<body>
  <h1>Main Heading (Shorthand)</h1>
  <h2>Subheading (Compact Syntax)</h2>
  <p>
    Paragraph with line height. <span class="highlight">Highlighted text</span>.
  </p>
</body>

Пример вывода в браузере:

[Страница, на которой показано:
- Главный заголовок с жирным и курсивным стилем
- Подзаголовок с компактным объявлением шрифта
- Абзац с интегрированным межстрочным интервалом]

Резюме

В этом практическом занятии участники получают представление о базовых принципах оформления текста с использованием свойств шрифтов CSS в последовательном порядке. На начальном этапе создается HTML-файл с базовой структурой, настраиваются важные метаданные и готовится полотно для экспериментов с типографикой. Учащимся знакомятся с основными HTML-элементами и атрибутами, в том числе с объявлением DOCTYPE, настройками языка и конфигурацией viewport.

Занятие продолжается с практических методов стилизации CSS, сосредотачиваясь на манипуляциях с шрифтами. Участники исследуют способы применения семейств шрифтов к заголовкам, настройки размеров шрифта и межстрочного интервала, а также изменения стиля и толщины шрифта. Работая непосредственно в WebIDE и постепенно разрабатывая свой HTML и CSS-код, студенты получают практический опыт в трансформации внешнего вида текста и понимают, как различные свойства шрифтов влияют на эффективную веб-типографику.