Способы задания шрифтов в CSS
Шрифт – это важная составляющая веб-дизайна, придающая сайту узнаваемость и выразительность.
Грамотно подобранный шрифт может быть незаметным для невооружённого глаза, однако он является той изюминкой, которая придаёт дизайну завершённость.
Как задать шрифт в CSS?
CSS -свойство font-family задаёт список приоритетных шрифтов, которые используются для отображения страницы или определённого элемента. В том случае, если на компьютере, с которого производится доступ к веб-сайту, не установлен первый шрифт списка, ищется следующий шрифт и так до тех пор, пока подходящий не будет найден.
Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family .
Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif ).
Указывать шрифты для сайта нужно, начиная с предпочтительного и заканчивая альтернативными вариантами. В конце списка рекомендуется указать родовое имя, поскольку в случае отсутствия определённых шрифтов на компьютере пользователя страница будет отображаться родственными.
Список шрифтов может выглядеть следующим образом:
Основные свойства шрифтов в CSS
В CSS при описании шрифта используют следующие характеристики:
Стиль
Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.
Атрибут font style может принимать такие значения как:
- normal (обычный);
- italic (курсив);
- oblique (наклонный).
При всей схожести, наклонный шрифт и курсив не являются одним и тем же. Наклонный образуется с помощью обыкновенного наклона символов вправо, а курсив является имитацией рукописного стиля начертания текста.
Вариант шрифта
Данная характеристика указывает использование строчными символами обычных глифов или глифов капители. Любой шрифт может включать в себя либо только глифы капители, либо только обычные глифы, либо оба варианта в совокупности.
Свойство font variant может иметь одно из двух возможных значений:
- normal (обыкновенный шрифт);
- small-caps (шрифт с малыми прописными буквами).
Вес шрифта
В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight . Некоторыми браузерами поддерживаются числовые значения в описании веса.
Каждый шрифт может принимать следующие значения:
- normal (обычный);
- lighter (светлее);
- bold (жирный);
- bolder (ещё более жирный);
- 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).
Размер шрифта
Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.
Например, задание шрифта размером 20 пикселей выглядит таким образом:
Также, размер шрифта можно задать с помощью процентов от его базового размера.
Например, шрифт с параметрами:
будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.
Цвет шрифта
Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:
- color (цвет текста);
- background color (цвет фона текста).
Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB .
Например, белый текст на чёрном фоне будет иметь такие значения:
- color: #ffffff;
- background-color: #000000.
Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.
Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно « придумать » значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000 .
Смешивая цвета, можно получать дополнительные оттенки: совокупность красного и синего цветов, как известно, дадут красно-фиолетовый #ff00ff .
Однако, для того, чтобы не изобретать велосипед, можно воспользоваться специальными программами или онлайн-сервисами для подбора цветового шестнадцатеричного кода: например, если в поисковом сервисе Яндекс ввести слово « цвет », появится удобное для таких целей средство.
Таким образом, возможности CSS позволяют изменить шрифт всего веб-сайта и его свойства всего за несколько минут, что существенно облегчает разработчику жизнь и экономит время.
Как создать эффект динамического перехода шрифта?
Раньше HTML был основой веб-дизайна. Разработчики использовали для определения стилей в HTML для изменения цветов и других параметров. Однако в настоящее время чаще всего используются CSS и JavaScript. Вы можете динамически изменять цвет шрифта текста на странице с помощью CSS и JavaScript. Это полезно, поскольку вы можете изменить цвет шрифта, не перезагружая страницу. Узнайте, как динамически изменять контент, используя разные свойства шрифта?
Виджет изменения цвета шрифта
Ниже приведен пример того, как выглядит переход шрифта.
Вы можете изменить цвет, толщину шрифта и семейство шрифтов в соответствии с требованиями.
Как создать этот виджет?
Виджет перехода шрифтов состоит из трех компонентов:
Вы можете использовать все вместе в виджете или использовать код отдельно. Например, если вы хотите использовать виджет только на одной странице своего сайта, скопируйте и вставьте весь код на свою страницу, как описано ниже. В качестве альтернативы, если вы хотите вставить виджет в нескольких местах, разделите CSS и JavaScript, чтобы вставить их как внешние файлы на страницу.
Примеры использования виджета перехода шрифта
Использование зависит от системы управления контентом, которую вы используете для создания своего веб-сайта.
- На простой веб-странице HTML вы можете вставить код виджета в разделы заголовка и тела.
- Если вы используете такие платформы, как Weebly, используйте элемент Embed Code, чтобы вставить код на свою страницу. В противном случае вы можете использовать разделы верхнего и нижнего колонтитула для вставки кода CSS и JS соответственно.
- В WordPress вы можете использовать пользовательский блок HTML с помощью редактора Гутенберга для вставки виджета.
CSS для перехода шрифтов
Добавьте следующий код CSS в раздел своей веб-страницы:
JavaScript для смены шрифтов
Добавьте следующий код сценария в нижний колонтитул (под содержимым) вашей веб-страницы, который находится после тела вашей страницы:
HTML для виджета перехода шрифта
Под содержимым HTML для виджета перехода шрифтов. Вы можете вставить этот код в любое место внутри основного раздела вашей страницы.
Настройка виджета
Вы можете настроить цвет и шрифты в соответствии с вашими потребностями. Как видите, мы используем таблицу для вставки перехода контента. Вы можете использовать границу, фон и различные настройки шрифта для каждой ячейки, чтобы украсить виджет перехода.
Как менять размер текста при изменении размера окна?
Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.
Использование единиц vw
Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).
Пример 1. Использование vw
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размер текста</title> <style> section h2 < font-size: 3vw; /* Размер заголовка */ >section div < font-size: 2vw; /* Размер текста */ ></style> </head> <body> <section> <h2>Для педагогов</h2> <div> Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования. </div> </section> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. а — текст на широком окне; б — текст на узком окне
У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.
Пример 2. Использование calc()
Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).
Использование медиа-запросов
Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.
Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).
Пример 3. Использование @media
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размер текста</title> <style> /* Для всех экранов */ section h2 < font-size: 2rem; >section div < font-size: 1rem; >/* Для ширины 1024 пикселей и меньше */ @media screen and (max-width: 1024px) < section h2 < font-size: 2.2rem; >section div < font-size: 1.2rem; >> /* Для ширины 600 пикселей и меньше */ @media screen and (max-width: 600px) < section h2 < font-size: 2.5rem; >section div < font-size: 1.5rem; >> </style> </head> <body> <section> <h2>Для педагогов</h2> <div> Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования. </div> </section> </body> </html>
Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.