Толщина шрифта CSS: свойство font-weight
На этой странице
Свойство font-weight определяет вес глифов в шрифте, их степень черноты или толщину штриха.
Ценности имеют следующие значения:
От 100 до 900
Эти значения образуют упорядоченную последовательность, где каждое число указывает на вес, который как минимум такой же темный, как и его предшественник. Они примерно соответствуют обычно используемым названиям веса ниже:
| Значение | Синтаксис |
|---|---|
| 100 | Thin |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
- normal
- То же, что и 400.
- bold
- То же, что и 700.
- bolder
- Задает более жирный вес, чем унаследованное значение.
- lighter
- Задает меньший вес, чем унаследованное значение.
p { font-family: "Arial"; font-style: italic; font-weight: 700 }
p { font-family: "Arial"; font-weight: normal }
p { font-family: "Arial"; font-weight: bold }
p { font-family: "Arial"; font-weight: lighter }
p { font-family: "Arial"; font-weight: bolder }Форматы шрифтов, которые используют шкалу, отличную от шкалы с девятью шагами, должны отображать свой масштаб на шкале CSS так, чтобы 400 примерно соответствовало начертанию, которое было бы помечено как Regular, Book, Roman, а 700 примерно соответствовало начертанию, которое было бы помечено как Bold.
Отображение весов для семейства шрифтов с весовыми гранями 400, 700 и 900Указанные значения bolder и lighter указывают веса относительно веса родительского элемента.
Расчетный вес рассчитывается на основе унаследованного font-weight значения с использованием приведенной ниже таблицы.
| Унаследованное значение | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Приведенная выше таблица эквивалентна выбору следующего относительного более жирного или более светлого начертания, учитывая семейство шрифтов, содержащее нормальные и полужирные грани, а также тонкую и жирную грань.
Авторы, желающие более точно контролировать точные значения веса, используемые для данного элемента, могут использовать числовые значения вместо относительных весов.
Рекомендуемые материалы
Спецификации
Свойства 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.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.
Значения
Пример
ШТМЛ 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
Примечание
Вес шрифта CSS — javatpoint
следующий → ← предыдущая Это свойство используется для установки толщины и жирности шрифта. Синтаксис вес шрифта: нормальный | зажигалка | смелее | жирный | номер | наследовать |начальный | не установлен; Значения свойств легче: Он учитывает существующую толщину шрифта семейства шрифтов и делает ее легче по сравнению с родительским элементом. жирнее: Он учитывает существующую толщину шрифта семейства шрифтов и делает толщину шрифта более тяжелой по сравнению с родительским элементом. жирный шрифт: Как следует из названия, он используется для определения веса полужирного шрифта, а его числовое значение равно 700. номер: Используется для установки веса шрифта на основе указанного числа. начальный: Используется для установки веса шрифта на значение по умолчанию. Давайте посмотрим на пример этого свойства. Пример <голова> нормальная стоимость недвижимости более легкая стоимость свойства более жирное значение свойства полужирное значение свойства числовое значение свойства начальная стоимость недвижимости наследовать стоимость имущества неустановленное значение свойства Протестируйте сейчасСледующая темаCSS font-stretch ← предыдущая следующий → |
Он используется для определения веса текста. Доступный вес зависит от семейства шрифтов, которое используется браузером.
CSS свойство font-weight — GeeksforGeeks 067 html
> < голова >
< title > свойство font-weight title >
< стиль >
body {
font-weight: полужирный;
семейство шрифтов: без засечек;
}
стр.
1 { 9 0068
вес шрифта: полужирный;
}
ч. два {
вес шрифта: светлее; {
вес шрифта: 1000;
}
p.four {
font-weight: initial;
}
стиль > 900 06 головка > < корпус > 9 0068 < h2 >GeeksforGeeks h2 > < h4 9006 7 >Свойство font-weight CSS h4 > < p класс = "один" > Подготовка к набору персонала на основе продукта таких компаний, как Microsoft, Amazon, Adobe и т.
д. с бесплатный онлайн-курс подготовки к размещению. Курс фокусируется на различных MCQ и кодировании вопросы, которые могут быть заданы на собеседованиях и сделайте предстоящий сезон размещения эффективным и успешно. p > < p класс = 9 0067 "два" >
Подготовка к набору персонала на основе продуктов0068
бесплатный онлайн-курс по подготовке к поступлению.
Курс
фокусируется на различных вопросах MCQ и кодировании, которые, скорее всего, будут
вас спросят на собеседованиях и сформулируйте свой предстоящий 9 0006
Сезон размещения эффективный и успешный.
p >
< p класс = "три" >
Подготовка к набору персонала на основе продукта 9000 6
таких компаний, как Microsoft, Amazon, Adobe и т.
д. с
бесплатный онлайн-курс подготовки к поступлению.
Курс фокусируется на различных вопросах MCQ и кодировании
, которые, вероятно, будут заданы на собеседовании, и сделайте свой 9000 6
Предстоящий сезон размещения будет эффективным и успешным.
p >
< p класс = "четыре" >
Подготовьтесь к набору персонала на основе продуктов
таких компаний, как Microsoft, Amazon, Adobe и т.
