Introduction to CSS Font Change
The CSS font change is one of the property is used to set the fonts and display them in the web pages mainly depends upon the font-family moreover; we used in the all type of scenarios web pages based on the customer requirements the shorthand property is used for the font-style, font-variant, font-weight, font-stretch, font-size, line-height and font-family the available fonts which has been already installed on the font families and is defined by the browsers its also accepted with either the keyword values or any built-in values it must be in numerical formats.
Syntax and Parameters
The CSS codes are written with the html pages using style tags; we can follow some rules and syntax for customized the web pages will be more attractive. We can use font style for creating web applications in the user-friendly with their own attributes, properties, and elements with user-specified values.
<html>
<head>
<style>
.first
{
font: ; //numeric format values supported with some default font-families
}
</style>
</head>
<body>
---some html codes----
</body>
</html>The above codes are the basic syntax for initialized the fonts property with values in the css style sheet. We used mainly in the numeric supported values, either the keyword type of values or predefined values in the css codes. Using these types of supported values, we can call it a parameter or set of arguments used in the font style sheet.
How to change the font in CSS?
In the CSS style codes, we used a lot of attributes, properties with default values. It 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 more user-friendly. Customer satisfaction is important from a business perspective. 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 is one of the default and most widely used in the html codes for calculating the text for placed correctly on the page, and it has more boldness and thickness of different ranges and presentation in the css styles. It helps with the elements in the CSS Style codes. It is mostly used in the <body> tag of the html because <style> also declares and initialized the font style attribute values most probably used in the <head> section of the html web pages.
In font property, it accepts the numerical type of values with some extensions format like pixels, %, etc. These are some default extensions, and the values can be used on either of keyword types of values or some predefined type of numerical values. Some of the font keyword values are normal, bold, lighter and bolder, and the available numerical type of values ranges between 100 to 900 based on user needs. It may vary if suppose the keyword value is normal and it maps to the numerical value is 400 and the value also bold it’s mapped into the 700 to see with any type of effect values ranges rather than the 400 or 700. The font is being used with some built-in faces that match with those specified weights. If the font value ranges of the bold have 700 and normal have 400, the version has part of the font families whatever the browser will use that ranges. If the attributes are not available, the user browser will be mimicked, and automatically it changes the bold or normal version. It will not have mimicked the other unavailable weights fonts, often mainly used with the regular and light type of formats to identify the font weights of the web page with alternate ideas.
Examples of CSS Font Change
Given below are the examples of CSS Font Change:
Example #1
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: 80% sans-serif;
}
div.five {
font: 13px/11px sans-serif;
}
</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:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first > div {
padding: 0 20px;
font-family: 'Open Sans';
}
div.second {
font-family: "Times New Roman", Times, serif;
}
div.third {
font-family: Arial, Helvetica, sans-serif;
}
div.four {
font: 80% sans-serif;
}
div.five {
font: 13px/11px sans-serif;
}
div.six {
font-weight: 500;
font: 1rem monospace;
white-space: nowrap;
}
</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>
<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>
<p><small>Welcome <code>To</code> My Domain</small></p>
</div>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-weight: lighter;
font-family: Impact, Charcoal, sans-serif;
font: 80% sans-serif;
}
</style>
</head>
<body>
<h1>Welcome To My Domain</h1>
<p id="first">Have a Nice Day</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:
Conclusion
The font property is used for placing the fonts, and it displays within the web pages with numerical type of values using some extension format like pixels,%, etc. The web pages used the font values in the correct positions because it checks and confirms the other data are not affected in the web pages; it usually supports all types of browsers.
Recommended Articles
This is a guide to CSS Font Change. Here we discuss How to change the font in CSS and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
