Not bold html code

font-weight

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Try it

Syntax

/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; font-weight: 700; /* bold */ font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: revert; font-weight: revert-layer; font-weight: unset; 

The font-weight property is specified using any one of the values listed below.

Values

Normal font weight. Same as 400 .

Bold font weight. Same as 700 .

One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system.

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces Variable fonts, which can make use of this much finer-grained range of font weights.

Fallback weights

If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:

• If the target weight given is between 400 and 500 inclusive:
  • Look for available weights between the target and 500 , in ascending order.
  • If no match is found, look for available weights less than the target, in descending order.
  • If no match is found, look for available weights greater than 500 , in ascending order.

  Meaning of relative weights

  When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.

  Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.

  Inherited value	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

  Common weight name mapping

  The numerical values 100 to 900 roughly correspond to the following common weight names (see the OpenType specification):

  Value	Common weight name
  100	Thin (Hairline)
  200	Extra Light (Ultra Light)
  300	Light
  400	Normal (Regular)
  500	Medium
  600	Semi Bold (Demi Bold)
  700	Bold
  800	Extra Bold (Ultra Bold)
  900	Black (Heavy)
  950	Extra Black (Ultra Black)

  Variable fonts

  Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

  For TrueType or OpenType variable fonts, the «wght» variation is used to implement varying widths.

  Note: For the example below to work, you’ll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000 . The demo loads with font-weight: 500; . Change the value to see the weight of the text change.

  Accessibility concerns

  People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.

  Formal definition

  Initial value	normal
  Applies to	all elements. It also applies to ::first-letter and ::first-line .
  Inherited	yes
  Computed value	the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  Animation type	a font weight

  Formal syntax

  font-weight =
  |
  bolder |
  lighter

  =
  normal |
  bold |

  Examples

  Setting font weights

  HTML

  p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" p> div> I'm heavybr /> span>I'm lighterspan> div> 

  CSS

  /* Set paragraph text to be bold. */ p  font-weight: bold; > /* Set div text to two steps heavier than normal but less than a standard bold. */ div  font-weight: 600; > /* Set span text to be one step lighter than its parent. */ span  font-weight: lighter; > 

  Result

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See Also

  Found a content problem with this page?

  This page was last modified on Feb 21, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  Changing Text Style in HTML to Remove Bold Formatting

  To avoid emphasizing importance, you can utilize the tag or apply the style on the element or in the CSS. Moreover, search engines rely on tags to identify significant content, much like how they utilize header tags, etc. However, it’s worth noting that tags may also hold comparable meaning to search engines.

  How do I make the text in the header of my table not bold?

  Conceal the font-weight within the th element using CSS.

  Access the JSBin using this link: http://jsbin.com/lizakatuwe/1/.

  Instead of using a table header, rowspan and td can be used. If a bold text is not desired, font-weight can be overridden in css to normal .

  How can I force text to «normal» (not bold) using css?
  
  
   Solution 1: 
  
  Consider using:
  label 
  Additionally, make sure to indicate the font size since the label seems to be exhibiting a font size that is bigger than the standard.
   Solution 2: 
  
  A label by default is not bold.
  Try to overwrite it with:
   html label.sectiontext
  
  Prioritization can be influenced by both the html and tag name. If "inherit" is ineffective, consider utilizing "normal".
  
   Solution 3: 
  
  Kindly provide a functional example of your code, preferably on jsfiddle or a similar platform.
  In the absence of a code sample, my assumption is that the settings of h4 take precedence over those of the sectiontext class, requiring the inclusion of h4 .sectiontext .
  
  
  Alternative to the HTML Bold tag, This will reduce the affect on screen readers and it probably doesn't make sense to have an entire paragraph emphasized. But on the other hand,
  
  Css the same text word wrapping when changing from plain to bold
  
  
   Solution 1: 
  
  Without JavaScript, achieving your desired outcome is impossible. However, you can make the button's default width equal to its bold width by placing the bold text invisibly within it. This trick will force the button to adjust its size accordingly.
  To display the text content in the ::before pseudo-element, one approach is to store it in an attribute.
  The displayed example contains two buttons, where one is consistently bolded and has a fixed width, while the other behaves normally by increasing its width when bolded for comparison purposes.
  
  
  button:hover < font-weight: bold >button::after < content: attr(data-value); >button.launch::before
  
  Hope this helps as a workaround!
  Adjusting the letter spacing can help you attain this. However, it is important to note that the standard font may not appear suitable in this manner. Nevertheless, its appropriateness may be subject to the intended use.
  button.launch < border: none; width: 120px; letter-spacing: 0.033em; >button.launch:hover
  It's possible to maintain the regular font's letter spacing and only reduce it for the bold font.
  Css bold first word, There is no ::first-word pseudo-element in CSS; you'll have to wrap the first word in an extra element and then select that.
  Alternative to the HTML Bold tag
  Consider using the tag for better accessibility with screen readers. Search engines rely on tags like to identify significant content, similar to header tags such as , , etc. However, can also be used by search engines to convey importance. If you want to emphasize text importance, use . Otherwise, you can use the tag or apply the font-weight:bold; style to the element in the CSS to avoid stressing its significance.
  If you are emphasizing an entire paragraph, it would be more appropriate to use the CSS option as it will have a lesser impact on screen readers. Emphasizing a whole paragraph may not make sense in some cases. However, there are instances where bolding an entire paragraph is necessary, and in those cases, using font-weight:bold; in a class/style would be the way to go.
  Ultimately, any of the codes , , or font-weight:bold; can produce a similar visual outcome, perhaps even identical. However, they carry distinct connotations. It is crucial to utilize header tags such as , , and so on, when highlighting a header.
  The CSS property you have in mind is identified as font-weight .
  Utilize the strong tag for text that possesses significant semantic meaning. For text that lacks such meaning, employ a semantically named class instead. This class must be unambiguous in denoting the element's meaning so as to avoid confusing presentation and data. Once created, reference this class in your CSS.
  HTML
  CSS
  Although the b element is still utilized by some as a presentational hook, it is not deprecated. Nowadays, the strong element is more commonly preferred. It is essential to ensure proper usage of both elements.
  Bold Font in HTML – Font Weight for Letters, Just like the tag, you need to wrap the tag around the text to make the text bold with it. 
  
  Before paying to learn programming,
  Источник
  CSS font-weight Property
  The font-weight property sets how thick or thin characters in text should be displayed.
  
  
  Default value:
  normal
  
  
  Inherited:
  yes
  
  
  Animatable:
  yes. Read about animatable Try it 
  
  
  Version:
  CSS1
  
  
  JavaScript syntax:
  object.style.fontWeight="bold" Try it 
  
  
  Browser Support
  The numbers in the table specify the first browser version that fully supports the property.
  CSS Syntax
  Property Values
  
  
  Value
  Description
  Demo
  
  
  normal
  Defines normal characters. This is default
  Demo ❯
  
  
  bold
  Defines thick characters
  Demo ❯
  
  
  bolder
  Defines thicker characters
  Demo ❯
  
  
  lighter
  Defines lighter characters
  Demo ❯
  
  
  100 
  200 
  300 
  400 
  500 
  600 
  700 
  800 
  900
  Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
  Demo ❯
  
  
  initial
  Sets this property to its default value. Read about initial
  
  
  inherit
  Inherits this property from its parent element. Read about inherit
  
  
  Related Pages
   
  COLOR PICKER
  
   
  Report Error
  If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
  Thank You For Helping Us!
  Your message has been sent to W3Schools.
  Top Tutorials
  Top References
  Top Examples
  Get Certified
  W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
  Источник