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

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


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.011 сек.