Css text weight: HTML DOM Style fontWeight Property

Содержание

font-weight, font-style и т.д.

Наверняка, из урока по Html вы помните теги «b», «i» и «u», которые делают наш текст жирным, курсивным и подчёркнутым. На самом деле, в CSS есть аналоги этих тегов, которые позволяют сделать тоже самое.

Итак, для того, чтобы сделать текст жирным, мы используем свойство «font-weight» со значением «bold».

.box{
  font-weight: bold;
}

А если у вас, может быть, уже задан «font-weight: bold» и вы хотите сбросить это значение, тогда вы пишете «normal».

.box{
  font-weight: normal;
}

Так же, можно задавать жирность в цифирных значениях. Если шрифт поддерживает разную толщину шрифтов, точнее разную толщину «bold’а». Толщину можно задать значением от 100 до 900.

.box{
  font-weight: 300; // Миниуми: 100, Максимум: 900
}

Дальше, если мы хотим сделать наш шрифт курсивным, то пишем «font-style» и здесь задаёте свойство «italic», и тогда текст становится курсивным.

.box{
  font-style: italic; 
}

Но в случае с «font-style» есть ещё значение «oblique».

.box{
  font-style: oblique;
}

Оно, в принципе, ничего визуально не изменяет, но фактически делаются совершенно разные действия. Если мы делаем «italic», то берётся курсивное начертание шрифта. А вот второе значение, которое очень сложно произносить, «oblique», просто наклоняет текст. Короче, на будущее, просто используем «italic», и больше вам особо ничего не надо.

Дальше, как получить шрифт с нижним подчёркиванием? Для этого используем свойство «text-decoration» и «underline».

.box{
  text-decoration: underline; 
}

Пример: Текст с нижним подчеркиванием

С английского «under» — «низ», «line» — «линия», «линия снизу». Всё логично.

Также у «text-decoration» есть ещё несколько подсвойств. Первое – это «overline», линия сверху.

.box{
  text-decoration: overline; 
}

Пример: Текст с верхним подчеркиванием

Дальше, «line-through», которое делает перечёркивание.

.box{
  text-decoration: line-through; 
}

Пример: ~~Текст с перечеркиванием~~

То есть, на будущее, если вы захотите делать блок с прайсом на что-то, и там будет старая цена и новая цена. Как правило, старая цена подсвечивается красненьким и перечёркивается. С помощью этого CSS-свойства вы можете перечеркнуть текст, и он будет как будто старая цена. Ну, не обязательно это будет старая цена, но, я думаю, можно для таких случаев использовать это свойство. Всё, «line-through», «overline» и «underline». Больше вам пока что тоже ничего не надо.

И ещё одно CSS-свойство, которое нельзя сделать с помощью тегов – это «text-transform». Здесь есть несколько таких свойств. Первое, давайте, рассмотрим «capitalize».

.box{
  text-transform: capitalize; 
}

Что даёт это свойство? Каждая первая буква каждого слова становится заглавной. На самом деле, немножечко странное CSS-свойство. Честно, никогда в жизни его не использовал.

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

Дальше, что нам ещё интересно?

«Lowercase» — это когда все буквы становятся нижнего регистра.

.box{
  text-transform: lowercase; 
}

И наоборот, «uppercase», когда все буквы становятся заглавными или верхнего регистра.

.box{
  text-transform: uppercase; 
}

Бывают такие сайты, где чисто по стилистике все слова пишутся большими буквами, когда каждая буква всегда заглавная. То есть чтобы не писать текст через CapsLock или с зажатым Shift’ом все слова – это неудобно, можно использовать свойство «text-transform: uppercase», и будет вам в принципе счастье. Давайте ещё раз: «capitalize», «lowercase» и «uppercase» — вот три самых важных свойства для этого CSS-свойства.

Собственно, вот так вот можно работать с нашим текстом. Давайте повторюсь. Первое — «font-weight», чтобы делать жирным/нежирным наш текст. «Font-style» для того, чтобы работать с курсивностью. «Text-transform», чтобы делать буквы заглавными и строчными. И «text-decoration», чтобы делать подчеркивание верхнее, нижнее или по центру.

Вот такие классные CSS-свойства. Всё, на этом мы заканчиваем с ними и идём к следующему уроку!

Свойства CSS — font-weight

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

CSS (ЦСС)	CSS (ЦСС)1
Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Аналог ШТМЛ	<B>
Ссылка на спецификацию	http://www. w3.org/TR/CSS21/fonts.ШТМЛ#propdef-font-weight

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный контент — значению 700.

Синтаксис

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

Значения

Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное, bolder — жирное; lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>font-weight</title>
  <style type="text/CSS (ЦСС)">
   h2 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .  select {
    color: maroon; /* Цвет контента */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <h2>Duis te feugifacilisi</h2>
  <p><span>Lorem ipsum dolor sit amet</span>, 
  consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
  dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
  
 </body>
</html>

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

Рис. 1. Применение атрибута font-weight

Объектная модель

[window.]document.getElementById(«elementID»).style.fontWeight

Примечание

Браузер не всегда может адекватно показать требуемую насыщенность шрифта, это зависит от размеров контента и вида шрифта.

Толщина шрифта — Tailwind CSS

Основное использование