目录
1.字体大小(font-size)
-
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:
-
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用这个公式将像素转换为 em:px/16=em(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:px/20=em)
相对单位长度 | 说明 |
---|---|
em | 相当于当前对象内文本字体的尺寸 |
px | 像素,最常用,推荐使用 |
绝对单位长度 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-font-size{
font-size: 28px;
}
</style>
</head>
<body>
<div>码海无际</div>
<div class="my-font-size">码海无际</div>
</body>
</html>
2.定义字体(font-family)
-
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
-
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
-
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的,font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-font-family{
/*font-family: 宋体;*/
/*font-family: SimSun;*/
/*font-family: \5B8B\4F53;*/
font-family: \5B8B\4F53,\9ED1\4F53;
}
</style>
</head>
<body>
<div>码海无际</div>
<div class="my-font-family">码海无际</div>
</body>
</html>
3.字体加粗(font-weight)
范围值 100 ~ 900 为字体指定了加粗级别。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-font-weight{
/*font-weight: bold;*/
font-weight: 700;
}
</style>
</head>
<body>
<div>码海无际</div>
<div class="my-font-weight">码海无际</div>
</body>
</html>
4.字体风格(font-style)
常用于设置斜体文本,该属性有三个值:
-
normal - 文本正常显示
-
italic - 文本斜体显示
-
oblique - 文本倾斜显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-font-style{
font-style: italic;
}
</style>
</head>
<body>
<div>码海无际</div>
<div class="my-font-style">码海无际</div>
</body>
</html>
5.综合设置字体样式 (font)
-
font属性用于对字体样式进行综合设置
-
可设置的属性是(按顺序): "font-style font-weight font-size/line-height font-family"
-
font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-font-one {
font-style: italic;
font-weight: bold;
font-size: 20px;
font-family: 宋体;
}
.my-font-two {
font: italic bold 20px 宋体;
}
.my-font-three {
font: 20px 宋体;
}
</style>
</head>
<body>
<div>码海无际</div>
<div class="my-font-one">码海无际</div>
<div class="my-font-two">码海无际</div>
<div class="my-font-three">码海无际</div>
</body>
</html>