Определение размера шрифта
Лабораторная работа №6
Управление шрифтом и текстом с помощью таблиц стилей CSS
Цель работы:изучить основы управления шрифтом и текстом с помощью таблиц стилей CSS, освоить практические навыки по использованию свойств шрифта и текста на web-странице.
I. Управление шрифтом
Оформление – один из самых мощных способов донести идеи создателя сайта до посетителя. Правильно оформленный текст позволяет читателю наиболее быстро разобраться в содержании сайта.
Шрифт – неотъемлемая часть любого документа. Такие эффекты как курсив или полужирное начертание, позволяют дизайнерам выделить важные места в документе и обратить на них внимание посетителя.
На web-страницах с помощью CSS можно просто менять тип шрифта или придавать ему курсив или полужирное начертание, как в случае с HTML-тегами. Таблицы стилей позволяют задавать общий тип шрифта, устанавливать различную толщину букв, тип курсива и размер шрифта, используя стандартные обозначения, заимствованные из области книгопечатания.
Семейство шрифтов (font family) – это набор шрифтов с похожими характеристиками. В web существует пять основных типов шрифта (таблица 1).
Таблица 1
Типы шрифта
| Тип шрифта | Пример | Характеристика шрифта |
| serif | Times New Roman | На концах линий, составляющих буквы, есть маленькие черточки (засечки). Такое написание позволяет выделять отдельные буквы. Этот тип подходит для текста предназначенного для распечатки. На экране буквы будут не ясными, если размер шрифта маленький. |
| sans-serif | Arial | Буквы данного шрифта не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера. |
| monospace | Courier New | Все символы этого типа шрифта одинаковы по ширине. Например буква «i» занимает столько же места сколько и буква «m» по ширине. Этот шрифт подходит для текстов, в которых важна каждая буква, например для программных кодов. |
| cursive | Monotype Corsiva | Имитирует письмо от руки, его лучше использовать для украшения текста или смысловых выделений. |
| fantasy | Webdings (Webdings) | Лучше использовать в качестве украшений |
Определение типа шрифта
1. Введите название свойства и поставьте двоеточие:
font family:
2. Укажите название шрифта, который будете использовать:
Georgia
3. Можно написать несколько типов шрифтов через запятую:
, “Times New Roman”, palatino
4. После последней запятой укажите семейство шрифтов, к которому относиться используемый шрифт:
, serif;
Из всех перечисленных в списке шрифтов браузер выбирает первый. Если этот тип шрифта ему недоступен, браузер просматривает список далее до тех пор, пока не найдет шрифт, имеющийся на компьютере пользователя. Если не находит подходящего шрифта, используется шрифт, установленный в браузере посетителя по умолчанию. Если вы определите семейство шрифта, браузер найдет максимально похожий шрифт.
Названия шрифтов, состоящие из нескольких слов, нужно заключать в кавычки, например: “Times New Roman”
Пример 1
<html>
<head>
<style type="text/css">
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
}
h3 {
font-family: "Courier New", Courier, Monaco, monospace;
}
.copy {
font-family: Arial, Helvetica, Geneva, sans-serif;
}
</style>
</head>
<body>
<br>
<h1> Введение </h1>
<p>Электронная коммерция …...</p>
<h3> Инструментарий Microsoft и электронная коммерция </h3>
<p class="copy"> Быстрое развитие коммуникационных технологий....
</p>
</body>
</html>
Рис.1. Определение типов шрифта
Определение размера шрифта
Обычно шрифт устанавливается с помощью тега <font> (например <font face=”arial”>………<.font>). Вероятно этот способ скоро выйдет из употребления, так как в последних версиях HTML, соответствующих стандартам, тег <font> отсутствует, его рекомендуется заменять CSS.
Основные проблемы, возникающие при использовании тега <font>, заключаются в следующем:
1. Этот тег нужно добавлять каждый раз, когда необходимо установить шрифт. Соответственно размер файла значительно увеличивается;
2. Менять свойства шрифта нужно в каждом теге, что очень не удобно.
CSS решает обе эти проблемы. Не добавляя дополнительных тегов, можно управлять видом текста, заключенного в тег, внося изменения лишь в одну строку документа.
В HTML есть семь различных размеров шрифта, но все они связаны с размером, установленным по умолчанию посетителем страницы. С помощью CSS можно изменять размер текста на экране несколькими способами, включая традиционное изменение размера в точках, проценты, абсолютный размер и даже размер, зависящий от окружающего текста.
Алгоритм:
1. Введите font-size и поставьте двоеточие:
font-size:
2. Укажите размер шрифта одним из следующих способов:
- в единицах длинны – измеряется в пунктах;
- используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large;
- smaller и larger описывает размер по отношению к размеру родительского элемента;
- в процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например 75%).
Пиксели и пункты:
Аббревиатура pt обозначает пункт. Это один из способов указания размеров шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Лучше измерять шрифт в пикселях (px).Пиксели не всегда надежны, но результат их использования более точен.
Между пикселями и пунктами не существует однозначного соответствия, но можно считать, что 12px примерно совпадает с 12pt.
Пример 2
<html>
<head>
<style type="text/css">
.copy {
font-size: 12px;
}
blockquote {
font-size: 2em;
}
h3 {
font-size: large;
}
</style>
</head>
<body>
<br>
<h3> Введение </h3>
<p class="copy">Электронная коммерция является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
независимо от того, ориентируетесь ли вы на конечного покупателя или работаете с деловыми партнерами.</p>
<blockquote> Инструментарий <br> Microsoft <br> и электронная коммерция <br>
</blockquote>
</body>
</html>
Рис.2. Установление размера шрифта
Курсив
Часто путают два типа стилей – курсив (italic) и наклонный (oblique). Курсивом называется более декоративный тип шрифта с наклоном вправо. Наклонный шрифт представляет собой обычный шрифт, без каких-либо стилизованных украшений, с небольшим наклоном (рис.3).
Рис.3. Курсивное и наклонное начертание
С помощью элемента font-style можно выделить текст курсивом, сделать шрифт наклонным или оставить его начертание обычным (normal).
Пример 3
<html>
<head>
<style type="text/css">
.booktitle {
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
blockquote {
font-family: Arial, Helvetica, serif;
font-style: italic;
}
</style>
</head>
<body>
<br>
<h1 class="booktitle"> Введение </h1>
<p><i>Электронная коммерция- </i> является одним …...</p>
<blockquote>
<p>Инструментарий </p>
<p>Microsoft </p>
<p>и электронная коммерция </p>
</blockquote>
</body>
</html>
Рис.4. Использование курсива в тексте
В примере 3 класс booktitle и все абзацы в <blockquote> выделены курсивом. Заголовок использует шрифт serif, поэтому мы видим курсивный шрифт, блокнот использует шрифт sans-serif, который является наклонным, даже если вы его задаете как курсив.
Толщина шрифта
В стандартном HTML шрифт может быть либо полужирным, либо обычным. CSS позволяет установить несколько уровней «жирности» шрифта, используя способность многих шрифтов иметь разную толщину.
Пример 4
<html>
<head>
<style type="text/css">
.bolder {
font-weight: bolder;
}
p i {
font-weight: normal;
}
</style>
</head>
<body>
<b>Электронная <i>коммерция</i></b>
<p span class="bolder">Является одним из самых … <i>во всех отраслях бизнеса</i>. Она открывает новые возможности …..</p>
<p span class="bolder">Инструментарий <i>Microsoft и электронная коммерция</i> </p>
</body>
</html>
Рис.5.Определение толщины шрифта
В примере 4 создается класс bolder, который делает линии шрифта толще.
Создание Small caps
Small caps полезны для выделения заголовков. С помощью Small caps строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис.6).
Рис.6. Все буквы заглавные, но первая – больше остальных
Пример 5
<html>
<head>
<style type="text/css">
body {
font-size: 24px;
font-family: "Times New Roman", Times, serif;
}
h2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Электронная коммерция</h2>
<p>Является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
независимо от того, ориентируетесь ли вы на конечного покупателя или работаете с деловыми партнерами.</p>
</body>
</html>
Рис.7. Применение small-caps
В примере 5 тег заголовка второго уровня отображает текст маленькими заглавными буквами (small-caps).