Определение размера шрифта
Обычно шрифт устанавливается с помощью тега <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, который делает линии шрифта толще.
Дата добавления: 2016-02-16; просмотров: 542;