Updated June 12, 2023
Introduction to CSS Font List
The CSS font list comprises properties and elements used to set and display fonts on web pages, primarily based on the font family. Moreover, we used all scenario’s web pages based on the customer requirements. We use shorthand properties for the font family. The available fonts 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
Using style tags, we write the CSS codes alongside the HTML pages. We can follow some principles and syntax to make the web pages more appealing. We can utilize font style lists to create user-friendly web applications, and their features, properties, and elements are provided with 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 initializing the font families with values like some font styles used in the css style sheet. We utilized various supported fonts in a user-customized format, incorporating child font properties that accept keywords 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 serve multiple font styles, child attributes, and properties specified with default values. These CSS font style codes support various types of content, including text, numbers, special characters, and more. Using these values, we can enable the particular property of their css attributes to make the presentation more user-friendly. Customer satisfaction is important for the business perspective. We can use the font list element attributes in the html codes; also, it’s one of the default html tags, ID, or Some built-in classes. When we use css fonts, and 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 the fonts placed correctly on the page. 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 declares and initializes the font style attribute values most probably used in the <head> section of the html web pages.
Not all browsers support the entire font list; they may vary depending on 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 are alpha-numerical values with some extensions format like pixels,%, etc. These default extensions allow using values in either keyword type or predefined alpha-numerical formats.
Examples of CSS Font List
Given below are 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 on the web pages with numerical values using some extension format like pixels,%, etc. Also, it checks and confirms the other data are not affected in the web pages. It usually supports all types of browsers.
Recommended Articles
We hope that this EDUCBA information on the “CSS Font List” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
