Внешний вид текста в html-документе

В данном уроке html мы познакомимся с тегами, отвечающими за внешний вид текста, и научимся этими тегами пользоваться. И так, давайте попробуем в нашем файле html изменить цвет текста какого-нибудь абзаца из серого на зеленый.

За внешний вид текста в html-документе отвечает тег <font>. Это тег парный: значит в конце абзаца нам необходимо его закрыть — </font>.

Сам по себе тег <font> ничего не значит. Важность ему придают его атрибуты. Так что, если мы хотим придать тексту абзаца определенный цвет, мы должны прописать атрибут, отвечающий за цвет. Это атрибут color к которому необходимо добавить значение цвета.

Пример:

<p><font color=»green»>Текст абзаца стал зеленым</font></p>

Так же на примере видно, что тег <font> — вложенный тег, он прописан внутри тега <p>.


Кроме атрибута color, тег <font> имеет еще один важный атрибут — это атрибут face. Он отвечает за шрифт текста — какой шрифт будет использоваться в этом абзаце. Самые распространенные шрифты на сегодня — это Verdana, Tahoma. Рекомендуется пользоваться именно этими шрифтами, так как при использовании экзотических шрифтов, таковых может не оказаться на компьютере посетителя вашего сайта и страница у него будет отображаться стандартным шрифтом.

Пример:

<p><font color=»green» face=»Verdana»>Текст абзаца шрифтом Verdana</font></p>

 

Теперь давайте разберемся со способами выделения в тексте. Бывают моменты, когда необходимо выделить часть абзаца, одно слово или весь абзац. За выделение текста жирным шрифтом отвечает тег <strong>. Именно ту часть текста, которую мы хотим выделить жирным, помещаем внутрь тега <strong>.

Пример:

<p>Текст абзаца<strong>выделение в тексте жирным</strong>текст</p>

Если же мы хотим сделать выделение в тексте курсивом, применяем тег <em>.

Пример:

<p>Текст абзаца<em>выделение курсивом</em>текст</p>


При желании, текст можно выделить и жирным, и курсивом. В этом случае к тегу <strong> добавим еще тег <em>:

Пример:

 

<p>Текст <strong><em>выделение жирным курсивом </em></strong> текст</p>

 

В литературе вы можете встретить, что для выделения текста жирным применяется тег <b>. Это устаревший тег. Именно он использовался для выделения текста жирным в предыдущих версиях языка html. Тоже самое и с курсивом: раньше, для выделения текста курсивом, использовался тег <i>.

Следующий урок — размещение изображения.

 

seodon.ru | CSS справочник — font-weight

Опубликовано: 18. 08.2010 Последняя правка: 08.12.2015

Свойство CSS font-weight используется для изменения жирности (веса, насыщенности) шрифта элемента. Поиск подходящего шрифта браузер осуществляет в пределах списка шрифтов заданных свойством font-family. Например для жирного шрифта Arial браузер будет искать в операционной системе пользователя шрифт Arial с пометкой «bold» или какой-то подобной.

Но тут не все так просто. Максимально допустимая шкала жирности шрифтов имеет девять градаций насыщенности, от самой светлой до самой темной. Но не у всех существующих шрифтов есть эти девять градаций, например один шрифт может иметь только две — regular и bold, другой три — regular, medium и bold, а третий вообще только одну. Причем эти пометки не обязательно называются именно так, допустим вместо regular может быть указано book, а вместо bold — black.

Но и это еще не все. Так как шрифты создавались в разное время, разными людьми и без каких-либо жестких стандартов, то у одного шрифта пометка regular может соответствовать его нормальной насыщенности, а bold — увеличенной. У другого, пометка bold — это нормальная жирность, а heavy — повышенная, так как он в принципе создавался, как жирный шрифт и не имеет светлых вариантов.

Поэтому свойство font-weight не определяет какую-то константу жирности одинаковую для всех шрифтов, оно только задает жирность шрифта и ее порядок в пределах данной гарнитуры.

Тип свойства

Назначение: шрифты.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства font-weight является указание жирности шрифта одним из следующих способов.

  • Число — число от 100 до 900 с шагом в 100, где 100 — самый светлый, 400 — нормальный шрифт данной гарнитуры, 700 — жирный, а 900 — самый жирный. Если шрифт имеет менее девяти градаций, то браузеры объединяют несколько значений. Например, при font-weight равном 100, 200, 300 или 400 они могут использовать шрифт нормальной жирности, при 500 — повышенной, при 600, 700, 800, 900 — самой высокой.
  • normal — нормальная жирность данной гарнитуры, аналог 400.
  • bold — жирный шрифт, аналог 700.
  • bolder — увеличивает жирность шрифта на 100 относительно наследуемой от родительского элемента. Если в данной гарнитуре такого шрифта нет, то устанавливается ближайший более жирный шрифт, который существует (если существует).
  • lighter — уменьшает жирность шрифта на 100 относительно родительского элемента.
  • inherit — наследует значение font-weight от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: normal.

При использовании font-weight: bolder или lighter необходимо учитывать, что дочерние элементы наследуют не эти значения, а те, которые получились в итоге.

