Updated June 9, 2023
Introduction to CSS font-weight
The CSS font-weight property is used to set the weight, representing the fonts’ boldness. According to the customer’s requirements, it depends on the font family used on the web pages. This property not only sets the weight but also determines the thickness or boldness of the available fonts installed within the font families or weights defined by the browsers. It accepts keyword values or any built-in values. It must be in numerical format.
Syntax
The CSS codes are written with the html page using a style tag; we can follow some rules and syntax to customize the web pages to be more attractive. We can use font style to create user-friendly web applications with their attributes, properties, and elements with user-specified values.
<html>
<head>
<style>
.first
{
font-weight: ; //numeric format values only supported
}
</style>
</head>
<body>
---some html codes----
</body>
</html>The above codes are the basic syntax for initializing the font-weight property values in the CSS style sheet. We used only the numeric supported values, either the keyword type of values or predefined values in the CSS codes. Using these two types of supported values, we can call them parameters or sets of arguments in the font style sheet.
How does font-weight work in CSS?
- In the CSS style codes, we used a lot of attributes and properties with default values, which will be both texts, numbers, special characters, etc. using these types of values, we can enable the particular property of their CSS attributes for making the presentation with more user-friendly customer satisfaction is important for the business perspective. For example, we can use the font element attributes in the html codes; it’s one of the default html tags, ID, or Some built-in classes.
- When we use CSS fonts in HTML, the tag-based upon the elements like font-weight, one of the default and most widely used in the html codes for placing the text has more boldness and thickness with different ranges and presentation of the CSS styles. Also, it helps the elements in the CSS Style codes. It is mainly used in the <body> tag of the html because <style> also declares and initializes the font style attribute values most probably used in the <head> section of the html web pages.
- In the font-weight property, we already said it accepts only the numerical type of values that can be either keyword type of values or some predefined type of numerical values. Some of the keywords are normal, bold, lighter, and bolder. The available numerical type of values with some ranges between 100 to 900 based on the user needs may vary if suppose the keyword value is normal. So it maps to the numerical value is 400, and the value is also bold. It is mapped to 700 instead of 400 or 700 to see any effect within specific value ranges. The font is then utilized with built-in faces corresponding to the specified weights.
- Suppose the font value ranges of the bold have 700 and normal have 400. In that case, the version is part of the font family. Whatever the browser will use that ranges if the attributes are unavailable, the user browser will be mimicked, automatically changing the bold or normal version. It will not mimic the other unavailable weights fonts often mainly used with the regular and light formats to identify the font weights of the web page with alternate ideas.
Examples of CSS font-weight
Given below are the examples of CSS font weight:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first > div {
padding: 0 20px;
font-family: 'Open Sans';
}
div.second {
font-weight: 100;
}
div.third {
font-weight: 300;
}
div.four {
font-weight: 200;
}
div.five {
font-weight: 400;
}
div.six {
font-weight: 500;
}
div.seven {
font-weight: 600;
}
div.eight {
font-weight: 700;
}
div.nine {
font-weight: 800;
}
div.ten {
font-weight: 900;
}
div.eleven {
font-weight: 200;
}
div.twelve {
font-weight: 100;
}
</style>
</head>
<body>
<div class="first">
<h3>Have a Nice day</h3>
<div class="second">Welcome</div>
<div class="third">Welcome</div>
<div class="four">Welcome</div>
<div class="five">Welcome</div>
<div class="six">Welcome</div>
<div class="seven">Welcome</div>
<div class="eight">Welcome</div>
<div class="nine">Welcome</div>
<div class="ten">Welcome</div>
<div class="eleven">Welcome</div>
<div class="twelve">Welcome</div>
</div>
<div class="first">
<h3>Welcome Users</h3>
<div class="second">
Have a nice Day
<p>Gud day</p>
</div>
<div class="second">
Welcome
<p>Welcome</p>
</div>
<div class="opacity80">
Gud day
<p>Welcome</p>
</div>
<div class="opacity70">
Gud day
<p>Welcome</p>
</div>
<div class="opacity60">
Gud day
<p>Welcome</p>
</div>
<div class="opacity50">
Gud day
<p>Welcome</p>
</div>
<div class="opacity40">
Gud day
<p>Welcome</p>
</div>
<div class="opacity30">
Gud day
<p>Welcome</p>
</div>
<div class="opacity20">
Gud day
<p>Welcome</p>
</div>
<div class="opacity10">
Gud day
<p>Welcome</p>
</div>
<div class="opacity0">
Gud day
<p>Welcome</p>
</div>
<p><small>Welcome <code>To</code> My Domain</small></p>
</div>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-weight: lighter;
}
</style>
</head>
<body>
<h1>Welcome To My Domain</h1>
<p id="first">We can choose the Opacity value in the given scroll box</p>
<select onchange="demo(this);" size="5">
<option>0.2
<option>0.3
<option>0.4
<option>0.7
<option selected="selected">1
</select>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first > div {
src: url('WWW.facebook.com');
font-family:'MutatorSans';
font-style: normal;
}
div.second {
font: 1rem monospace;
white-space: nowrap;
}
div.third {
font-weight: inherit;
text-transform: uppercase;
font: 1.5rem 'MutatorSans', sans-serif;
}
div.four {
font-weight: initial;
}
div.five {
font-weight: unset;
}
</style>
</head>
<body>
<div class="first">
<h3>Have a Nice day</h3>
<div class="second">Welcome</div>
<div class="third">Welcome</div>
<div class="four">Welcome</div>
<div class="five">Welcome</div>
</div>
<div class="first">
<h3>Welcome Users</h3>
<div class="second">
Have a nice Day
<p>Gud day</p>
</div>
<p><small>Welcome <code>To</code> My Domain</small></p>
</div>
</body>
</html>Output:
Conclusion
The font-weight property highlights the fonts on web pages using numerical values. Web pages ensure the correct usage of these values to avoid any unintended impact on other data within the web pages.
Recommended Articles
We hope that this EDUCBA information on “CSS font-weight” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
