字体系列
- 如果有多个单词组成的字体，要对它加引号。
- 样式中可以定义多个字体，浏览器会根据定义好的顺序进行选择，如果用户没有安装第一个字体包，就会依次选择下一个字体来尝试。
- 字体一般定义在body标签中，网页全部内容实用该字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体系列</title>
<style>
h2{
font-family:'微软雅黑';
}
h3{
font-family: Microsoft YaHei;
}
h4{
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>我是宋体</h2>
<h3>我也是微软雅黑</h3>
<h4>依次选择用户已经安装好的字体</h4>
</body>
</html>
结果演示
字体大小
- body里的样式对标题标签和链接标签不起作用，需要单独设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体大小</title>
<style>
body{
font-size: 16px;
}
h1{
font-size: 20px;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>测试</p>
</body>
</html>
结果演示
字体粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体粗细</title>
<style>
.bo{
font-weight: bold;
}
.bo2{
font-weight: 900;/*常用*/
}
h2{
font-weight: 400;
/*
400等价于normal，都是正常粗细
font-weight:normal
*/
}
</style>
</head>
<body>
<h2>不加粗</h2>
<p>我很正常</p>
<p class="bo">我加粗啦</p>
<strong>我也加粗啦</strong>
<p class="bo2">我通过改变数值变粗细</p>
</html>
结果演示
文字样式
|
属性值
|
作用
|
|
normal
|
默认值，浏览器会显示标准的字体样式
|
|
italic
|
浏览器会显示斜体的字体样式
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字样式</title>
<style>
p{
font-style: italic;
}
</style>
</head>
<body>
<p>我是斜体</p>
</body>
</html>
结果演示