Синтаксис

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Пример CSS: использование font-weight

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon. ru - CSS свойство font-weight</title>
  <style type="text/css">
   #div1 {
    font-family: Times, serif; /* шрифт Times */
   }
   #div2 {
   font-weight: bolder; /* увеличение жирности */
   }
  </style>
 </head>
 <body>
  <div>
   Шрифт Times с font-weight: 400.
   <div>
    Times с font-weight: bolder, у него это bold или 700.
    <div>Times с font-weight: bold или 700.</div>
   </div>
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS font-weight.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2. 0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

html — Почему свойство CSS шрифта удаляет полужирный шрифт?

Мне было поручено удалить ненужные теги из сгенерированного компьютером HTML, в котором было много бесполезных тегов (я хотел только сохранить информацию о цвете/сильном/эмблеме). Я нашел что-то похожее на этот HTML:

 
  <диапазон>
    жирный не жирный 
 
жирный не полужирный

Для меня (в chrome и firefox) текст жирным шрифтом отображается жирным шрифтом, а не жирный текст не жирный, и я не понимаю, почему это так. В частности, это усложняет мою задачу: я думал, что могу просто удалить теги, у которых нет информации о цвете/сильном/em, поэтому измените его на что-то вроде этого:

 
   жирный не жирный жирный не жирный

Но теперь все жирнее, чем раньше.

Я пытался выяснить, что я мог бы вставить в FONT стиль для воспроизведения этого поведения:

Замена Arial на foo сохранила поведение:

 
  <диапазон>
    жирный не жирный жирный не жирный

Изменение размера и шрифта изменило поведение:

 
  <диапазон>
    жирный не жирный жирный не жирный

Любое из двух значений само по себе ничего особенного не дает:

 
  <диапазон>
    жирный не жирный жирный не жирный 
  

 
 
 <б>
  <диапазон>
    жирный не жирный жирный не жирный 
  

 
 <б>
  <диапазон>
    жирный не жирный жирный не полужирный



Замена `Arial` на `foo` сохранила поведение:


  <диапазон>
    жирный не жирный жирный не полужирный




Переключение размера и шрифта изменило поведение:


  <диапазон>
    жирный не жирный жирный не полужирный




Любое из двух значений само по себе ничего особенного не дает:


  <диапазон>
    жирный не жирный жирный не полужирный




  <диапазон>
    жирный не жирный жирный не полужирный

Может ли кто-нибудь объяснить это поведение или, по крайней мере, сказать мне, какие стили я должен искать, чтобы отменить внешние стили?

Как сделать текст жирным в HTML?

Вы можете выделить текст полужирным шрифтом, используя теги HTML и . Но эти два варианта не только варианты. Вы также можете выделить жирным шрифтом любой текст в HTML с помощью CSS.

В этом посте я покажу вам все возможные способы выделения текста жирным шрифтом в HTML.

  1. 1 Жирный текст HTML – все возможные способы
    1. 1.1 Использование тега
    2. 1. 2 Использование тега
    3. 1.3 Жирный текст с использованием свойства CSS font-weight
      1. 1.3.1 Типы веса шрифта в CSS
  2. 2 Заключение

HTML полужирный текст – все возможные способы

Использование тега 

 
Amet consectetur adipisicing elit possimus rerum Differentio incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.
 >

См. вывод ниже.

Жирный текст в абзаце с использованием тега

Использование тега 

 
Amet consectetur adipisicing elit possimus rerum Differentio incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.
 >

См. вывод ниже. Выделение текста жирным шрифтом в абзаце с использованием тега

Как видите, этот вывод аналогичен предыдущему.

Жирный текст с использованием свойства CSS font-weight

Как упоминалось ранее, вы не ограничены использованием HTML-тегов и .

Вы также можете использовать CSS, чтобы сделать шрифт или текст полужирным. Помимо числовых значений, вы можете использовать любое из следующего:

 p {
  вес шрифта: полужирный;
  /* ИЛИ */
  вес шрифта: жирнее;
}

Полужирное значение похоже на 700, а более жирный шрифт тяжелее, чем его родитель.

Приведенный выше CSS сделает весь абзац полужирным. Но если вам нужно выделить определенные слова жирным шрифтом, вы можете заключить их в тег или добавить класс CSS или идентификатор. Дополнительные пояснения см. в следующем HTML и CSS.

 
Amet consectetur adipisicing elit possimus rerum Differentio incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.


Amet consectetur adipisicing elit possimus rerum Differentio Incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.


Amet consectetur adipisicing elit possimus rerum Differentio Incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus. 
 
 диапазон {
  вес шрифта: полужирный;
}
/* ИЛИ */
.жирный текст {
  вес шрифта: полужирный;
}
/* ИЛИ */
#жирный шрифт {
  вес шрифта: полужирный;
}

Для приведенных выше HTML и CSS вывод выглядит так, как показано на снимке экрана ниже.

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

Типы толщины шрифта в CSS

Существует множество значений толщины шрифта, которые вы можете выбрать, например, 100, 300, 900, светлее, жирнее, жирнее и т. д.

Но все эти значения веса шрифта делятся на две основные категории: относительные и абсолютные.

Относительный вес шрифта: жирнее, светлее и т.д.

Абсолютный вес шрифта: 400, 700, 900 и все числовые значения являются примерами в этой категории.

Если вы не знаете, «Google Fonts» — отличный и простой в использовании ресурс. И это также бесплатно. Вы можете зайти на их веб-сайт и выбрать один или несколько шрифтов вместе с предпочитаемым весом.

No related posts.