Определение размера шрифта

Обычно шрифт устанавливается с помощью тега <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>

.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>

.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>

<p>Инструментарий </p>

<p>Microsoft </p>

<p>и электронная коммерция </p>

</blockquote>

</body>

</html>

Рис.4. Использование курсива в тексте

В примере 3 класс booktitle и все абзацы в <blockquote> выделены курсивом. Заголовок использует шрифт serif, поэтому мы видим курсивный шрифт, блокнот использует шрифт sans-serif, который является наклонным, даже если вы его задаете как курсив.