font的用途
- 用途一：
font属性可以用来作为font-style,font-variant,font-weight,font-size,line-height和 属性的简写。
与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。虽然不能通过 font 直接设置，但是font-stretch，font-size-adjust 和 font-kerning 也会重置为初始值。
- 用途二：将元素的字体设置为系统字体。
可以将font属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。
如果将 font 指定为系统关键字，则它必须是以下之一：caption,icon,menu, message-box,small-caption,status-bar。
语法：
font =
[ [ <'font-style'> || || <'font-weight'> || ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
caption |
icon |
menu |
message-box |
small-caption |
status-bar
=
normal |
small-caps
=
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
系统字体 font
系统字体 取值如下：
caption：用于标题控件（如按钮，下拉列表等）的系统字体。icon：用于标签图标的系统字体。menu：菜单中（如下拉菜单和菜单列表）使用的系统字体。message-box：用于对话框的系统字体。small-caption：用于小标题控件的系统字体。status-bar：用于窗口状态栏的系统字体。系统关键字前缀：
浏览器经常会多实现几个带前缀的关键字；Gecko 实现了-moz-window,-moz-document,-moz-desktop,-moz-info,-moz-dialog,-moz-button,-moz-pull-down-menu,-moz-list, 和-moz-field.
简写属性 font
使用规则:
必须包含以下值：
可以选择性包含以下值：
必要条件
-
font-style,font-variant和font-weight必须在font-size之前 - 在 CSS 2.1 中
font-variant只可以是normal和small-caps -
line-height必须跟在font-size后面，由"/"分隔，例如"16px/3" -
font-family必须最后指定
字体大小 font-size
指定字体的大小。因为该属性的值会被用于计算em 和 ex 长度单位，定义该值可能改变其他元素的大小。
语法：
font-size =
|
|
|
math
=
|
取值：
关键字
，绝对大小值
xx-small、x-small、small、medium、large、x-large、xx-large
相对于用户的默认字体大小 (medium)。与展示 HTML 的 到 （用户默认字体大小 ）类似。关键字
，相对大小值
larger、smaller；
比父元素的字体大或小，使用与上面的关键字的相近缩放比率。
当单位为em或ex时，大小为相对于父元素的文字的大小。例如，0.5em 就是当前元素的父元素的字体大小的一半。这意味对于font-size属性来说，em单位和百分比单位的作用是一样的。
inherit: 可继承
最好使用用户默认字体大小的相对大小，避免使用除了 em 或 ex 的绝对大小单位。但是如果一定要使用绝对大小的话，px 是众多单位中最好的选择，因为它的含义不会随着操作系统所认为的屏幕分辨率的大小（通常是不对的）改变而改变。
字体大小一致性 font-size-adjust
定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。
语法：
font-size-adjust = none |
取值：
none：
仅根据font-size属性决定字体大小。
根据使小写字母大小 为该值乘以font-size的结果定义字体。通常介入 0 到 1之间。
比较难理解!!!! 咋办？百度一下，发现CSS font-size-adjust 属性简介
这篇文章不错，大神牛逼啊！给大家总结一下。
如下示例，我们给元素设置了尺寸及2种字体。
示例：
body {
font-family: Verdana, Times;
font-size: 20px;
}
明显感觉 Times 字体的可读性比 Verdana 字体要差一些，这就带来了不一致的用户体验，给用户感觉好像是在访问两个截然不同的网站一样。
咋办呢？这个时候就该font-size-adjust起作用了，如下示例：
示例：
body {
font-family: Verdana, Times;
font-size: 20px;
font-size-adjust: 0.5;
}
很明显，虽然使用了不同的字体，但最终的展示效果跟使用 font-size-adjust 之前相比，一致了很多。
这就是使用 font-size-adjust 带来的一致性体验。
字体族 font-family
指定的是一个有先后顺序(优先级从高到低的)的，由字体名或者字体族名组成的列表。来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。
应当至少在使用的 font-family 列表中添加一个通用的字体族名，可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。
语法：
font-family =
[ | ]#
取值：
-
例如："Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号，例如：
font-family: "Gill Sans Extrabold";
font-family: "Goudy Bookletter 1911";
-
是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。在列表的末尾应该至少有一个通用字体族名。以下是该属性可能的取值以及他们的定义。
例如：
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;
font-family: "Gill Sans Extrabold", sans-serif;
serif：带衬线字体，笔画结尾有特殊的装饰线或衬线。sans-serif：无衬线字体，即笔画结尾是平滑的字体。monospace：等宽字体，即字体中每个字宽度相同。cursive：草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。fantasy：Fantasy 字体主要是那些具有特殊艺术效果的字体。system-ui：从浏览器所处平台处获取的默认用户界面字体。math：针对显示数学相关字符的特殊样式问题而设计的字体。emoji：专门用于呈现 Emoji 表情符号的字体。fangsong：一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。
注意：不同浏览器，效果也是不一样的。
字体风格 font-style
语法：
font-style =
normal |
italic |
oblique ?
取值：
normal：选择 font-family 的常规字体。italic：选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。oblique：选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代。oblique：可变字体 可以精确控制oblique字体的倾斜程度。
注意： 不是所有的字体都有确切的 oblique 和 italic 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形。下面是一个使用这两种字形渲染字体的示例：
小体型大写字母 font-variant
font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures,font-variant-east-asian等属性的简写。
也可以使用简写font 设定font-variant在 CSS Level 2 (Revision 1) 中的值（即normal或 small-caps ）。
简写属性 font-variant
font-variant-caps：使您可以控制大写字母特殊字符的使用。
详情戳这里font-variant-numeric：控制数字，分数和序号标记的替代字形的使用。
详情戳这里font-variant-alternates：控制备用字体的使用。
详情戳这里font-variant-ligatures：控制着其所应用元素文本的ligatures与contextual forms(被丢弃了) 。会使文字最终的表现形式更加统一。
详情戳这里
功能强大，但是没见过示例，也没搞懂，有明白的小伙伴可以给解释一下或者留个链接。
-
font-variant-east-asian：控制了东亚脚本（如日语和中文）的替代字形的使用。
详情戳这里
取值：
-
normal：关闭一切特殊字符变体的使用。 -
small-caps：小型大写字母：指使用大写形式，但尺寸与对应小写字母相同的字母。
示例：
font-variant: normal;
font-variant: small-caps;
字体粗细 font-weight
指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。
语法：
font-weight =
|
bolder |
lighter
=
normal |
bold |
取值：
normal：正常粗细。与 400 等值。bold：加粗。与 700 等值。lighter：比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。bolder：比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
一些常用的数值对应于通用的字体重量名称，如下：
相对粗细值的解析
当指定的是相对粗细值 lighter 或 bolder 时，将使用如下图表来决定元素渲染时的绝对粗细值：
| 继承值（Inherited value） | bolder |
lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
常见粗细值名称和数值对应
| 数值 | 名称 |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
回退机制 详情
如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。
取值规律
font-weight 数值采取离散式定义（使用 100 的整倍数）。
数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，
遇到 *50 时，将向上转换，如 150 将转换为 200。
行间距 line-height
详情见 CSS - 文本 Text篇。
字体伸缩 font-stretch
允许我们从 字体系列 中选择 普通的、扩展的、压缩的 字体，此属性将文本设置为与字体的默认宽度相比更宽或更窄。
它不适用于任何字体，但仅适用于具有 font-variant 字体的 font-family。即，仅适用于具有扩展面和压缩面等附加面的字体；否则，对于没有压缩或扩展面的字体将无影响。。
语法：
font-stretch =
normal |
| （禁用了）
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
取值：
-
normal：这是默认值，不会拉伸任何字体。
-
semi-condensed：它稍微压缩了元素的文本字符。此值使文本比正常更窄，但不会比压缩更窄。 -
condensed：该值使文本比 semi-condensed 窄，但不比 extra-condensed 窄。 -
extra-condensed：该值使文本比 condensed 窄，但不比 ultra-condensed 窄。 -
ultra-condensed：该值使文本极度缩小。最窄的。
-
semi-expanded：它稍微加宽了元素的文本字符。此值使文本比正常更宽，但不会比扩展更宽。 -
expanded：该值使文本宽于 semi-expanded 但不宽于 extra-expanded。 -
extra-expanded：该值使文本宽度大于展开但不大于 ultra-expanded。 -
ultra-expanded：该值使文本非常宽。最宽的
中文网站应该不需要吧？不确定啊，有懂的小伙伴，底下留言交流。
字体字距 font-kerning
设置是否使用字体中储存的字距信息。
Kerning（字距）定义了字母的分布情况。对于良好地规定了字距的字体，字距特性使得字母分布更为统一，阅读体验更佳。如下图所示：CSS字型
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
- 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
-
serif：衬线字体。 -
sans-serif：无 衬线字体。
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读。
字体系列 - font-family
- font-family 属性设置文本的字体 系列，也可以单一设置。
- font-family 属性 用于
设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意:
1、 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
2、多个字体系列是用一个逗号分隔指明：
//.html
字体 font
//.css
.font-family{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
-
'Courier New'|Courier(计算机字体) |monospace(等宽字体)
font-family:'Courier New';
...
-
'Franklin Gothic Medium'|'Arial Narrow'(狭窄宋体) |Arial(宋体) |sans-serif
font-family:'Franklin Gothic Medium';
...
-
'Gill Sans'|'Gill Sans MT'|Calibri(西文正文字体) |'Trebuchet MS'
font-family:'Gill Sans';
...
-
'Lucida Sans'|'Lucida Sans Regular'|'Lucida Grande'|'Lucida Sans Unicode'|Geneva(日内瓦) |Verdana(一套无衬线字体)
-
'Segoe UI'(微软雅黑) |Tahoma(大河马字体)
-
'Times New Roman'(新罗马字体 / 标楷体) |Times|serif
字体样式 - font-style
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
//.css
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
.oblique {
font-style:oblique 5deg;
}
注意：
对于不常用的字体，不支持italic，可以使用oblique，让没有斜体属性的文字倾斜！
字体大小 - font-size
设置文本的大小，字体大小的值可以是 绝对 或 相对的大小。
注意：
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
//.css
h1 {font-size:40px;}
p {font-size:14px;}
字体单位
-
em、px
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素px。
em的尺寸单位由W3C建议。
px与em的转换公式：
`px / 16 = em`
.css
h1 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
注意：
如果使用 em 单位，则可以在所有浏览器中调整文本大小。
但是在IE浏览器中使用em，调整文本的大小时，会比正常的尺寸更大或更小。
-
%与em组合
在所有浏览器的解决方案中，设置元素的默认字体大小的是百分比：
.css
body {font-size:100%;}
h1 {font-size:2.5em;}
p {font-size:0.875em;}
.html
This is heading 1
This is heading 2
This is a paragraph.
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
字体粗细 - font-weight
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体变形 - font-variant
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
CSS 字体的概念介绍
基线
指的是多数字母排列的基准线，图中红色的线。
基于基线的概念
-
top：指的是最高字符到baseline的值，即ascent的最大值，为负数 -
bottom：指最低字符到baseline的值，即descent的最大值，为正数 -
ascent：是baseline之上至字符最高处的距离，为负数 -
descent：是baseline之下至字符最低处的距离，为正数 -
leading：文字上方可能出现一些特殊的符号
文字的高度 = Descent+Ascent+Leading
降部
超过基线的部分称为降部，如图中的字母'p'