1.字体属性是什么？
设置一个字体。
字体属性是什么？
CSS Fonts 是 CSS 的一个模块。
它允许您定义网页字体的样式。
它定义了与字体相关的属性以及如何加载字体资源。
以及当多个字符可用于单个字符时要使用的字形变体。
字体属性样式有6种：
字体系列 ，字体大小，字体粗细，字体倾斜，字体行高，复合属性.
1.* font-family ：设置字体系列
2.* font-style：设置字体样式
3.* font-weight：字体粗细
4.* font-variant ：字体变形
5.* line-height：行高
6.* font-size：字体大小
7.* font：复合属性
8.@font-face是一条规则.
1. font-family
定义：用于设置页面字体外观。
语法
body{
font-family: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: Georgia 乔治亚，英文字体，苹果中文字体，window中文字体，通用非衬线字体
}
语法规则：
可以设置多个字体名称或字体系列名称作为属性值
多个字体名称之间使用逗号隔开
-
如果字体名称含有特殊字符需要加引号，比如：
-
'Microsof Yahei'空格是特殊字符 -
'sans-serif'横线是特殊字符 -
'微软雅黑'中文也是特殊字符
-
特殊字体在前，通用字体在后
英文字体在前，中文字体在后
| 平台 | 中文衬线字体 | 中文非衬线字体 | 英文衬线字体 | 英文非衬线字体 |
|---|---|---|---|---|
| 通用 | serif | sans-serif | serif | sans-serif |
| window | 宋体 | 微软雅黑 | Times | arial |
| Mac | 宋体 | 苹方 | San-Francsicol | |
| Andriod | 思源黑体 | |||
| IOS | 苹方 | |||
| 其他 |
说明字体分为两种：
- 通用字体系列：指一系列具有共同风格的字体系列，如衬线和非衬线
- 特殊字体：指某一个字体，比如：微软雅黑、苹方、思源黑体
2.font-size
定义： 定义页面字体的大小
语法:
body{
font-size:相对值|绝对值
}
使用相对单位设置font-size
- 1.关键词：medium 默认值
- 2 .%
- 3 . em
- rem
- vh/vw
使用绝对单位设置font-size
- 6.px，
用法：
在做网页的时候，第一步要确定根字号大小
html{
font-size:16px;/*根元素字号16px*/
font-size:62.5%;/*根元素字号10px*/
}
注意：
在设置页面字号的时候，要有字号层级的意识，也就是说你需要确定：
- 1.页面最大字号：最大的标题元素
- 2.页面最小字号：版权文字、补充说明描述性的文字
- 3.正文字号：一般是14px或16px
- 4.页面字号不能超过5种。
3.font-weight
定义：定义页面字体的粗细。
语法：关键词，数值（没有单位的数值）
属性值含义：
- 关键词： normal：正常粗细。默认值。定义标准的字符。
- bold： 定义粗体字符。
- bolder ：定义更粗的字符。
- lighter ：定义更细的字符。
定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
（比400大的数值加粗，比400小的数值越细）
- lighter ：定义更细的字符。
- 数值：
100
200
300
400
500
600
700
800
900
- 数值：
4.line-height
定义：设置字体行高。
语法：
body{
line-height: 数字| 像素 | 关键词 | 百分比
}
属性值
- normal: 默认值。表示正常的行高。该值是当前元素的字号的1.4倍左右。
- px： 使用px设置行高没有灵活性，不会自动根据字号大小调整行高。
- 百分比：工作原理同px，不够灵活，不会自动根据字号调整行高。
- 数字 : 强烈推荐使用数字设置行高。
数字值会根据元素的字号自动调整行高。
通常，建议行高设置为：字号的1.2 - 2倍之间。
行高是？
示例图.png
- 两条基线之间的距离
- 第一条顶线，和第二条中线的距离。
基线指？
- 基线指一行文字底部对齐的线。
- 对于英文而言，四线三格本的从上向下的第三条线就是基线。
- 对于中文而言，好像没有基线。
三种框
在HTML语言中，存在三种看不见的框，这三种框决定元素的高度。
- 字符框：字符框的高度由font-size决定
- 行框: 行框的高度由行高决定。
- 元素框：全部行框高度之和。
5.font-style设置字体样式
定义:用于定义字体风格。
风格指字体是否倾斜。
语法：
p{
font-style: normal | italic | oblique
}
属性值
- normal: 不倾斜。
- italic : 倾斜。表示对字体进行倾斜处理。
- oblique: 倾斜。表示使用斜体字体显示字符。
6.font-variant
定义：小型大写字母
语法：
h1{
font-variant: normail | samll-caps ;
}
属性值
- normal ： 正常的字符，不转小型大写字母。
- small-caps: 转成小型大写字母。
7.font：复合属性
定义：用于把多个字体属性写在一个声明里。
语法：
body{
font: 粗细 倾斜 字号/行高 字体;
}
示例：
body{
font: bold italic 字号/行高 arial, 'Pingfang SC',Microsoft Yahei','sans-serif'
}
8.font-face规则
1.属性名单词
- Font：字体
- Face：外观
2.定义：@font-face 是一条规则。用于定义元素的自定义字体。
3.语法：
@font-face{/*大括号：1.设置引入自定义字体规则 */
/*font-family是规则符，不是属性。用于描述自定义字体的名称}
font-family:"自定义字体名称"
/*2.url:指定自定义字体文件路径（相对路径、绝对路径）*/
url('自定义字体文件.otf ')
body{
font-family:"serif"}
示例：
字体自定义规则
/* @font-face{
font-family: '文悦新青年体';
src: url(./assets/文悦新青年体.otf);
} */
/* src:描述符：描述自定义文件的位置 */
/* 描述符：用于描述向系统字体列表中添加新字体的 */
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: "阿里妈妈数黑体 Bold";font-weight: 700;src: url("//at.alicdn.com/wf/webfont/IkvVMA2IEEHn/DpSdsrPd5zOiLaGBJiMaj.woff2") format("woff2"),
url("//at.alicdn.com/wf/webfont/IkvVMA2IEEHn/hZDgVIQHLYdfr-y93hsg7.woff") format("woff");
font-display: swap;
} */
-
自定义字体？
自定义字体是非系统字体。也是非安全字体。
5.什么是安全字体？
- 安全字体就是系统字体。
- 系统字体就是安全字体
设置font-family：首行安全字体。
@font-face规则出现了之后，我们可以在页面中引入非安全字体。 - 文件夹名有价值的资料：assets
otf:有些浏览器不太支持
woff：压缩过的，适用于W3shool
6.自定义字体免费字库 - www.iconfont.cn
- 英文字库：谷歌字库
创建自定义字体的步骤：（3）
1.第一步：
- 确定文件位置：把自定义字体文件复制到项目目录下
- 确定文件位置：引用在线字体。
2.第二步：添加：使用@font-face规则把自定义字体文件添加到本地字库系统中
3.第三步：引用：使用@font-family引入自定义字体（woff 、otf）
