字体属性是什么？
- CSS Fonts 是 CSS 的一个模块。
- 它允许您定义网页字体的样式：
- 字体系列
- 字体大小
- 字体粗细
- 字体行高
字体系列是什么？
-
font-family: 字体系列 -
font-size： 字体大小 -
font-weight; 字体粗细 -
line-height：文本行高 -
font-style：字体风格 -
font-variant： 字体变形 -
font： 复合属性
- @font-face规则
字体系列是什么
| 平台 | 中文衬线字体 | 中文非衬线字体 | 英文衬线 | 英文非衬线 |
|---|---|---|---|---|
| 通用字体 | serif | sans-serif | serif | sans-serif |
| window | 宋体 | 微软雅黑 | Times | arial |
| Mac | 宋体 | 苹方 | San-Francsico | |
| ios | 苹方 | 英文衬线 | 英文非衬线 | |
| Andriod | 思源黑体 | 英文衬线 | 英文非衬线 | |
| 其他 |
说明：字体分为两种：
- 通用字体系列：它指一组具有风格的字体系列，比如衬线和非衬线
- 特殊字体：它指某一种字体。比如：微软雅黑、苹方、思源黑体
font- family
定义：用于设置页面的字体的外观。
语法
body{
font-family: Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', 'sans-serif'
}
解析
body{
font-family：英文字体，苹果中文字体，'window中文'
语法规则：
- 可以设置多个字体名称或字体系列名称作为属性值。多个字体名称之间使用逗号隔开
- 如果字体名称含有特殊字符需要加引号，比如：
- 'Microsoft Yahei' 空格是特殊字符
- ' sans-serif' 横线是特殊字符
- '微软雅黑' 中文也是特殊字符
- 特殊字符在前，通用字体在后。
- 英文字体在前，中文字体在后。
font-size
定义
定义页面的字体大小
语法
body{
font-size: 相对值|绝对值；
}
使用相对单位设置font-size
- 关键词：medium 默认值
- %
- em
- rem
- vw/vh
使用绝对单位设置font-size - px
用法： - 在做网页的时候，第一步要确定根字号大小。
html{
font-size: 16px; /*根字号16px*/
font-size: 62.5%; /*根字号10px*/
}
- 在设置页面字号的时候，要有字号层级的意识，也就是说你需要确定：
- 页面最大字号：最大的标题元素
- 页面最小字号：版权文字、补充说明描述性的文字
- 正文字号：一般是14px或16px
font-weight
定义
定义页面字体的粗细
语法
body{
font-weight: 关键词 | 数值
}
line-height属性
定义
设置字体行高
body{
line-height: 数字| 像素 | 关键词 | 百分比
}
属性值
normal: 默认值。表示正常的行高。该值是当前元素的字号的1.4倍左右。
px： 使用px设置行高没有灵活性，不会自动根据字号大小调整行高。
百分比：工作原理同px，不够灵活，不会自动根据字号调整行高。
数字：强烈推荐使用数字设置行高。数字值会根据元素的字号自动调整行高。通常，建议行高设置为：字号的1.2 - 2倍之间。
什么是行高
行高.png
行高指两条基线之间的距离。
什么是基线
基线指一行文字底部对齐的线。
对于英文而言，四线三格本的从上向下的第三条线就是基线。
对于中文而言，好像没有基线。
三种框
在HTML语言中，存在三种看不见的框，这三种框决定元素的高度。
- 字符框：字符框的高度由font-size决定
- 行框: 行框的高度由行高决定。
- 元素框：全部行框高度之和。
font-style属性
定义
用于定义字体风格。风格指字体是否倾斜。
语法
p{
font-style: normal | italic | oblique
}
属性值
- normal: 不倾斜。
- italic : 倾斜。表示对字体进行倾斜处理。
- oblique: 倾斜。表示使用斜体字体显示字符。
font-variant属性
定义 ：定义小型大写字母。
语法
h1{
font-variant: normail | samll-caps ;
}
属性值
- normal ： 正常的字符，不转小型大写字母。
- small-caps: 转成小型大写字母。
@font-face规则
1.属性名称
- font字体
- face外观
2.定义：用于定义元素的自定义字体。
3.自定义字体？
自定义字体是非系统字体。也是非安全字体
4.什么是安全字体
安全字体就是系统字体
系统字体就是安全字体
设置font-family首选安全字体
自从@font-face规则出现后，我们可以在页面中引用非安全字体
5.语法
/*第一步：定义自定义字体*/
@font-face规则{/*大括号：设置引用自定义字体的规则*/
/*font-family是规则符，不是属性。用于描述字体名称*/
font-family:'自定义字体名称'；
/*url：指定自定义字体文件的路径（相对位置、绝对路径）*/
url（'自定义字体文件.otf'）format('otf')
/*第二步：向元素应用自定义字体*/
#logo{
font-family:'自定义字体名称'；
}
body{
font-family:'serif'
}
6.自定义字体免费字库
www.iconfont.cn
英文字库：谷歌字库
知识点
1.font-family属性的用法（4条）
2.设置font-size的值有几种？
- px
- em/rem
- %
- vh/vw
- 关键词
3.行高的属性值有几种？哪种最好？为什么？
