字体属性是什么？
- CSS Fonts 是 CSS 的一个模块
- 它定义了与字体相关的属性以及如何加载字体资源。
- 它允许您定义字体的样式，例如:
- 它的系列、
- 大小和粗细、行高
- 以及当多个字符可用于单个字符时要使用的字形变体。
创建自定义字体的步骤
- 第一步：确定文件位置把自定义字体文件复制到项目下
- 第二步：使用@font-fale规则把自定义字体文件添加到本地字库系统中
- 第三步：使用font-family引入自定义字体
font:复合属性font-family：设置字体的外观。font-size：页面字体的大小font-weight：设置字体粗细line-height：设置行高font-style：设置字体风格font-variant：小型大写字母
字体属性
| 平台 | 中文衬线字体 | 中文非衬线字体 | 英文衬线字体 | 英文非衬线字体 |
|---|---|---|---|---|
| 通用字体 | serif | sans-serif | serif | sans-serif |
| window | 宋体 | 微软雅黑 | Times | arial |
| Mac | 宋体 | 苹方 | San-Francsico | |
| IOS | 苹方 | 英文衬线字体 | 英文非衬线字体 | |
| Andriod | 思源黑体 | 英文衬线字体 | 英文非衬线字体 | |
| 其他 |
说明：字体分为两种：
- 通用字体系列：它指一系列具有共同风格的字体系列，比如衬线和非衬线
- 特殊字体：它指某一个字体，比如：微软雅黑 ，苹方，思源黑体
font-face
1.属性名单词：
- font:字体
- face：外观
2.定义：用于定义元素自定义字体
3.自定义字体：是非系统字体。也是非安全字体
4.安全字体：安全字体就是系统字体，系统字体就是安全字体
设置font-family首选安全字体。
自从@font-face规则出现后，我们可以在页面中引入非安全字体。
5.语法
@font-face{/*大括号：设置引入自定义字体的规则*/
/*font-family是规则符，不是属性。用于描述自定义字体的名称*/
font-family：'自定义字体名称'
/*url：指定自定义字体文件的路径（相对路径 绝对路径）*/
url('自定义字体文件.otf');
/*第二步：向元素应用自定义字体*/
#logo
}
6.自定义字体免费字库
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:中文字体, 苹果中文字体, 中文字体， sans-serif;
}
语法规则：
- 可以设置多个字体名称或字体系列名称作为属性值
- 多个字体名称之间使用逗号隔开
- 如果字体名称含有特殊字符需要加引号比如：
- 'Microsoft Yahei' 空格是特殊字符
- 'sans-serif' 横线也是特殊字符
- '微软雅黑' 中文也是特殊字符
- 特殊字体在前，通用字体在后
- 英文字体在前，中午字体在后
在 CSS 中，有五个通用字体族：
- 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 非衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体（Cursive）- 模仿了人类的笔迹。
- 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
font-size
定义：页面字体的大小
语法：
body{
font-size:相对值|绝对值；
}
使用相对单位设置 font-size
- 关键词
用法：
- 在做网页的时候，第一步要确认根字号大小。
html{
font-size:16px;
font-size:62.5%; /*根字号为十像素*/
}
- 在设置页面字号的时候，要有字号层级的意识。也就是说你需要确定：
- 页面中最大的字号：<h1></h1>
- 页面中最小字号：版权文字，补充说明描述性的文字
- 正文字号：一般是14像素或者16像素
font-weight属性
定义：用于定义字体的粗细
语法：
body{
font-weight:关键词|数值
}
属性值：
关键词：
- normal：正常粗细 （对中文有效果）
- lighter：更细
- bold：加粗 （对中文有效）
- bolder：更粗 （效果同bold）
数值：
- 100 - 900
- -400：正常粗细
- 比四百大都是加粗。
- 比四百小都是变细。
line-height
定义：设置字体行高
语法：
body{
line-height：数字（没有单位|像素（px）|关键字|百分比；
}
属性值：
- normal：默认值。表示正常的行高，该值大概是当前的元素的字号的1.4倍左右。
- 像素（px）：使用px设置行高没有灵活性，不会根据字号大小调整。
- 百分比 ：工作原理同像素，不够灵活，不会自动根据字号调整行高。
- 数字：推荐使用，数字值会根据当前元素的字号自动调整行高。通常建议行高设置在字号的1.2-2倍之间。
行高指两条基线之间的距离
基线指一行文字底部对齐的线，对于英文而言，四线三格本的从上向下的第三条线就是基线
111.png
字符框：在MTML语言中，存在三种看不见的框，这三种框决定元素的高度。
- 字符框 ：字符框由font-size属性决定
- 行框：行框的高度由行高决定
- 元素框 ：全部行框之和
font-style
定义：用于定义字体风格，字体是否倾斜
语法：
p{
font-style:normal|italic|oblique;
}
属性值：
- normal：默认值，不倾斜。
- italic：倾斜 ，表示对字体进行倾斜处理
- oblique：倾斜 ，表示使用斜体字体显示字符
font-variant
定义：小型大写字母
h1{
font-variant:normil | samll-caps;
}
属性值：
- normil：默认
- samll-caps：小型大写字母
line-height
定义：设置字体行高
语法：
body{
line-height：数字（没有单位|像素（px）|关键字|百分比；
}
属性值：
- normal：默认值。表示正常的行高，该值大概是当前的元素的字号的1.4倍左右。
- 像素（px）：使用px设置行高没有灵活性，不会根据字号大小调整。
- 百分比 ：工作原理同像素，不够灵活，不会自动根据字号调整行高。
- 数字：推荐使用，数字值会根据当前元素的字号自动调整行高。通常建议行高设置在字号的1.2-2倍之间。
行高指两条基线之间的距离
基线指一行文字底部对齐的线，对于英文而言，四线三格本的从上向下的第三条线就是基线
111.png
字符框：在MTML语言中，存在三种看不见的框，这三种框决定元素的高度。
- 字符框 ：字符框由font-size属性决定
- 行框：行框的高度由行高决定
- 元素框 ：全部行框之和
font
字体复合属性：就是把所有的字体属性写在一个声明里面
body{
font:font-style font-weight font-size font-family;
}
注：font-style font-weigh等字体属性必须放在font-size 和 font-family前面
font-size 和 font-family前面的属性值位置随意。
