Home >Web Front-end >HTML Tutorial >What are the html fonts?
In HTML web design, the setting of font style is the most basic. Setting appropriate fonts in web pages can improve user experience. Then the font settings mainly use font-related properties such as font-family and font-style in CSS.
Let me introduce you to several common HTML font styles!
Code example:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
h2 { color: green; }
#p1 { font-family: Times, "Times New Roman", serif; }
#p2 { font-family: Helvetica, Arial, sans-serif; }
#p3 { font-family: serif; }
#p4 { font-family: sans-serif; }
#p5 { font-family: monospace; }
#p6 { font-family: cursive; }
#p7 { font-family: fantasy; }
.s1 { font-style: italic; }
.s2 { font-style: oblique; }
.s3 { font-weight: bold; }
.s4 { font-weight: 100; }
.s5 { font-style: normal;}
</style>
</head>
<body>
<h1>字体系列</h1>
<p>与CSS一起使用。两个常见的字体组合列表和五个通用后备字体系列。</p>
一个serif字体家族列表！
<h2>font-family: Times, "Times New Roman", serif</h2>
<p id="p1">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
一个sans-serif字体家族列表！
<h2>font-family: Helvetica, Arial, sans-serif</h2>
<p id="p2">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
serif通用字体系列！
<h2>font-family: serif</h2>
<p id="p3">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
sans-serif通用字体系列！
<h2>font-family: sans-serif</h2>
<p id="p4">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
等宽通用字体系列！
<h2>font-family: monospace</h2>
<p id="p5">
<span class="s1">斜体字体!</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
草书字体家族！
<h2>font-family: cursive</h2>
<p id="p6">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为font-weight: 100;</span>
<span class="s5">正常字体样式！</span>
</p>
幻想通用字体系列！
<h2>font-family: fantasy</h2>
<p id="p7">
<span class="s1">斜体字体！</span>
<span class="s2">字体样式为font-style: oblique; </span>
<span class="s3">字体样式为font-weight: bold;</span>
<span class="s4">字体样式为It sucks in with a 100 font-weight!</span>
<span class="s5">正常字体样式！</span>
</p>
</body>
</html>The front desk effect is as shown below:
font-family Specifies the font family of the element. font-family can save multiple font names as a "fallback" system. If the browser doesn't support the first font, it will try the next one. That is, the value of the font-family attribute is a precedence list of font family names or/and class family names to use for an element. The browser will use the first value it recognizes.
There are two types of font family names:
Specified series name: the name of a specific font, such as: "times", "courier", "arial".
Usual font family names: For example: "serif", "sans-serif", "cursive", "fantasy", "monospace"
Tip: Separate each value with a comma, and Always provide a family name as a last resort.
Note: Use of a specific font family (Geneva) depends entirely on whether that font family is available on the user's machine; this attribute does not indicate any font download. Therefore, it is highly recommended to use a common font family name as a fallback.
font-style attributeDefine the style of the font. This property sets the use of italic, italic, or normal fonts. An italic font is usually defined as an individual font within a font family. Theoretically, the user agent can calculate an italic font based on the normal font.
This article is an introduction to what HTML fonts are. I hope it will be helpful to friends in need!
The above is the detailed content of What are the html fonts?. For more information, please follow other related articles on the PHP Chinese website!