Тема: Свойства шрифтов CSS .
ПЛАН ЗАНЯТИЯ
Дисциплина: ОП.16 Основы web - технологий
Преподаватель: Машарова Р.В.
Курс: 2
Группа: 1ИСП-21
Специальность: Информационные системы и программирование
Дата: 14.04.2023
Время проведения: 13.30-15.00, 4 пара
Тема: Свойства шрифтов CSS.
Цель занятия:
Дидактическая: познакомиться с типами шрифтов CSS.
Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания
Вид занятия лекция
Литература:
1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.
2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.
3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.
4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.
Тема: Свойства шрифтов CSS .
1. Шрифтовые семейства и семейства шрифтов
2. Размеры шрифтов
3. Ширина символов
4. Начертание шрифта
5. Вариант шрифта
6. Сокращенная запись
При разработке методов обращения со шрифтами, создатели спецификаций CSS преследовали две цели. Первая - дать возможность авторам Web-станиц придавать текстам вид, соответствующий типографским традициям разных стран, а также авторским замыслам оформления Web-страницы. Вторая цель –упростить процесс назначений стилей.
Для реализации вышеперечисленных целей был сформирован набор характеристик, ниже рассмотрен основные из них.
1.Шрифтовые семейства и семейства шрифтов
Шрифтовое семейство (font family) - это группа шрифтов, объединяющая шрифты различных способов начертания (курсив, полужирное начертание). Указывая на определенный шрифт, создатель Web-страницы предполагает наличие такового у пользователя. Если у пользователя таких шрифтов не окажется, можно указать общее семейство шрифтов (generic family), объединяющее шрифты с одинаковым типом начертания. Синтаксис описания семейства шрифтов:
{font-family: имя_шрифта1, имя_шрифта2, семейство_шрифтов}
Пример:
<head>
<style type="text/css">
<!-
font {font-family: Helvetica, Arial, sans-serif}
->
</style>
</head>
<font size="10"> Пример бессерифного шрифта. </font>
Назначая бессерифный шрифт для текста страницы, явным образом указано два шрифта Helvetica и Arial. Браузер пользователя при отображении данной страницы будет пытаться воспользоваться именно этими шрифтами, не обнаружив их на компьютере пользователя, подставит любой другой шрифт, относящийся к семейству sans-serif (рис. 4.1).
Рисунок 4.1 - Пример бессерифного шрифта
Необходимо отметить, что название шрифта, состоящее из двух слов, такое как Arial Cyr, следует брать в кавычки или апострофы, в зависимости от того, где вписывается название шрифта:
P {font-family: "Arial Cyr"}
или
<FONT STYLE="font-family: 'Comic Sans'">.
2.Размеры шрифтов
В CSS предусматриваются четыре метода задания размера шрифта - абсолютный, относительный, явное указание величины шрифта и процентный. Синтаксис указания размера шрифта:
{font-size: размер_шрифта}
Абсолютный размер. Задавая абсолютную величину шрифта, необходимо указать один из семи базовых размеров. Размеры задаются следующим образом (от большего к меньшему):
1. xx-large
2. x-large
3. large
4. medium
5. small
6. x-small
7. xx-small
Используя эти величины согласно синтаксису, получим конструкцию:
{font-size:xx-large}
Пример (рис. 4.2):
<html><head><title>Рисунок 4.2</title></head>
<body>
<P STYLE="font-size:xx-large"> Размер xx-large</P>
<P STYLE="font-size:x-large"> Размер x-large</P>
<P STYLE="font-size:large"> Размер large</P>
<P STYLE="font-size:medium"> Размер medium</P>
<P STYLE="font-size:small"> Размер small</P>
<P STYLE="font-size:x-small"> Размер x-small</P>
<P STYLE="font-size:xx-small"> Размер xx-small</P>
</body>
</html>
Рисунок 4.2 - Абсолютный метод задания размеров шрифта
Относительный размер. При относительном методе задания размера шрифта можно оперировать двумя параметрами - larger и smaller. В этом случае новый размер шрифта будет соответственно больше или меньше исходного на один шаг, равный базовому размеру шрифта при его абсолютном указании. Например, если текущий размер шрифта medium, то при использовании команды:
{font-size: large},
его текущий размер станет равным large.
Пример (см. рис. 4.3):
<html><head><title>Рисунок 4.3</title>
<style type="text/css">
font.size {font-size:medium}
font.size1 {font-size:larger}
</style>
</head>
<body>
<br><font class="size"> Размер medium</font>
<br><font class="size1"> А это larger</font>
</body></html>
Рисунок 4.3 - Относительный метод задания размеров шрифта
Явное указание размера. Самым простым методом указания размера шрифта является указание его величины в привычных единицах измерения. В качестве таковых применяются пикселы (px), дюймы (in), сантиметры (cm), миллиметры (mm), а также типографские единицы измерения - пики (pc) и пункты (pt), т. е. 1/12 пики (рис. 4.4).
Пример:
<html><head></head>
<body>
<P STYLE="font-size:0.5 in"> Размер в дюймах</P>
<P STYLE="font-size:0.7 cm"> Размер в сантиметрах</P>
<P STYLE="font-size:5 mm"> Размер в миллиметрах</P>
<P STYLE="font-size:12 pt"> Размер в пунктах</P>
<P STYLE="font-size:2 pc"> Размер в пиках</P>
</body>
</html>
Рисунок 4.4 - Явный метод задания размеров шрифта
Указание размера в процентах. Этот метод задания размера так же можно отнести к относительным. В данном случае новый размер указывается в процентах от размера шрифта, установленного в браузере, как размер шрифта по умолчанию.
Пример:
{font-size:50%}
3.Ширина символов
Под шириной символов понимаются два стандартных значения - normal и bold. Используя синтаксис:
{font-weight: ширина_символа},
получим 2 варианта:
1. {font-weight: normal},
2. {font-weight: bold}.
При необходимости можно изменить ширину символов какой-либо части текста относительно другой части текста, ширина символов которой остается неизменной. Для этого применяются следующие значения свойства font-weight:
1. bolder - для выделения текста жирным шрифтом, как это сделано в примере:
Напечатано <font style="font-weight:bolder">жирным</font> шрифтом.
2. lighter - если надо сделать выделяемый текст тоньше:
<B>Напечатано <font style="font-weight:lighter"> нормальным</font> шрифтом.</B>
Пример с использованием всех четырех способов задания ширины шрифта (рис. 4.5).
<html><head></head>
<body>
<font style="font-weight:bold">Напечатано жирным шрифтом.</font><br>
<font style="font-weight:normal">Напечатано нормальным шрифтом.</font><br>
Напечатано <font style="font-weight:bolder">жирным</font> шрифтом.<br>
<B>Напечатано <font style="font-weight:lighter"> нормальным</font> шрифтом.</B><br>
</body></html>
Рисунок 4.5 - Пример использования методов задания ширины шрифта
Задание ширины символов с помощью численного ряда. Указанный метод задания ширины символа не является универсальным, т.к. нет единого стандартного значения для таких параметров, как normal или bold. Эти параметры определяют ширину символа для шрифтов-членов одного шрифтового семейства: какой-то из них тоньше относительно другого, какой-то толще. Например, жирный шрифт Arial Bold шире нормального Arial, но это не значит, что он шире какого-то другого нежирного шрифта, даже если тот относится к семейству бессерифных шрифтов. Прямое указание шрифта невозможно, поэтому предусмотрена возможность задания ширины символов путем присваивания им значения из числового ряда от 100 до 900 - 100, 200, 300, 400, 500, 600, 700, 800, 900. Причем значение 400 соответствует нормальной ширине символов шрифта, а 700-жирной. Назначается числовое значение точно в соответствии с приведенным выше синтаксисом, например:
{font-weight: 700}.
4.Начертание шрифта
Наиболее распространенными являются два стиля начертания того или иного шрифта - нормальный и наклонный. Синтаксис задания стиля начертания:
{font-style: начертание_шрифта}
Для задания нормального стиля начертания свойство font-style приобретает значение normal:
{font-style:normal}.
Для задания наклонного стиля - italic:
{font-style:italic}.
Для некоторых шрифтов наклонное начертание задается значением oblique.
5.Вариант шрифта
Существуют два варианта шрифтов :normal и small-caps, записываемые в соответствии с синтаксисом:
{font-variant: вариант_шрифта}.
Первый вариант предусматривает привычное, нормальное начертание букв, а второй используется для написания текста прописными буквами, но меньшего, чем предусмотрено для данного шрифта в нормальном значении размера. Если какой-то шрифт для отображения текстов в этом варианте не указан специально, то берется шрифт, указанный как шрифт по умолчанию, причем соответствующий текст отображается прописными буквами, но меньшим кеглем (рис. 4.6).
Если выбранный шрифт предполагает только один размер символов, то текст отображается просто прописными буквами.
Пример:
<html><body>
Текст в варианте Normal и <font style="font-variant:small-caps">
Текст в варианте Small-caps</font>
</body></html>
Рисунок 4.6 - Пример использования вариантов шрифтов normal и small-caps
6.Сокращенная запись
В некоторых случаях, когда при назначении стиля указывается сразу несколько значений разных параметров, рекомендуется использовать сокращенные записи. При этом значения normal считаются принятыми по умолчанию и не указываются. Таким образом, запись
H1 {font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;}
преобразуется в запись
H1 {font: bold 12pt/14pt Helvetica}.
Контрольные вопросы.
1. Какие свойства используются для назначения размеров шрифтов? Приведите примеры.
2. Какое свойство используется для назначения расстояния между буквами и словами? Перечислите основные значения.