Introduction to CSS Font List
The CSS font list are their own properties and elements is used to set the fonts and display them in the web pages, mainly depends upon the font family. Moreover, we used all types of scenarios web pages based on the customer requirements the shorthand properties are used for the font family. The available fonts that have been already installed on the font families and defined by the browsers do not support all types of fonts; we need to use multiple fonts with keyword values or any built-in values; it must be in alpha-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 lists that are used for creating web applications with a user-friendly environment, and their attributes, properties, and elements are specified with the user-defined values.
<html>
<head>
<style>
.first
{
font-family: Times New Roman, Arial, Serif, Verdana, Tahoma, Calibri etc ; //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 families with values like some of the font styles are used in the css style sheet. We used the different numbers of supported fonts for the user-customized format, and some child font properties are used either the keyword type of values or predefined values. Using these types of supported values, we can call it a parameter or set of arguments used in the font style sheet.
How Does a Font list done in CSS?
The CSS font style codes are used for a lot of font styles child attributes, properties specified with default values it will be supported for both types like stext, number, special characters, etc. using these type 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. We can use the font list element attributes are in the html codes; also, it’s one of the default html tags, ID, or Some built-in classes. When we use css fonts, families, in html, it depends on the tag-based elements with font-weight,font-sizes, etc. these are the default and most widely used in the css style codes for calculating and operating of the fonts placed correctly on the page, and it has more features like boldness and thickness of different ranges and presentation in the css styles it helps with the elements in the CSS Style codes it’s mostly used in the <body> tag of the html because <style> also declare and initialized the font style attribute values most probably used in the <head> section of the html web pages.
All the Browsers are not supported in the font lists; they may vary depending upon user requirements, so we must use different fonts on the user screen. It defines with the css font family, and the priority of the user browsers will choose with the multiple font families. Generally, fonts are classified into two types of font families 1.Specific font-family and 2.Generic font-family. The specific fonts are Arial, Verdana, and Tahoma. The Generic Fonts are almost all types of user browsers like serif, Sans-serif, Times New Roman, Calibre, etc. In font families, some properties accept the numerical type of values; some of them are alpha-numerical values with some extensions format like pixels,%, etc. these are some default extensions, and the values can be used on either keyword type of values or some predefined type of alpha-numerical values.
Examples of CSS Font List
Given below are the examples of the CSS font list:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first > div {
background-color:green;
padding: 0 20px;
font-family: 'Open Sans';
}
div.second {
font-family: "Times New Roman", Calibri, serif;
}
div.third {
font-family: Arial, Helvetica, sans-serif;
}
div.four {
font: 80% sans-serif;
font-family: Arial,
}
div.five {
font: 13px/11px sans-serif;
font-family: serif,
}
div.six {
font-weight: 500;
font: 1rem monospace;
white-space: nowrap;
font-family: Helvetica,
}
</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 #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
div.first {
font-family: inherit;
font-family: initial;
font-family: unset;
}
div.second {
font-family: "Times New Roman", Calibri, serif;
}
div.third {
font-family: Arial, Helvetica, sans-serif;
}
div.four {
font: 80% sans-serif;
font-family: Arial,
}
div.five {
font: 13px/11px sans-serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;
}
div.six {
font-weight: 500;
font: 1rem monospace;
white-space: nowrap;
font-family:Georgia, 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 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>
<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: Lucida Console, Courier, monospace,Verdana, Arial, Helvetica, sans-serif,cursive;
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="2">
<option>0.2
<option>0.3
<option selected="selected">1
</select>
</body>
</html>Output:
Conclusion
The font family list is used for placing the fonts in the web pages with numerical type of values using some extension format like pixels,%, etc., and also it checks and confirms the other datas are not affected in the web pages it usually supports all type of browsers.
Recommended Articles
This is a guide to CSS Font List. Here we discuss How Does Font list done in CSS and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
