<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS字体样式示例</title>
<!-- 从Google Fonts引入外部字体 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', Arial, sans-serif; /* 使用外部字体和备用字体 */
margin: 20px;
line-height: 1.6;
}
h1 {
font-size: 3em; /* 设置标题的字体大小 */
color: #333;
font-weight: bold; /* 设置粗体 */
}
.font-serif {
font-family: serif; /* 衬线字体 */
}
.font-sans-serif {
font-family: sans-serif; /* 非衬线字体 */
}
.font-monospace {
font-family: monospace; /* 等宽字体 */
}
.font-size {
font-size: 1.5em; /* 调整字体大小 */
}
.font-weight-normal {
font-weight: normal; /* 正常字重 */
}
.font-weight-bold {
font-weight: bold; /* 粗体 */
}
.font-style-italic {
font-style: italic; /* 斜体 */
}
</style>
</head>
<body>
<h1>CSS字体样式示例</h1>
<div class="font-serif">
<p class="font-size">这是一个设置了衬线字体和自定义大小的例子。</p>
</div>
<div class="font-sans-serif">
<p class="font-weight-normal font-size">这是一个正常字重、非衬线字体的例子。</p>
</div>
<div class="font-monospace">
<p class="font-weight-bold font-size font-style-italic">这是一个粗斜体等宽字体的例子。</p>
</div>
</body>
</html>
