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 do I make text bold in HTML?
I’m trying to make some text bold using HTML, but I’m struggling to get it to work.
Here’s what I’m trying:
Could someone tell me what I’m doing wrong?
10 Answers 10
use <strong> or <b> tag
also, you can try with css <span style=»font-weight:bold»>text</span>
HTML doesn’t have a <bold> tag, instead you would have to use <b> . Note however, that using <b> is discouraged in favor of CSS for a while now. You would be better off using CSS to achieve that.
The <strong> tag is a semantic element for strong emphasis which defaults to bold.
The Styling Way:
From: http://www.december.com/html/x1/
<b>
This element encloses text which should be rendered by the browser as boldface. Because the meaning of the B element defines the appearance of the content it encloses, this element is considered a «physical» markup element. As such, it doesn’t convey the meaning of a semantic markup element such as strong.
<strong>
Description This element brackets text which should be strongly emphasized. Stronger than the em element.
- Some <b> text </b> that I want emboldened.
- Some <strong> text </strong> that I want emboldened.
- Some <span style=»font-weight:bold»> text </span> that I want emboldened.
Could someone tell me what I’m doing wrong?»
«bold» has never been an HTML element («b» is the closest match).
HTML should contain structured content; publisher CSS should suggest styles for that content. That way user agents can expose the structured content with useful styling and navigational controls to users who can’t see your suggested bold styling (e.g. users of search engines, totally blind users using screen readers, poorly sighted users using their own colors and fonts, geeky users using text browsers, users of voice-controlled, speaking browsers like Opera for Windows). Thus the right way to make text bold depends on why you want to style it bold. For example:
Want to distinguish headings from other text? Use heading elements («h1» to «h6») and suggest a bold style for them within your CSS («h1, h2, h3, h4, h5, h6
Want to embolden labels for form fields? Use a «label» element, programmatically associate it with the the relevant «select», «input» or «textarea» element by giving it a «for» attribute matching an «id» attribute on the target, and suggest a bold style for it within your CSS («label
Want to embolden a heading for a group of related fields in a form, such as a group of radio choices? Surround them with a «fieldset» element, give it a «legend» element, and suggest a bold style for it within your CSS («legend
Want to distinguish a table caption from the table it captions? Use a «caption» element and suggest a bold style for it within your CSS («caption
Want to distinguish table headings from table data cells? Use a «th» element and suggest a bold style for it within your CSS («th
Want to distinguish the title of a referenced film or album from surrounding text? Use a «cite» element with a class («cite ), and suggest a bold style for it within your CSS («.movie-title
Want to distinguish a defined keyword from the surrounding text defining or explaining it? Use a «dfn» element and suggest a bold style for it within your CSS («dfn
Want to distinguish some computer code from surrounding text? Use a «code» element and suggest a bold style for it within your CSS («code
Want to distinguish a variable name from surrounding text? Use a «var» element and suggest a bold style for it within your CSS («var
Want to indicate that some text has been added as an update? Use an «ins» element and suggest a bold style for it within your CSS («ins
How to Bold, Italicize & Format Text in HTML
If you work exclusively in a content management system like CMS Hub or WordPress, you can bold, italicize, and underline text with a click of the button. But if your toolbar doesn’t offer the exact formatting option you want, or you’re not working in a CMS, you’ll need to know how to bold in HTML.
No problem — in this post, we’ll start by discussing some use cases for formatting text. Then, we’ll walk through the process for creating bold, italicized, underlined, strikethrough, inserted, marked, subscript, and superscript text.
How to make my font bold using css?
I’m very new to HTML and CSS and I was just wondering how I could make my font bold using CSS.
I have a plain HTML page that imports a CSS file, and I can change the font in the CSS. But I don’t know how to make the font bold, can anyone help me?
10 Answers 10
You can use the CSS declaration font-weight: bold; .
I would advise you to read the CSS beginner guide at http://htmldog.com/guides/cssbeginner/ .
You can use the strong element in html, which is great semantically (also good for screen readers etc.), which typically renders as bold text:
Or you can use the font-weight css property to style any element’s text as bold:
You’d use font-weight: bold .
Do you want to make the entire document bold? Or just parts of it?
Sine you are new to html here are three ready to use examples on how to use CSS together with html. You can simply put them into a file, save it and open it up with the browser of your choice:
This one directly embeds your CSS style into your tags/elements. Generally this is not a very nice approach, because you should always separate the content/html from design.
The next one is a more general approach and works on all «p» (stands for paragraph) tags in your document and additionaly makes them HUGE. Btw. Google uses this approach on his search:
You probably will take a couple of days playing around with the first examples, however here is the last one. In this you finally fully seperate design (css) and content (html) from each other in two different files. stackoverflow takes this approach.
In one file you put all the CSS (call it ‘hello_world.css’):
In another file you should put the html (call it ‘hello_world.html’):
Hope this helps a little. To address specific elements in your document and not all tags you should make yourself familiar with the class , id and name attributes. Have fun!