Начертание

Метки:

текст

Начертанием называется разновидность оформления шрифта, применяется обычно для изменения контраста текста и акцентирования внимания. Различают следующие типы начертания: нормальное, полужирное, жирное, курсивное, подчеркнутое и перечеркнутое.

Перечеркнутое начертание

Используется для придания тексту эффекта рукописного зачеркивания. Для добавления этого начертания используется тег <DEL> или стилевой атрибут text-decoration со значением line-through. В примере 1 показано использование того и другого варианта.

Пример 1. Перечеркнутый текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Начертание</title>
  <style type="text/css">
   .line {
    text-decoration: line-through;
   }
  </style>
 </head>
 <body>
  <p>Эти <del>придурки</del> чудаки вначале съели Ментос, 
    а затем запили все это Кока-колой. 
    Результат <span class="line">заставил себя ждать</span> сказался сразу же и  
    оказал благотворное воздействие на растущий организм.</p> 
 </body>
</html>

Перечеркнутый текст в данном примере задается с помощью тега <DEL>, а также <SPAN>, для которого добавляется специальный класс line со стилевым атрибутом text-decoration. Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Вид перечеркнутого текста

Подчеркнутое начертание

Подчеркивание применяется для выделения текста, когда другие методы по каким-либо причинам не подходят. На веб-страницах подчеркивание традиционно используется для выделения ссылок, поэтому во всех остальных случаях добавление этого начертания может сбить пользователя с толку.

Добавляется с помощью стилевого атрибута text-decoration со значением underline, как показано в примере 2.

Пример 2. Подчеркнутый текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Начертание</title>
  <style type="text/css">
   P.line {
    text-decoration: underline;
   }
  </style>
 </head>
 <body>
  <p>Это <a href="link.html">ссылка</a></p>
  <p class="line">А это просто подчеркнутый текст.</p> 
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Вид ссылки и подчеркнутого текста

Жирное начертание

Жирное начертание получается за счет увеличенной толщины штрихов символов и применяется для выделения текста и придания ему большей весомости, а также для создания небольших заголовков.

Жирность текста устанавливается с помощью тега <STRONG> или <B>, а также стилевым атрибутом font-weight. В качестве его значений используются числа от 100 до 900 с шагом 100. Светлое начертание, которое может отобразить браузер, имеет значение 100, а жирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, полужирный текст — значению 700. Учтите, что хотя жирное и полужирное начертание и различают, на веб-странице разница между ними может быть не заметна, особенно для мелкого текста.

В примере 3 показано выделение текста с помощью стилей.

Пример 3. Жирное начертание

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Начертание</title>
  <style type="text/css">
   P { margin:  3px 0; }
    .b1 { font-weight: 100; }
    .b2 { font-weight: 400; }
    .b3 { font-weight: 700; }
    .b4 { font-weight: 900; }
  </style>
 </head>
 <body>
  <p class="b1">Светлое начертание</p>
  <p class="b2">Нормальное начертание</p>
  <p class="b3">Полужирное начертание</p>
  <p class="b4">Жирное начертание</p> 
 </body>
</html>

Результат данного примера показан на рис. 3. Как видно, разницы между некоторыми видами начертаний нет, поскольку браузер не в состоянии их отобразить.

Рис. 3

Рис. 3. Вид нормального, полужирного и жирного начертания

Термины

Начертание

Перечеркнутое начертание

Подчеркнутое начертание

Жирное начертание

Отправить комментарий