导读
- 计算机系统字体
- CSS字体家族
- font属性是什么
- font-family属性
- @font-face规则
- font-size属性
- font-weight属性
- line-height属性
- font-style属性
- font-variant属性
- font属性
计算机系统字体
计算机字体：也叫”系统字体“。是计算机操作系统内置的一套用于显示系统文字的电子数据文件。这些电子数据文件主要使用点阵图片或矢量的方法描述了字符的轮廓字形。
英文系统字体文件：通常只描述了26个字母和10个阿拉伯数字及英文标点符号的字形轮廓，总字符数量非常有限，故英文系统字体文件的体积非常小，有些甚至只有10k左右。
中文系统字体文件：通常需要描述5-6千个常用汉字、字母、数字、标点符号的字形轮廓。由于中文的字数太多，通常一个字体文件动辄5-6MB，甚至有的中文字体文件达到10MB以上。
字体家族：字体家族指计算机系统字体的变体的集合。通常，每一种字体都有多种变体。比如标准体、粗体、斜体、粗斜体等变体。
字体风格：通常，计算机操作系统内置多种风格的字体。比如、衬线字体、非衬线字体、等宽字体、印刷字体、手写体、艺术字体等。
常见平台系统字体
| 平台 | 中文衬线字体 | 中文非衬线字体 | 英文衬线字体 | 英文非衬线字体 |
|---|---|---|---|---|
| 通用字体 | serif | sans-serif | serif | sans-serif |
| window Vista | 宋体 | 微软雅黑 | Times | Segoe UI |
| window XP | 宋体 | 微软雅黑 | Times | Tahoma |
| Mac Monterey | 宋体 | 苹方 | San-Francsico Pro | |
| Mac El Capitan | 宋体 | 苹方 | San-Francsico | |
| Mac Yosemite | 宋体 | 苹方 | Helvetica Neue | |
| Mac Mavericks | 宋体 | 苹方 | Lucida Grande | |
| IOS | 苹方 | 英文衬线字体 | 英文非衬线字体 | |
| Andriod | 思源黑体 | Roboto | ||
| Ubuntu | ubuntu |
CSS字体家族
为了覆盖计算机系统字体风格多样化的所有情况，CSS定义了五种通用字体家族：
serif： 衬线字体。特征：有衬线，横细竖粗。比如：Times、Georgia、New Century Schoolbook、宋体。
San-serif：非衬线字体。特征：无衬线、笔画宽度相等。比如：Arial、Helvetica、Gevena、Verdana、Univas、黑体、微软雅黑、苹方、苹果丽黑、思源黑体等。
cursive：手写体。特征：模仿手写。比如：Comic sans、Author、楷体、隶书等。
monospace: 等宽字体。特征：所有字符等宽。比如：Courier、Consolas、Andale Mono等
fantasy: 艺术字体。特征：没有统一特征。
理论上，任何一种具体的字体都可以归属到上述五大类别中。虽然例外情况少见，但是如果浏览器无法解析字体家族的类别，那么最终结果会把把该字体归类到艺术字体中。
在CSS中设置字体的时候，既可以指定字体家族名称，也可以指定具体的字体名称。
font属性是什么
CSS Font 是 CSS 的一个模块。它允许您定义网页字体的样式。常见的样式包括：
- 字体家族
- @font-face规则
- 字体大小
- 字体粗细
- 字体风格
- 行高
font-family属性
定义：指定元素的字体名称或字体家族名称。
示例：火狐浏览器（开发者版）默认font-family设置。
body{
font-family: serif;
}
解释：如果页面不设置font-family属性，那么页面文本使用浏览器默认的字体设置。
示例：把页面字体设置为非衬线字体。
body{
font-family: sans-serif;
}
解释：使用无衬线字体显示页面文字，具体哪一款字体，我不要求。
示例：
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中文字体，通用非衬线字体;
}
设置字体的规则
- 英文字体在前，中文字体在后
- 特殊字体在前，通用字体在后
- 如果字体名称含有特殊字符，建议加引号(如果没有引号，用户代理可能会忽略那个字体名称)。 比如：
body{
/* 特殊字符：横线、空格、汉字 */
font-family: ’Microsoft Yahei‘, '微软雅黑', 'sans-serif';
}
- 多个字体名称之间用逗号分隔
@font-face规则
定义：@font-face 是一条规则。使用@font-face，前端开发者可以向用户代理的字体家族列表中添加新成员。添加之后就可以在font-family属性值中引用；
语法：
@font-face {
font-family: "Trickster";
src: local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff");
}
解释
@font-face {} : 向用户代理的家族列表中添加成员
font-family: 描述符。描述添加到字体家族列表中的字体家族名称。
sr： 设置字体源。可以设置多个源，使用逗号分隔。字体源可以指向任何URI。但是URI有同源限制。
万全之策
@font-face {
font-family: "Trickster";
src: url("trickster-COLRv1.eot");
src: url("trickster-COLRv1.eot?#iefix") format("embeded-opentype"),
url("trickster-outline.woff") format("woff"),
url("trickster-outline.ttf") format("truetype"),
url("trickster-outline.svg#Trickster_adf_regular") format("svg");
}
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属性
定义
定义页面字体的粗细。字体的粗细共有9个级别。从100 - 900。
- 100 相当于lighter
- 200
- 300
- 400 相当于normal
- 500
- 600
- 700
- 800
- 900相当于bolder
语法
body{
font-weight: 关键词 | 数值
}
属性值
- normal: 正常粗细（相当于100-400对中文有效）
- lighter: 更细
- bold： 粗（对中文有效）
- bolder：更粗（效果同bold）
line-height属性
定义: 设置字体行高。
语法
body{
line-height: 数字| 像素 | 关键词 | 百分比
}
属性值
- normal: 默认值。表示正常的行高。该值是当前元素的字号的1.4倍左右。
- px： 使用px设置行高没有灵活性，不会自动根据字号大小调整行高。
- 百分比：工作原理同px，不够灵活，不会自动根据字号调整行高。
- 数字：强烈推荐使用数字设置行高。数字值会根据元素的字号自动调整行高。通常，建议行高设置为：字号的1.2 - 2倍之间。
什么是行高
行高指两条基线之间的距离。
什么是基线
基线指一行文字底部对齐的线。
对于英文而言，四线三格本的从上向下的第三条线就是基线。
对于中文而言，好像没有基线。
三种框
在HTML语言中，存在三种看不见的框，这三种框决定元素的高度。
- 字符框：字符框的高度由
font-size决定 - 行框: 行框的高度由行高决定。
- 元素框：任何一个HTML元素都会生成一个元素框。元素框的高度等于行框高度之和。
font-style属性
定义
用于定义字体风格。风格指字体是否倾斜。
语法
p{
font-style: normal | italic | oblique
}
属性值
- normal: 不倾斜。
- italic : 倾斜。表示对字体进行倾斜处理。
- oblique: 倾斜。表示使用斜体字体显示字符。
font-variant属性
定义 ：定义小型大写字母。
语法
h1{
font-variant: normail | samll-caps ;
}
属性值
- normal ： 正常的字符，不转小型大写字母。
- small-caps: 转成小型大写字母。
font复合属性
定义
font复合属性用于把多个字体属性写在一个声明里。
语法
body{
font: 粗细 倾斜 字号/行高 字体;
}
示例：
body{
font: bold italic 字号/行高 arial, 'Pingfang SC',Microsoft Yahei','sans-serif'
}
知识点
- font-family属性的用法（4条）
- 设置font-size的值有几种？
- px
- em/rem
- %
- vh/vw
- 关键词
- 行高的属性值有几种？哪种最好？为什么？
