1、尺寸单位
- px 像素单位
- % 百分比,参照父元素对应属性的值进行计算
- em 字体尺寸单位,参照父元素的字体大小计算,1em=16px
- rem字体尺寸单位,参照根元素的字体大小计算,1rem=16px
2、字体属性
-
介绍
- CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
-
语法
选择器{ font-family: "字体" } 选择器{ font-family: "字体1", "字体2", "..."; }
-
说明
- 字体之间必须使用 英文状态下的逗号隔开,字体加引号
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:body {font-family: ‘Microsoft YaHei’, ‘tahoma,arial’, ‘Hiragino Sans GB’; }
3、字体大小
-
语法
选择器{ font-size: xx px; }
-
说明
- 谷歌浏览器默认的文字大小为16px(网页的最常用的单位 )
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给 body 指定整个页面文字的大小
4、字体粗细
-
语法
选择器{ font-weight: bold; /* 取值: normal(默认值)、bold(加粗)、100-900*/ }
-
说明
- 400等同于normal,700等同于bold,注意数值后不跟单位
- 400等同于normal,700等同于bold,注意数值后不跟单位
5、字体样式
-
语法
选择器{ font-style: normal; /* 取值: normal(默认值)、italic(倾斜)*/ }
-
说明
- 很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
- 很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
6、字体复合属性
-
语法
选择器{ font: font-style font-weight font-size/line-height font-family; }
-
说明
- 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
7、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字体设置</title>
<style>
/* 在body标签中统一设置字体大小 */
body {
font-size: 18px;
}
span {
font-style: italic;
font-size: 30px;
font-weight: 700;
font-family: "华文琥珀";
}
.sp1 {
/* 针对font的综合写法 */
/* font: normal 600 20px/1.5 "华文行楷"; */
font: 30px/1.5 "华文行楷"; /* 字体大小、字体不能省略*/
}
</style>
</head>
<body>
<span>国庆假期后,再无假期,wuwu</span><br />
<span class="sp1">国庆假期后,一定要好好学习</span>
</body>
</html>
8、总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 通常用 px像素为单位,必须要写单位 |
font-family | 字体 | 按照项目设计来选择字体 |
font-weight | 字体粗细 | 加粗为700或bold、不加粗是normal或400,数字不能跟单位 |
font-style | 字体样式 | 倾斜式 italic,不倾斜为 normal(常用) |
font | 字体连写 | 1、字体连写必须按照顺序 2、字号 与 字体 必须同时出现 |