Жирность текста на CSS
В данном уроке мы с вами изучим свойство font-weight , которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold , а чтобы отменить жирность — значение normal .
Это свойство работает аналогично тегу b , который мы с вами уже разобрали. Разница в том, что через CSS управлять жирностью гораздо удобнее — я могу заставить все абзацы стать жирными, а все заголовки — нежирными, сделав всего пару записей в CSS файле.
Если бы я делал жирный через тег b — мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам — мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).
В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:
Скопируйте следующий HTML код себе на страницу:
Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.
font-weight
CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.
Интерактивный пример
Синтаксис
Значения
Нормальное начертание. То же, что и 400 .
Полужирное начертание. То же, что и 700 .
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.
Недоступность заданного значения
Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:
- Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
- Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
- Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
- Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .
Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.
Значение относительных весов
Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:
| наследуемое значение | жирнее | светлее |
|---|---|---|
| 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 |
Определение веса имени
Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:
| Значение | Общее название |
|---|---|
| 100 | Тонкий (Волосяной) Thin (Hairline) |
| 200 | Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light) |
| 300 | Светлый Light |
| 400 | Нормальный Normal |
| 500 | Средний Medium |
| 600 | Полужирный Semi Bold (Demi Bold) |
| 700 | Жирный Bold |
| 800 | Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold) |
| 900 | Чёрный (Густой) Black (Heavy) |
Интерполяция
Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.
How can I remove the bold from a headline?
How do I make the phrase "THIS IS. " not to be bold and the rest without a change?
I couldn’t find any relevant tag in text-decoration.
10 Answers 10
The heading looks bold because of its large size. If you have applied bold or want to change behaviour, you can do:
But be sure that h1 is marked with
You can also set the style with a id or class attribute.
You want font-weight, not text-decoration (along with suitable additional markup, such as <em> or <span> , so you can apply different styling to different parts of the heading)
style is accordingly vis CSS. An example:
I’m not sure if it was just for the sake of showing us, but as a side note, you should always set uppercase text with CSS 🙂
For "THIS IS" not to be bold, add <span></span> around the text:
You can simply do like that in the HTML part:
And in the CSS, you can make it as an h1 block using display:
You will get it as a h1 without bold.
If you want it bold, just add this to the CSS:
You can use font-weight:100 or lighter: this is working with i.e. Opera 16 and older, but I do not know why the h1 tags in Firefox are bolder, sorry.
If you want to remove the bold, you can use the code below,
But for "THIS IS" not to be bold, add <span></span> around the text,
Code example result,
-
The Overflow Blog
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43304
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
как убрать жирный шрифт из заголовка?
Как мне сделать фразу «Это. «не быть смелым и все остальное без изменений?
не удалось найти релевантный тег в текстовом оформлении.
9 ответов:
заголовок выглядит жирным из-за его большой размер, Если вы применили жирный шрифт или хотите изменить поведение, вы можете сделать:
еще:http://www.w3.org/TR/css3-fonts/#font-weight-prop
но убедитесь, что h1 помечен
вы также можете установить стиль с ID или атрибутов класса.
вы хотите шрифт-вес, а не текстовое оформление (наряду с подходящей дополнительной разметкой, такой как <em> или <span> , Так что вы можете применить различные стили к различным частям заголовка)
стиль соответственно vis css. Пример
Я не уверен, что это было просто ради того, чтобы показать нам, но в качестве примечания вы всегда должны устанавливать текст в верхнем регистре с помощью CSS:)
для «это» не должно быть смелым — добавить <span></span> текст
и
вы можете просто сделать это в html-части:
и в css вы можете сделать его как блок h1 с помощью display:
вы получите его как h1 без жирного,
если вы хотите, чтобы он был жирным, просто добавьте это в css:
можно использовать font-weight:100 или легче: это работает с т. е. Opera 16 и старше, но я не знаю, почему h1 теги в Firefox смелее, извините.