提示
本文主要讲解 CSS 中字体的相关样式。@ermo
# 字体样式
字体的样式出来颜色之外其他的都是以 font 开头，便于记忆。
# font-family
font-family 表示字体类型，一个选择器可以设置多个字体，使用逗号隔开。
网页会根据系统预装字体进行匹配，从左到右，直到匹配到为止。
sans-serif 代表系统中任意一个无衬线字体。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#div1 {
font-family: 微软雅黑, 黑体, sans-serif;
}
</style>
</head>
<body>
<div id="div1">
Some text
</div>
</body>
</html>
# font-size
font-size 表示字体大小，值的单位为像素。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#p1 {
font-size: 10px;
}
#p2 {
font-size: 16px;
}
#p3 {
font-size: 20px;
}
</style>
</head>
<body>
<p id="p1">字体大小</p>
<p id="p2">字体大小</p>
<p id="p3">字体大小</p>
</body>
</html>
# font-weight
font-weight 表示字体粗细，取值方式有两种。
一种是数字，取值范围为 100~900。
另一种是固定的取值类型：
- normal，正常，为默认值
- ligher，较细
- bold，较粗，开发中常用这种类型
- bolder，很粗
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#p1 {
font-weight: normal;
}
#p2 {
font-weight: lighter;
}
#p3 {
font-weight: bold;
}
#p4 {
font-weight: bolder;
}
#p5 {
font-weight: 100;
}
</style>
</head>
<body>
<p id="p1">字体粗细</p>
<p id="p2">字体粗细</p>
<p id="p3">字体粗细</p>
<p id="p4">字体粗细</p>
<p id="p5">字体粗细</p>
</body>
</html>
# font-style
font-style 表示字体风格，主要有正常和斜体两种。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#p1 {
font-style: normal;
}
#p2 {
font-style: italic;
}
</style>
</head>
<body>
<p id="p1">字体粗细</p>
<p id="p2">字体粗细</p>
</body>
</html>
# color
color 表示字体颜色。字体的属性值取值有两种方式。
一种是使用关键字，即颜色的英文名称。
另一种是使用16进制 RGB 颜色值。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#p1 {
color: blue;
}
#p2 {
color: pink;
}
#p3 {
color: #FF00FF;
}
#p4 {
color: #2b252b;
}
</style>
</head>
<body>
<p id="p1">字体颜色</p>
<p id="p2">字体颜色</p>
<p id="p3">字体颜色</p>
<p id="p4">字体颜色</p>
</body>
</html>
# font
所有 font 开头的属性可以使用 font 属性将样式写在一个属性值中。
语法为：
font: style weight size family
前两项可以省略，省略属性使用默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#p1 {
font: italic bold 30px 宋体;
}
#p2 {
color: 20px 微软雅黑;
}
</style>
</head>
<body>
<p id="p1">字体 font</p>
<p id="p2">字体 font</p>
</body>
</html>