Hey_Coder

【CSS 字体属性（Font）】

CSS 字体属性（Font）

- CSS 字体属性
- - 1. font 属性: 字体的简写属性 / 集中定义字体相关属性
  - 2. font-family 属性: 设置字体族名 (具体/通用,兼顾中西文和多操作系统)
  - 3. font-size 属性: 设置字体大小 (绝对/相对大小关键字,长度值/百分比值)
  - - 3.1 CSS3 font-size-adjust 属性: 字体大小调整 (指定尺寸比 / 保留首选字体的 x-height/ 字体的实际字体大小 / 可读性)
  - 4. font-stretch 属性: 设置字体的伸缩版本 (搭配 font-family 属性)
  - 5. font-style 属性: 设置字体样式 / 字体的倾斜 (搭配 font-family 属性)
  - 6. font-variant 属性: 设置字体的变体 (小型的大写字母 / 简写属性)
  - - 6.1 font-variant-caps 属性: 设置字体变体的大写设置 (小写字母的小型的大写/ 大写字母的小型写法/首字母大写)
    - 6.2 font-variant-east-asian 属性: 设置字体变体的东亚字符的替代符号 (实验中属性)
  - 7. font-weight 属性: 字体的粗细 (搭配 font-family 属性)
  - 8. @font-face: 自定义字体
♣ 结束语和友情链接

CSS 字体属性

（Font）
- 美 [fɑnt] , 字体

用于	属性名	CSS 版本
① 字体的简写属性 / 集中定义字体相关属性	`font`	1
② 设置字体族名 (兼顾具体/通用字体,兼顾中西文和多操作系统)。	`font-family`	1
③ 设置字体大小 (有绝对/相对大小关键字,长度值/百分比值)。	`font-size`	1
④ 字体大小调整 (指定尺寸比 / 保留首选字体的 `x-height`,影响字体的实际字体大小 ) 尺寸比= `x-height` /`font-size`	`font-size-adjust`	3
⑤ 收缩或拉伸当前的字体。设置字体的伸缩版本 (搭配`font-family` 属性)	`font-stretch`	2
⑥ 设置字体样式 / 字体的倾斜 (搭配 `font-family` 属性)。	`font-style`	1
⑦ 设置字体的变体 (小型的大写字母 / 简写属性)	`font-variant`	1
⑧ 设置字体的粗细 (搭配 `font-family` 属性)	`font-weight`	1
⑨ 设置自定义字体 (不是属性,是一种@规则)	`@font-face`	3

1. font 属性: 字体的简写属性 / 集中定义字体相关属性

⑴ 字体的简写属性/ 集中定义字体相关属性: font
- 在一个声明中，一次性设置所有字体属性。
- ① 简写属性: 字体 font 属性,
  - 作为下列 6 个属性的简写
    - ❶ 字体样式/倾斜: font-style
    - ❷ 字体变体/小型大写: font-variant
    - ❸ 字体粗细: font-weight
    - ❹ 字体大小: font-size
    - ❺ 行高: line-height
    - ❻ 字体: font-family
- ② 系统字体: 字体 font 属性, 将元素的字体设置为系统字体。

⑵ 字体的语法
- font: style| variant | weight| size/line-height| family| caption| icon | menu| message-box| small-caption | status-bar;

⑶ 字体的属性值
- svw-sl-f
- Ⅰ. 简写属性
  - ① 字体样式: font-style
    - 设置字体样式。
  - ② 字体异体: font-variant
    - 设置字体异体。
  - ③ 字体粗细: font-weight
    - 设置字体粗细。
  - ④ 尺寸和行高: font-size/line-height
    - 设置字体尺寸和行高。
  - ⑤ 字体系列: font-family
    - 设置字体系列。
- Ⅱ. 系统字体
  - ① 标题字体: caption
    - 设置被标题控件（比如按钮、下拉列表等）使用的字体。
  - ② 图标字体: icon
    - 设置被图标标记使用的字体。
  - ③ 下拉列表字体: menu
    - 设置被下拉列表使用的字体。
  - ④ 对话框字体: message-box
    - 定义被对话框使用的字体。
  - ⑤ 小标题字体: small-caption
    - caption 字体的小型版本。
  - ⑥ 状态栏字体: status-bar,美 [ˈstætəs; ˈstetəs]
    - 设置被窗口状态栏使用的字体。

⑷ 属性值分类
- ① 系统关键字: 如果将 font 指定为系统关键字，则它必须是以下之一的值：
  - caption
  - icon
  - menu
  - message-box
  - small-caption
  - status-bar
- ② 字体相关属性: 如果字体 font 被指定为几个与字体相关的属性的缩写，则:
  - 必须包含的值：
    - font-size
    - font-family(放在最后)
  - 可选择包含的值：
    - font-style
    - font-variant
    - font-weight
    - line-height

⑸ 属性值的顺序: 其他属性 →font-size/line-height → font-family
- ① font-size靠后: font-style, font-variant 和 font-weight ,必须在 font-size 之前
- ② 相连属性: line-height 必须跟在 font-size 后面，由 “/” 分隔，例如 “16px/3” = font-size/line-height
  - 可能因为这两个属性的值太相似,容易混淆,所以指定顺序,不容易弄错
- ③ 最后指定: font-family 必须最后指定
- 顺序: style,variant,weight → font-size/line-height → family

⑹ 未设置的值:= 初始值. 与任何简写属性一样，任何未指定的值都将设置为其对应的初始值
- 值的覆盖: 可能覆盖先前使用非简写属性设置的值。
- 值的重置: 虽然不能通过 font直接设置，但是font-stretch，font-size-adjust 和 font-kerning也会重置为初始值。

⑺ 字体的浏览器支持

2. font-family 属性: 设置字体族名 (具体/通用,兼顾中西文和多操作系统)

⑴ 设置字体 (字体族名): font-family
- ① 可选字体列表:
  - 通过给定一个有先后顺序的优先级列表,这个列表是由 字体族名 组成的 , 为选定的元素设置字体。
- ② 优先级: font-family 属性指定的是一个优先级从高到低的可选字体列表。

⑵ 字体族名 font-family 的用途
- ① 回退 (多个字体备选):
  - 把多个字体名称 , 作为一个“回退”系统来保存。
- ② 使用第一个可用的字体:
  - 如果浏览器不支持第一个字体, 则会尝试下一个。
  - 浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

⑶ 字体族名的语法
- font-family: family-name|generic-family|inherit;

/* 一个字体族名 和 一个通用字体族名 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* 仅有一个 通用字体族名 */
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: inherit;
font-family: initial;
font-family: unset;

⑷ 字体族名的属性值
- 默认值：取决于浏览器。
- ① 具体的字体族名: family-name
  - 例如"Times" 和 “Helvetica” 都是具体的字体族名。
  - 空格和引号: 字体族名可以包含空格，但包含空格时应该用引号。
- ② 通用的字体族名: generic-family
  - 备选机制: 通用字体族名是一种备选机制
    - 在指定的字体不可用时, 给出较好的字体。
  - 不加引号: 通用字体族名都是无空格的关键字，所以不可以加引号。
- ③ 继承父亲: inherit
  - 从父元素继承字体系列。

⑸ 多值
- 一次性可设置多个字体
  - 逗号 , 分隔
- 浏览器会使用
  - 它 可识别的第一个值。
  - 也可以针对中西文分别设置.

⑹ 字体族名的类型
- ① 具体字体族名
  - 具体字体 的名称
    - 比如："times"、"courier"、"arial"。
    - 浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face指定的可以直接下载的字体。
- ② 通用字体族名
  - 比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
  - 通用的字体族名:
    - 至少一个: 应当至少在使用的font-family列表中添加一个通用的字体族名
      - ❶ 没有安装: 因为无法保证用户的计算机内已经安装了指定的字体
      - ❷ 无法下载: 也不能保证使用 @font-face 提供的字体能够正确地下载。
      - ❸ 备选字体: 提供通用的字体族名使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

⑺ CSS 定义的通用字体族名
- 5 种：衬线，无衬线，等宽，草书，艺术。
- ① 衬线字体: Serif 字体 , 美 /ˈserɪf/
  - 带衬线字体，笔画结尾有特殊的装饰线或衬线。效果见以下几个具体的字体族名
  - ❶ Times
    - 汉字和英文,字体都会发生变化
  - ❷ Georgia , 美 /ˈdʒɔːrdʒə/
  - ❸ New Century Schoolbook,
    - 电脑上没有这个字体时,默认显示为浏览器默认样式 (没有设置通用字体族名时)
  - ❹ ★★★ 宋体（SimSun）
    - Windows 下大部分浏览器的默认中文字体，是为适应印刷术而出现的一种汉字字体。
    - 笔画有粗细变化，是一种衬线字体，宋体在字号变大后体验会变差，不建议做标题字体使用。
  - ❺ ★ Times New Roman
    - Mac 平台 Safari 下默认的英文字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。
- ② ★★★ 无衬线字体: Sans-serif 字体 (常被各大网站作为备选字体)
  - 无衬线字体，即笔画结尾是平滑的字体。
    - 中文: 无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线，笔画横平竖直，笔迹全部一样粗细。
  - 效果如下几个示例 ↓
  - ❶ Helvetica
    - 广泛用于全世界使用拉丁字母和西里尔字母的国家。
    - Helvetica 是苹果电脑的默认字体，微软常用的Arial字体也来自于它。
  - ❷ Geneva
  - ❸ Verdana
    - 无衬线字体，在小字上仍结构清晰、辨识容易。
  - ❹ ★★★ Arial
    - Windows 平台上默认的无衬线西文字体，有多种变体，比例及字重（weight）和 Helvetica 极为相近。
  - ❺ Univers
  - ❻★★★ Tahoma 西文字体的首选字体
    - 常见的无衬线字体，字体结构和 Verdana 很相似，间距较小，而且对 Unicode 字集的支持范围较大。
    - Tahoma 优于 Arial 字体:
      - Arial 字体可被 Tahoma 代替，Tahoma 没有 Arial 的一些缺点，一些字符显示相似难分辨.
        
        Tahoma 的大写 I 更容易识别
  - ❼ 微软雅黑（Microsoft Yahei）
    - 无衬线的黑体类字体，提高了字体的显示效果。
    - windows 浏览器常使用的中文字体之一。
  - ❽ 华文黑体（STHeiti）、华文细黑（STXihei）
    - 同一字体族，MAC OS X 10.6 之前的简体中文系统界面的默认中文字体
      - 正常粗细 = 华文细黑，粗体下 = 华文黑体。
    - 华文细黑
    - 华文黑体
  - ❾ 黑体-简（Heiti SC） :
    - 从 MAC OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体
    - 苹果最常用的字体之一，包括 iPhone、iPad 等设备用的也是这款字体。
  - ❿ ★★★ 冬青黑体（Hiragino Sans GB）: 中文字体的首选字体 (先兼顾 mac 系统)
    - 又叫苹果丽黑，清新的专业印刷字体，小字号时足够清晰，Mac OS X 10.6 开始自带有 W3 和 W6 。
- ③ 等宽字体: Monospace 字体
  - 等宽字体，即字体中每个字宽度相同。模拟打字机打出的文本,通常用于代码块.
  - ❶ Courier
  - ❷ Courier New
  - ❸ Andale Mono
  - ❹ ★★ Consolas
    - 等宽的字体，也是无衬线字体。
      - 使用了微软的 ClearType 字型平滑技术，用于显示代码
      - 特别之处是它的“0”字加入了一斜撇，以方便与字母“O”分辨。
- ④ 草书字体: Cursive 字体
  - 这种字体有的有连笔，有的还有特殊的斜体效果。
  - 因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
    - ❶ Zapf Chancery
    - ❷ Author
    - ❸ Comic Sans
  - 模仿 人的手写体
- ⑤ 艺术字体: Fantasy 字体
  - 具有特殊艺术效果的字体。
    - ❶ Western
    - ❷ Woodblock
    - ❸ Klingon

font-family: family-name|generic-family|inherit;

font-family: Times,Georgia,"New Century Schoolbook",Serif;
font-family: Helvetica,Geneva,Verdana,Arial,Univers,Sans-serif;
font-family: Courier,"Courier New","Andale Mono",Monospace;
font-family: "Zapf Chancery",Author,"Comic Sans",Cursive;
font-family: Western,Woodblock,,Klingon,Fantasy;

1 个通用字体族名 = n 个具体字体族名
- 每种通用字体族名,都有很多相对应的具体的字体族名,上方只是示例,不是全部.
参考文章:
- 前端开发你该知道的字体 font-family

⑻ 除了以上 5 种, 其他常用通用字体族名
- ① 默认用户界面字体: system-ui
  - 从浏览器所处平台处获取的默认用户界面字体。
  - 由于世界各地的排版习惯之间有很大的差异，这个通用选项提供的字体不能清楚地映射到其他通用字体.
- ② 数学符号字体: math
  - 针对显示数学相关字符的特殊样式问题而设计的字体
  - 支持上标和下标、跨行括号、嵌套表达式和含义不同的双击符号。
- ③ emoji 表情字体: emoji
  - 专门用于呈现 Emoji 表情符号的字体。
- ④ 汉字字体: fangsong
  - 一种汉字字体，介于宋体和楷体之间。
  - 这种字体常用于某些政府文件。

辅助工具: 预览字体效果网站

⑼ 中文字体的兼容写法
- ① 中文属性值乱码:
  - 部分中文字体，如 font-family: '宋体'，由于字符编码的问题，少部分浏览器解释这个代码的时候，中文出现乱码，这个时候设定的字体无法正常显示。
- ② 中文的英文写法/ unicode编码:
  - 通常会转化成对应的英文写法或者是对应的 unicode 编码
    - font-family:'宋体' → font-family: '\5b8b\4f53'。
      - \5b8b\4f53 = 宋体两个字的 unicode 编码表示。
    - 宋体: \5b8b\4f53
    - 黑体：\9ED1\4F53 = font-family: '\9ED1\4F53';
    - 微软雅黑：\5FAE\8F6F\96C5\9ED1
    - 华文细黑：\534E\6587\7EC6\9ED1
    - 华文黑体：\534E\6587\9ED1\4F53
- ③ 中文字体的英文名

Font-family: SimSun, “宋体”

Font-family: “Microsoft YaHei”, “微软雅黑”

Font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”

⑽ 字体族名加引号的情况
- ① 字体名中间有空格
- ② 中文名字体
- ③ Unicode 字符编码表示的中文字体
- 为了保证兼容性，要在字体名两端添加单引号 / 双引号。

⑾ 字体的定义顺序
- 淘宝首页 body 的字体定义

body {
     
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

字体 = 中英文的首选和替代字体 + 备选的字体.
- ① 西文字体: tahoma → arial
  - ❶ 首选的西文字体:
    - 使用 tahoma 作为首选的西文字体，小字号下结构清晰、阅读辨识容易；
  - ❷ 替代的西文字体:
    - 用户电脑未预装 tohoma，则选择 arial 作为替代的西文字体，覆盖 windows 和 MAC OS；
- ② 中文字体: 冬青黑体 Hiragino Sans GB → 宋体 \5b8b\4f53
  - ❶ 首选的中文字体:
    - 冬青黑体: Hiragino Sans GB 为冬青黑体，首选的中文字体，保证了 MAC 用户的观看体验；
  - ❷ 替代的中文字体:
    - 宋体: Windows 下没有预装冬青黑体，则使用 ‘\5b8b\4f53’ 宋体为替代的中文字体，小字号下有着不错的效果；
- ③ 备选: 最后使用无衬线系列字体 sans-serif 结尾，保证旧版本操作系统用户能选中一款电脑预装的无衬线字体，向下兼容。

⑿ 字体的设置规则
- ① 兼顾中西文
- ② 西文在前，中文在后
  - 中文会影响英文:
    - 由于大部分中文字体也是带有英文部分的，但英文部分不好看，所以放在英文字体后面,
    - 英文字体中大多不包含中文,不影响中文,放在前面。
  - 先设置英文字体:
    - 会设置英文字体，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。
- ③ 兼顾多操作系统
  - 选择字体要考虑多个操作系统。
  - 先定义 mac字体:
    - 拥有 Mac 的人, 都同时安装了 Win 下常用的中文字体（这得归功于 Office for Mac）；但极少有 Win 用户去安装 Mac 下的中文字体.
      - 因此，把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响
    - 宋体优先:
      - 除非有特别的原因，否则尽量保持正文用宋体，标题和其他可以放大些的地方用微软雅黑（针对 Windows）；
    - 冬青黑体:
      - Mac 下的冬青黑体效果极佳，但是该字体在 Mac OS X 10.6 以前是没有的，所以谨慎考虑你的用户群体，或者使用华文黑体系列做 fallback；
- ④ 向下兼容: 以通用字体族名 serif 和 sans-serif 结尾
  - 当使用一些新的字体时，要考虑向下兼容旧的操作系统，使用字体族系列 serif 和 sans-serif 结尾可以做到这点。

body {
     
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, SimSun, “宋体”, Heiti, “黑体”, sans-serif;

⒀ 字体族名的浏览器支持

相关属性
- font-family (@font-face)

示例1: 给一段文字设置一个字体族名和通用的字体族名
- 字体顺序: tahoma → arial → 冬青黑体 → 宋体 →备用字体/ 无衬线字体

    font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4F53',sans-serif;

默认字体样式	设置字体后样式

3. font-size 属性: 设置字体大小 (绝对/相对大小关键字,长度值/百分比值)

⑴ 设置字体大小: font-size
- 设置元素的字体的大小。
- 字体大小和相对长度单位:
  - font-size 属性还用于计算 em、ex 和其他相对长度单位的大小,因此, 可能会改变其他元素的大小.

⑵ 字体大小的语法
- font-size: medium|length| % | smaller |larger| xx-small-xx-large(xx-small,x-small,small,medium,large,x-large,xx-large)|inherit;

 |  | 

where 
 = xx-small | x-small | small | medium | large | x-large | xx-large
 = larger | smaller
 =  | 

/* ，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* ，相对大小值 */
font-size: larger;
font-size: smaller;

/* ，长度值 */
font-size: 12px;
font-size: 0.8em;

/* ，百分比值 */
font-size: 80%;

font-size: inherit;

⑶ 字体大小 font-size 属性的取值：
- ① 1个关键字 = 绝对大小或相对大小的关键字
  - 从绝对大小 absolute-size 关键字列表或相对大小 relative-size 关键字列表中选择的单个关键字。
- ② 长度值和百分比值: 一个值。

⑷ 字体大小的属性值
- Ⅰ. 绝对大小关键字: xx-small ~ xx-large(7 个值)
  - x-small→ x-small → small → medium → large → x-large → xx-large
    - 基于: 绝对大小的关键字，基于用户的 默认字体大小(medium)。
  - ① 小号字体
    - xx-small
    - x-small
    - small
  - ② 中等/正常字体 (默认值):
    - medium
  - ③ 大号字体
    - large
    - x-large
    - xx-large
- Ⅱ. 相对大小关键字
  - 相对于 父元素的字体大小
    - 字体将会变大或变小，大致按照上面用来分隔绝对大小关键字的相近缩放比率来决定。
  - ① 较小: smaller
    - 把 font-size 设置为 比父元素更小 的尺寸。
  - ② 较大: larger
    - 把 font-size 设置为 比父元素更大 的尺寸。
- Ⅲ. 长度值: length
  - 正数长度值.。
  - 当单位为 em 或 ex 时，大小为相对于父元素的文字大小
    - (因为 font-size本身的继承性,没设置font-size时,属性值就是从父亲那里继承的)。
      - 0.5em = 当前元素的父元素的字体大小的一半。
    - em 或 ex , 在其他属性中，它们指的是相对 当前元素 的字体大小.
- Ⅳ. 百分比值:
  - 正数
  - 把 font-size 设置为 基于父元素 的一个百分比值。
- Ⅴ. 继承父亲: inherit
  - 从父元素 继承字体尺寸。

⑸ em 相对长度单位的使用技巧
- 设置body元素的字体大小 = 62.5% = 默认大小16px62.5% = 10px = 1em。
- 10px的倍数: 过计算基准大小10px的倍数，在任何元素上方便的使用em单位。
  - 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。

body {
     
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
     
  font-size: 1.6em; /* 1.6em = 16px */
}

示例1: 给一段文字设置文字大小
css

.fontfamily {
     
    width: 25%;
    background-color: #d0d0d0;
    padding: 10px;
    border: solid black 2px;

    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4F53', sans-serif;
}
.fontsize {
     
    /* font-size: xx-small;
    font-size: x-small;
    font-size:small; 
    font-size: medium;
    font-size: large;
    font-size: x-large;
    font-size: xx-large;
    font-size: larger;
    font-size: smaller;
    font-size: 20px;*/
    /*font-size: 0.625em;*/
    /*font-size: 62.5%;*/
}

超小号 font-size: xx-small;	更小号 font-size: x-small;

小号 font-size:small;	中号 font-size: medium;

大号字体 font-size: large;	更大号字体 font-size: x-large;

超大号字体 font-size: xx-large;	较大号 font-size: larger;

较小号 font-size: smaller;	绝对长度值 font-size: 20px;

相对长度值 font-size: 0.625em;	百分比值 font-size: 62.5%;

3.1 CSS3 font-size-adjust 属性: 字体大小调整 (指定尺寸比 / 保留首选字体的 x-height/ 字体的实际字体大小 / 可读性)

⑴ 字体大小调整= 指定尺寸比 = 保留首选字体的x-height: font-size-adjust, 美 [ə’dʒʌst]
- 属性设置如何根据小写字母x 的高度 (而不是大写字母) 选择字体大小。
  - 保留首选字体的x-height:
    - 此属性允许作者为元素指定一个尺寸比(= x-height/ font-size)，然后该元素将有效地保留首选字体的x-height，无论该字体是否被替换。
    - 设置了font-size-adjust, 会根据可用字体的尺寸比调整实际的字体大小, 以保持每行的 x高度 x-height。
- ① 可读性和小写字母x的大小:
  - 在字体较小时，字体的可读性主要由小写字母x的大小决定
  - 通过指定尺寸比font-size-adjust 和字体大小 font-size 就能保证小写字母的大小 x-height,从而保证可读性。
- ② 兼容: 为了兼容不支持 font-size-adjust 的浏览器
  - 设置 font-size-adjust 属性的值 = font-size 的值所要乘的系数 = 首选字体的尺寸比 = 首选字体的小写字母的大小x-height / 字体大小
    - 指定小写字母的大小 = 14px × 0.5 = 7px 高

font-size: 14px;  
font-size-adjust: 0.5;

⑵ 字体大小调整/小写字母大小x-height 的 CSS 版本
- CSS 属性 font-size-adjust 最初在css2 中定义，但在 css2.1中删除了。它是在 css3 中新定义的。

⑶ 字体尺寸比/小写字母大小x-height 和可阅读性
- font-size-adjust 属性值 = 字体尺寸比 = 小写字母大小 / 字体大小
  - ① 尺寸比和小写字母的大小x-height:
    - Verdana 的字体尺寸比 = 0.58
    - 即, 当字体大小为 100px 时
      - 它的小写字母的大小 = x-height = 尺寸比 × 字体大小 = 0.58 × 100px= 58px
  - ② 字体尺寸比 font-size-adjust 大的,相同字体大小font-size时, 小写字母的大小相对较大,
    - 所以在字体大小的值较小时，尺寸比大的,小写字母也会显示大些
      - 当字体大小比较小时,字体尺寸比 = 0.58 的 Verdana .,会比字体尺寸比 = 0.46 的 Times New Roman 更易阅读。
      - 因为这个时候 尺寸比大,小写字母会显示大些,更容易看清楚.

⑷ 字体大小调整/尺寸比的语法
- font-size-adjust: none |number (x-height/font-size);

/* 仍使用font size的值 */
font-size-adjust: none;

/* 使用 小写字母大小为 font size一半大小的 字体大小 */
font-size-adjust: 0.5;

font-size-adjust: inherit;

⑸ 字体大小调整/尺寸比的属性值
- ① 不设置尺寸比(默认值): none
  - 仅根据 font-size 属性决定字体大小。
  - 不保留此字体的小写字母的大小 x-height。
- ② 指定尺寸比数字: number
  - 数字
  - 设置字体的尺寸比。
    - 尺寸比 = 小写字母的大小 / 字体大小 = x-height / font-size

⑹ font-size-adjust 尺寸比的设置技巧
- ① 避免影响首选字体的字体大小font-size:
  - 属性值 = 数字 = font-family 的首选字体的尺寸比
  - 当首选字体可用时，浏览器支持或不支持 font-size-adjust，字体大小 = 都会显示文字为 font-size 的大小
- ② 固定的小写字母大小:
  - 设置了尺寸比 font-size-adjust + 字体大小font-size
    - ⇒ 相当于设置了固定的小写字母大小 = x-height = font-size-adjust × font-size
  - 可用字体实际字体大小 = 固定的小写字母大小 / 可用字体的尺寸比
  - 相反关系:
    - 可用字体的尺寸比＜设置的尺寸比(= 首选字体的尺寸比)
    - ⇒ 相当于实际字体大小＞指定字体大小
- ③ 关联关系: 设定的尺寸比 font-size-adjust + 字体大小font-size ⇒ 固定的小写字母大小 ⇒ 可用字体的实际字体大小 = 设定的固定的小写字母大小 / 可用字体的尺寸比

⑺ 字体大小调整的浏览器支持
- IE 不支持 font-size-adjust 属性。
- 可在火狐最新版本下测试

⑻ 可用字体的实际字体大小 (计算方法)
- 尺寸比 = 小写字母大小 / 字体大小 = x-height / font-size
- 可用字体的实际字体大小
  - = 设置的字体大小font-size × 设置的尺寸比 font-size-adjust / 可用字体本身的尺寸比
  - = 指定小写字母的大小 / 可用字体本身的尺寸比
- 保证小写字母的大小: 无论什么字体,都保证了小写字母的大小,在字体很小时,也能保证看得清楚
- 实际字体大小 = 设定尺寸比 font-size-adjust / 实际可用字体尺寸比 × 设定的字体大小font-size

示例1: 计算可用字体的实际字体大小
- 设置 font-size-adjust: 0.58 = 首选字体 Verdana的尺寸比,同时设置字体大小 font-size: 14px
  - 如果此时,设置的首选字体 Verdana (字体尺寸比 = 0.58)不可用,而备选字体 (字体尺寸比 = 0.46) 可用
  - 可用字体的实际字体大小: 可用字体的实际 font-size ≠ 指定的 font-size ≠ 14px
    - 可用字体的小写字母大小 = 设定的固定小写字母大小 \
      - = 设置的字体大小× 设置的尺寸比 = 14px × 0.58 = 8.12px
    - 可用字体实际大小font-size = 设定的固定小写字母大小/ 可用字体本身的尺寸比
      - = 8.12px / 0.46 = 17.65px
    - 相反关系:
      - 以 保证小写字母大小 为前提,并且在不改变可用字体本身的尺寸比情况下,相对于设定的尺寸比变小,可用字体的实际字体大小 ,反而比设置的字体大小 14px 要大.

示例2: 在火狐浏览器 Firefox下测试, 保持相同的字体font-family,相同的字体大小font-size,不断增大字体尺寸比 font-size-adjust的值,看看字体大小的变化
- 从 0.1 开始,每次增加0.1,到 1结束.
css

.fontsizeajust {
     
    width: 25%;
    background-color: #d0d0d0;
    padding: 10px;
    border: solid black 2px;
    
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4F53', sans-serif;   
    font-size: 20px;
    
    /*font-size-adjust: 0.1;*/
  
}

设定的字体大小
随着字体尺寸比 font-size-adjust 变化的实际字体大小
- 正向关系: 可以看到字体的实际大小,因为字体尺寸比变大而变大了
- font-size-adjust 字体尺寸比变小 ⇒ 设定的小写字母的固定字体大小变小 ⇒ 实际的字体大小变小

示例3: x-height 和尺寸比
- 保持每行的 x高度: 这些列显示了在 Verdana、Futura和Times 中呈现的文本,相同的 font-size值, 红线显示x-height的差异
  - 在上半部分，每一行都以相同的字体大小值呈现。
  - 对下半部分也是如此，但在这半部分中还设置了“字体大小-调整”属性，以便调整实际字体大小以保持每行的 x高度。
  - 请注意，在下半部分的每行中，小文本是如何保持相对清晰的。

4. font-stretch 属性: 设置字体的伸缩版本 (搭配 font-family 属性)

⑴ 设置字体的伸缩版本: font-stretch , 美 [strɛtʃ]
- 属性从字体中选择正常、压缩或展开的字体。
  - 设置或检索元素中的文字是否横向拉伸变形。
    - 文字的拉伸是相对于浏览器显示的字体的正常宽度。
  - ① 字体的压缩字体/扩展字体:
    - 一些字体族 font-family 提供了额外的字体，其中字符比普通字体窄 (压缩字体)或宽(扩展字体)。
      - 可以使用字体伸缩font-stretch 从这些字体中选择压缩或扩展的字体。
  - ② 适用字体:
    - 有压缩/扩展字体的字体
  - ③ 无效/不适用的字体:
    - 有的字体,使用 font-stretch属性,会没有任何效果
    - 因为当前字体,就一种字体,该字体没有额外的压缩字体,或者拓展字体, 则此字体伸缩font-stretch属性无效。
  - ④ 搭配属性:
    - 因为字体的伸缩版本,由字体确定,所以 font-stretch 和 font-family 相关联

⑵ 字体伸缩的语法
- font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | ;

/* 关键字值 Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* 百分比值 Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* 全局值 Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

⑶ 字体伸缩的属性值
- 关键字值和百分比值
- Ⅰ. 不伸缩 (默认值): normal
  - 把缩放比例设置为标准。
  - 指定一个正常的字体外观
- Ⅱ. 小于默认字体:semi-condensed, condensed, extra-condensed, ultra-condensed
  - 设置字体font-family 的缩放比例。
  - ① 最小: ultra-condensed
    - 压缩小到最小的字体
      - ['ʌltrə] 极端的, 美 [kən’dɛnst] 压缩的
  - ② 更加小: extra-condensed
    - 美 ['ɛkstrə] 另加的
  - ③ 缩小: condensed
  - ④ 半缩小: semi-condensed
    - 英 ['semɪ] 半
- Ⅲ. 大于默认字体: semi-expanded,expanded, extra-expanded , ultra-expanded
  - ① 半扩展: semi-expanded
    - 美 [ɪk’spændɪd] 扩展的
  - ② 扩展: expanded
  - ③ 更大: extra-expanded
  - ④ 最大扩展: ultra-expanded
    - 最宽的字体
- Ⅳ. 百分比值:
  - 50%(包含) ~ 200% (包含).
  - 此属性不允许为负值。
  - 在早期版本的 font-stretch 规范中，属性只接受 9 个关键字值。
    - 目前,仍然并非所有浏览器都支持百分比值
- 最窄和最宽
  - 最窄的值: ultra-condensed
    - ultra-condensed =50%
  - 最宽的值: ultra-expanded
    - ultra-expanded =200%

⑷ 关键字值和百分比值之间的映射

关键字值	百分比值	(比较小的邻近关键字) 增加的差值
`ultra-condensed`	=`50%`	↓
extra-condensed	=62.5%	12.5% ↑
condensed	= 75%	12.5%
semi-condensed	=87.5%	12.5%
`normal`	=`100%`	12.5%
semi-expanded	=112.5%	12.5%
expanded	=125%	12.5%
extra-expanded	=150%	25%
`ultra-expanded`	=`200%`	50%

⑸ 字体伸缩的浏览器支持
- 谷歌,Opera 浏览器
  - 在此属性起作用之前，必须在@font-face中添加一个font-stretch定义。

⑹ 字体外观的选择
- 为给定的 font-stretch 值选择的外观取决于相关字体支持的外观。
- 如果字体没有提供与给定值完全匹配的字体，则
  - 小于100%的值: 映射到较窄的字体。
  - 而大于或等于100%的值: 映射到较宽的字体。
- 无效/不适用的字体:
  - 有的字体,使用 font-stretch属性,会没有任何效果,因为当前字体,就一种字体,该字体没有额外的压缩字体,或者拓展字体.

示例1: 在两种不同字体上提供不同的字体拉伸百分比的效果:
- ① Helvetica Neue
  - 默认安装在 macOS 上，除了正常字体之外，还有一个压缩字体。
  - 所有小于100%的字体拉伸值: 选择压缩字体，所有其他值: 选择正常字体。
- ② League Mono Variable
  - 是一种可变字体
  - 它为不同的字体拉伸的百分比值提供类似于宽度的连续变化的内容。

5. font-style 属性: 设置字体样式 / 字体的倾斜 (搭配 font-family 属性)

⑴ 设置字体样式/字体的倾斜: font-style
- 属性设置字体是否应使用其字体族 font-family中的正常字体、斜体或倾斜样式。
- ① 搭配属性: 字体族 font-family.
- ② 斜体字体和人工倾斜
  - 为字体族的 一个单独的字体,有的字体会没有斜体字,这时就进行人工合成的倾斜.

⑵ 字体样式/字体倾斜的语法
- font-style: normal| italic| oblique| oblique | inherit;


font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* 全局值 Global values */
font-style: inherit;
font-style: initial;
font-style: unset;

⑶ 字体样式/字体倾斜的属性值设置
- font-style 属性 = 一个关键字
- 如果关键字是 oblique，则可附加一个可选的角度。(目前浏览器支持度还很差,不要使用)

⑷ 字体样式/字体倾斜的属性值
- ① 默认字体/不倾斜 (默认值): normal
  - 浏览器显示一个 标准的 字体样式。
  - 值“normal”: 选择在 UA的字体数据库中归类为“normal”的字体
- ② 斜体版本: italic
  - 浏览器会选择分类为斜体italic 的字体。
    - 字体数据库: 选择在 UA的字体数据库中归类为“italic”的字体
  - 替代: 选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
    - 如果两者都不可用，则人工模拟样式。
- ③ 倾斜版本: oblique
  - 选择分类为倾斜oblique 的字体。
    - 字体数据库: 选择在 UA的字体数据库中归类为“oblique”的字体
    - 普通文字倾斜: 在 UA的字体数据库中标记为 oblique 的字体实际上可能是通过使普通字体倾斜而生成的,这一点和 italic不同。
  - 替代: 选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代。
    - 如果两者都不可用，则人工模拟样式。
- ④ 带角度的倾斜: oblique
  - ❶ 倾斜的角度:
    - 选择分类为倾斜oblique的字体，并额外指定文本倾斜的角度。
  - ❷ 选择最接近的角度:
    - 如果在所选字体族中有一个或多个倾斜字体，则选择与指定角度最接近的倾斜字体。
  - ❸ 合成和倾斜指定角度:
    - 如果没有倾斜字体可用，浏览器将合成一个倾斜版本的字体，将一个正常的字体倾斜指定的数量。
  - ❹ 倾斜角度有效值: -90deg ~ 90deg
    - 默认角度: 如果没有指定角度，则使用14度角 14deg
  - ❺ 倾斜方向和正负值:
    - 正值: 倾斜向行尾
    - 负值: 倾斜向开始。
- ⑤ 继承父亲: inherit
  - 从父元素继承字体样式。

⑸ 属性值 italic 和 oblique 的区别
- ① oblique : 选择字体族的 oblique 变体。
  - 如果没有 oblique 变体就选择italic 变体。
  - 普通文字倾斜: 在 UA的字体数据库中标记为 oblique 的字体实际上可能是通过使普通字体倾斜而生成的,这一点和 italic不同。
- ② italic : 选择字体族的 italic 变体
  - 如果没有 italic 变体就选择 oblique 变体。
- ③ 如果字体族两者都未提供
  - 则由浏览器合成倾斜的仿 oblique字体。
  - 人工倾斜的灰色渲染图与实际的斜体版本进行比较
    - 实际的斜体,有点像是手写的,带点笔锋, 更自然, 人工倾斜,就只是倾斜了,没有很特别的笔锋之类的样式

⑹ 字体样式/字体倾斜的浏览器支持
- 可在火狐浏览器 Firefox 中测试带角度的倾斜值

示例1: 对一段文字进行倾斜操作
css

.fontstyle {
     
    width: 50%;
    background-color: #d0d0d0;
    padding: 10px;
    border: solid black 2px;
    
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4F53', sans-serif;   
    font-size: 1.5em;
    
    font-style:oblique -90deg;
}

html


    <p class="fontstyle">金无足赤,人无完人。
        <br />No one is perfect, everyone will make mistakes.
    p>

默认字体样式	斜体字体 italic

倾斜字体 oblique	带角度的倾斜 font-style:oblique -90deg;( -90deg~90deg,每次加10deg)

6. font-variant 属性: 设置字体的变体 (小型的大写字母 / 简写属性)

设置字体的变体: font-variant 美 ['vɛrɪənt]
- ① 简写属性: font-variant是以下属性的简写属性
  - ❶ font-variant-caps,
  - ❷ font-variant-numeric,
  - ❸ font-variant-alternates,
  - ❹ font-variant-ligatures,
  - ❺ font-variant-east-asian.
- ② 搭配属性: 使用简写属性 font 来设置 font-variant 的 CSS 2.1 值（即 normal 或 small-caps）。
- ③ 重置为初始值: 与其他简写属性一样，使用“font-variant”将未指定的“font-variant” 子属性重置为其初始值。
  - 不会重置 font-feature-settings的值

小型的大写字母
- 小写字母转换为大写,但是这个转换后的大写字母,还是显示的很小.
- 只有第一个 N 是原本就大写的,其他的都是转换成了小型的大写
  - 小型的大写字母 = 使用大写形式，但尺寸与对应小写字母相同的

字体变体的语法
- font-variant: normal| small-caps | inherit;


font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* 全局值 Global values */
font-variant: inherit;
font-variant: initial;
font-variant: unset;

字体变体的属性值
- ① 不变体(默认值): normal
  - 浏览器会显示一个 标准的字体。
  - 每个普通属性的初始值都为 normal
    - font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.
- ② 小型的大写字母: small-caps (最常用)
  - 浏览器会显示 小型的大写字母的字体。
- ③ 继承父亲: inherit
  - 从父元素继承 font-variant 属性的值。
- ④ none
  - = font-variant-ligatures: none
  - 其他普通属性,设置为它们的初始值 normal
- ⑤ 5个普通属性的属性值
  - 因为 font-variant 是简写属性,所以在这个属性里,可以设置子属性的值.

字体变体的浏览器支持

6.1 font-variant-caps 属性: 设置字体变体的大写设置 (小写字母的小型的大写/ 大写字母的小型写法/首字母大写)

⑴ 设置字体变体的大写设置: font-variant-caps
- 属性控制大写字母的替换符号的使用。
  - ❶ 把小写字母,设置成小型的大写
    - 全小型,全特小型的
  - ❷ 把大写字母,设置成小型的
  - ❸ 首字母大写
- ① 选择最接近的: 当给定的字体包含多个不同大小的大写字母时，此属性将选择最合适的字体。
  - 如果字体中没有 “特小”型(petite) 大写字母，该字符将会被以“小”型(small)大写字母进行渲染。
  - 合成大写: 如果这些字符均不存在,浏览器将从大写符号合成它们。
- ② 无大小写字符 ,不会有小型的大写字母: 字体有时包含各种无大小写字符的特殊符号(如标点符号)，以更好地匹配其周围的大写字符。
  - 小型的大写字母从来没有为无大小写字符合成过,比如,标点符号,不会有小型的大写字母

⑵ 字体变体的大写设置font-variant-caps的语法
- font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

/* 关键字值 Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* 全局值 Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

⑶ 字体变体的大写设置font-variant-caps 的属性值
- ① 禁用字体变体/正常字体: normal
  - 关闭一切特殊字符变体的使用。
  - 如果设置了 font-variant: small-caps;也会被覆盖/禁用,成为正常字体
- ② 小型的大写字母: small-caps
  - 允许小型大写字母的使用（OpenType 特性：smcp）。
  - 小型的大写字母 = 小写字母使用大写形式，但尺寸与对应小写字母相同的字母。
- ③ 全部小型的大写字母: all-small-caps
  - 将大小写字母全部转化为小型大写字母。（OpenType 特性: c2sc, smcp）。\
  - 原本高度比较高的大写字母,也会随之变矮,变成小型的
- ④ 特小型的大写字母: petite-caps, 美 /pəˈtiːt/
  - 允许特小型大写字母的使用（OpenType 特性: pcap）。
- ⑤ 全部特小型的大写字母: all-petite-caps
  - 将大小写字母全部转化为特小型大写字母。（OpenType 特性: c2pc, pcap）。
- ⑥ 大写字母变小型: unicase
  - 允许将大写字母转化为小型大写字母与普通小写字母的混用（OpenType 特性: unic）。
- ⑦ 首字母大写: titling-caps
  - 允许首字母大写（OpenType 特性: titl）。
  - 大写字母变体字符通常被设计成用于小写字母。
    - 在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。
  - 首字母大写即用来应对这种情况。
    - (谷歌和火狐浏览器测试暂时没有效果)

⑷ 字体变体的大写设置的可访问性问题
- 没有大小比较的阅读障碍:
  - 当大量文本信息的 font-variant 属性被设置为 all-small-caps或 all-petite-caps，将会为认知障碍者（如读写障碍）的阅读带来困难。

⑸ 字体变体的大写设置浏览器支持
- 实验中属性,很多主流浏览器开始慢慢支持了

6.2 font-variant-east-asian 属性: 设置字体变体的东亚字符的替代符号 (实验中属性)

⑴ 设置字体变体的东亚字符的替代符号: font-variant-east-asian 属性,美 /ˈeʒən/
- 属性控制东亚文字替代符号的使用(如日文和中文)。

⑵ 语法
- font-variant-east-asian: normal | [ || || ruby ]

normal | [  ||  || ruby ]

where 
 = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
 = [ full-width | proportional-width ]

font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78;              /*  */
font-variant-east-asian: jis83;              /*  */
font-variant-east-asian: jis90;              /*  */
font-variant-east-asian: jis04;              /*  */
font-variant-east-asian: simplified;         /*  */
font-variant-east-asian: traditional;        /*  */

font-variant-east-asian: full-width;         /*  */
font-variant-east-asian: proportional-width; /*  */
font-variant-east-asian: ruby full-width jis83;

/* 全局值 Global values */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: unset;

⑶ 属性值
- ① 无字体变体: normal
  - 这个关键字会导致禁用这些替代符号。
- ② ruby字符变体: ruby
  - 这个关键字强制为ruby字符使用特殊的符号。
    - 由于这些字体通常较小，字体创建者通常设计特定的表单，通常稍微粗体一些以提高对比度。
  - 这个关键字对应于: OpenType 值 ruby。
- ③ 东亚字体变体宽度关键字值
  - 这些值控制用于东亚字符的数字大小。两个可能的值:
  - ❶ proportional-width: 美 /prəˈpɔːrʃənl/
    - 激活一组宽度不同的东亚字符。
    - 它对应于 OpenType 值 pwid
  - ❷ full-width:
    - 激活东亚字符集，这些字符都是相同的，大致是正方形，宽度标准。
    - 它对应于OpenType值 fwid
- ④ 东亚字体变体关键字值:
  - 这些值指定一组用于显示的符号变体。可能的值是:

关键字	定义字形的标准	OpenType 等值
jis78	JIS X 0208:1978	jp78
jis83	JIS X 0208:1983	jp83
jis90	JIS X 0208:1990	jp90
jis04	JIS X 0213:2004	jp04
simplified	None, 使用简体中文符号	smpl
traditional	None, 使用传统的汉字	trad

知识拓展: OpenType 字体和 TrueType 字体
- ⑴ 可缩放字型: OpenType，是一种可缩放字型（scalable font）电脑字体类型，采用 PostScript格式
  - 美国微软公司与 Adobe 公司联合开发，用来替代 TrueType 字型的新字型。
  - ① 拓展名:
    - 这类字体的文件扩展名为.otf，类型代码是 OTTO，现行标准为 OpenType 1.4。
  - ② 发展历程: TrueType ⇒ TrueType Open ⇒ OpenType
    - OpenType 最初发表于 1996年，并在 2000 年之后出现大量字体。
      - 它源于微软公司的 TrueType Open 字型， TrueType Open 字型又源于TrueType 字型。
    - OpenType font 包括了 Adobe CID-Keyed font 技术。
      - Adobe 公司已经在 2002 年末将其字体库全部改用 OpenType格式。
      - 到2005年大概有一万多种 OpenType字体，Adobe 产品占了三分之一。
  - ⑵ TrueType 字体
  - 曲线描边字/电脑轮廓字:
    - TrueType 是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体（曲线描边字）类型标准。
    - 拓展名: 这种类型字体文件的扩展名是.ttf，类型代码是 tfil。
    - 发展历程:
      - 早在 1980 年代末，苹果公司为了对抗 Adobe 公司的 Type 1PostScript 字体，设计开发了 TrueType。之后微软加入了开发，Windows 作业系统的字体格式基本上都统一成 TrueType，而在苹果的 Mac OS 却成了 PostScript 和 TrueType 对立的局面。
        
        TrueType 后来也被 Linux 等系统使用，成为标准字体。
      - TrueType的优点: 主要强项在于它能给开发者提供关于字体显示、不同字体大小的像素级显示等的高级控制。
      - 更多详细信息

⑷ 浏览器支持

点击查看更多 font-variant-* 属性
CSS 参考 | MDN

7. font-weight 属性: 字体的粗细 (搭配 font-family 属性)

⑴ 设置字体的粗细: font-weight
- 属性设置字体的粗细(或粗体)。
  - 可用的粗细: 取决于您使用的字体族 font-family。

⑵ 字体粗细的语法
- font-weight: normal |bold | bolder| lighter |number (100-900.400=normal,700=bold)|inherit;

/* 关键字值 Keyword values */
font-weight: normal;
font-weight: bold;

/* 相对于父元素的 关键字值 Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* 数字值 Numeric keyword values */
font-weight: 1
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

/* 全局值 Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

⑶ 字体粗细的属性值
- ① 正常粗细(默认值): normal
  - 设置为标准的字符。
  - 正常粗细 = 400 的数字值
- ② 加粗: bold
  - 设置为粗体字符。
  - 加粗 = 与700 等值。
- ③ 比父元素更粗: bolder
  - 设置为更粗的字符。
  - 一个比从父元素继承来的值更粗。
    - 请注意，在计算相对粗细时只考虑了四种字体的粗细;
- ④ 比父元素更细: lighter
  - 设置为更细的字符。
  - 比从父元素继承来的值更细
    - 请注意，在计算相对权重时只考虑了四种字体的粗细;
      - 当元素没有更细的字体时,很可能使用字体的正常字体.
- ⑤ 数字: 100-1000.
  - 由粗到细的字符
    - 值的范围: 在1到1000之间，包括数字本身。
    - 较高的数字: 表示比较低的数字更大粗(或与之一样粗)。
  - 关联关系
    - 400 = normal
    - 700 = bold。
  - 常见粗细值名称和数值对应
    - 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)
- ⑥ 继承父亲: inherit
  - 从父元素继承 字体的粗细。

⑷ 数字值的使用
- 指定数字值: 早期版本中，属性只接受关键字值和数值100、200、300、400、500、600、700、800 和 900;
- ① 细粒度值和值的转换:
  - 虽然细粒度的值(如 451)将使用回退权值系统转换为这些值中的一个，但非变量字体实际上只能使用这些设定值。
- ② 范围内任何数字:
- CSS Fonts Level 4 扩展了语法，可以接受 1 ~ 1000 之间的 任何数字，并引入了可变字体，可以利用这种更细粒度的字体设置字体粗细。

⑸ 字体粗细的回退机制
- 如果给出的精确粗细的指定值不可用，则使用以下规则来确定实际呈现的粗细:
  - ① 指定值小于400: 先小后大,先降后升 (先选择尽可能地小的字体粗细，再尽可能地大)
    - 则按降序查找小于指定值的可用粗细。
      - 如果没有找到匹配项，则按照升序查找大于指定值的可用粗细。
  - ② 指定值在400~500 (包含数字本身) 之间: 先大后小,先升后降,再尽可能地大
    - 按升序查找指定值和500之间的可用粗细。
      - 如果没有找到匹配项，则按降序查找小于指定值的可用粗细。
        
        如果还没有找到匹配项，则按照升序查找大于500的可用粗细。
  - ③ 指定值大于500: 先大后小,先升后降 (先尽可能地大，再尽可能地小)
    - 则按照升序查找大于指定值的可用权重。
      - 如果没有找到匹配项，则按降序查找小于目标的可用权重。
总结: 尽可能地小,再尽可能地大 <400 先大,再尽可能地小,再尽可能地大＜500 尽可能地大,再尽可能地小
- 500以下: 先尽可能地小, 优先选择 偏细的字体.
- 500以上: 先尽可能地大 , 优先选择 偏粗的字体.

示例1: 如果一个字体只有 normal= 400和 bold = 700 两种粗细值选择，
- 指定粗细值为 100-500时，
  - 实际渲染时将先尽可能地小,选择小于 500的 = 使用normal = 400 = 正常字体
- 指定粗细值为 600-900 时
  - 实际渲染时将先尽可能地大,选择大于 500的 = 使用 bold = 700 = 粗体字。

⑹ 字体粗细的四舍五入
font-weight 数值采取离散式定义（使用 100 的整倍数）。
- ① 实数: 数值为实数
- ② 100的整数倍:
  - 非 100 的整数倍的值将被四舍五入转换为 100 的整数倍
- ③ 逢50 取偏大值:
  - 遇到 50 的倍数 *50 时，将向上转换，如 150 将转换为 200 。

⑺ 相对粗细值和绝对字体粗细
- 当指定更细 lighter 或更粗 bolder时，下表显示如何确定元素的绝对字体粗细。
- 更细 lighter 或更粗 bolder,是相对于父元素继承的粗细值.

继承值（Inherited value）	更粗 `bolder`	更细`lighter`
100	400	100
200	400	100
300	400 (`300` 及以下,更粗 = `400` = `normal`)	100
400	700	100
500	700 (`400~500` ,更粗 = `700` = `bold`)	100 (`500` 及以下,更细 = `100` = `thin`)
600	900	400
700	900	400 (`600~700` 及以下,更细 = `400` = `normal`)
800	900	700
900	900 (`600~900` ,更粗 = `900` = `heavy`)	700 (`800~900` 及以下,更细 = `700` = `bold`)

⑻ 字体粗细的浏览器支持

8. @font-face: 自定义字体

⑴ 自定义字体:
- @font-face CSS at-rule 指定用来显示文本的自定义字体;；
- ① 字体下载和加载:
  - 远程服务器和本地: 字体可以从远程服务器加载，也可以从用户自己的计算机上本地安装的字体加载。
- ② 查找和使用字体:
  - ❶ 本地加载 local() 函数:
    - 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用.
    - 不需要联网: 指定要查找和使用的本地安装字体的名称的功能使自定义字体成为可能，而不需要依赖Internet连接。
  - ❷ 远程加载/下载 url() 函数:
    - 否则, 将下载并使用用url()函数指定的字体资源。
  - ❸ 同时设置: 通常同时使用url() 和local()，以便在可用时使用用户安装的字体副本，如果在用户的设备上找不到，则返回进行下载字体副本。
- ③ 字体不受限制:
  - 通过允许作者提供自己的字体，@font-face 使得设计内容不受所谓的 “网络安全字体”("web-safe" fonts)”的限制成为可能。
  - 网络安全字体: 被认为是普遍可用的字体

⑵ 自定义字体 @font-face 的书写位置
- @font-face的 at-rule 不仅可以写在 ❶ CSS 的顶层，还可以写在任何 ❷ CSS 条件规则组内部。
- ① 不能在一个 CSS 选择器中书写 @font-face,@规则是独立的,不在选择器中.
- ② 自定义字体的同域限制:
  - 这里使用的网络字体 Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 一般是先把字体下载在本地,再在代码中引用
  - 也可以使用 HTTP 的跨域资源共享解除这一限制。
  - 字体的 MIME 类型(媒体类型):
    - 因为这里没有为 TrueType(ttf), OpenType(otf)和 Web Open File Format(WOFF) 字体定义 MIME
    - 因此不能为这些字体类型设置特定的MIME
      - （实际上, WOFF的媒体类型 MIME = application/font-woff，但浏览器对此MIME的识别还不统一，其它字体情况也类似，可暂时使用 application/octet-stream）。

@font-face {
     
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

⑶ 自定义字体 @font-face 的语法

@font-face {
     
  [ font-family: ; ] ||
  [ src:   []; ] ||
  [ unicode-range: ; ] ||
  [ font-variant: ; ] ||
  [ font-feature-settings: ; ] ||
  [ font-variation-settings: ; ] ||
  [ font-stretch: ; ] ||
  [ font-weight: ; ] ||
  [ font-style: ; ]
}
where 
 =  | +

⑷ 自定义字体 @font-face的属性
- ① 指定字体名字: font-family
  - 自定义字体的名字将会被用于font或font-family属性( i.e. font-family: ; )
- ② 指定字体地址: src []
  - ❶ 字体的路径:(相对该 css 文件的路径,可相对,可绝对路径)
    - 远程字体文件位置的URL 或者用户计算机上的字体名称，可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。
    - 如果找不到该字体，将会尝试其他来源，直到找到它。
  - ❷ 自定义字体的格式:
    - [] 指的是自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,svg等；
- ③ 字体变体 font-variant
  - 一个字体变体的属性值
- ④ 字体伸缩 font-stretch
  - 一个字体伸缩的属性值
- ⑤ 字体粗细: font-weight
  - 一个字体粗细的属性值
- ⑥ 字体样式: font-style
  - 对于 src所指字体的样式。
  - 如果所需字体符合要求的样式(倾斜/斜体)，则采用本 font-face 所定义的字体。
- ⑦ unicode-range
  - 在该 @font-face 中定义的 unicode 字体范围
    - unicode:
      - 万国码,统一码
      - n. 采用双字节对字符进行编码；统一的字符编码标准;

示例1: 在一段文字中引用一个特别的字体
css

/*设置 自定义字体*/
@font-face {
     
    font-family: "ChickenDinnerDemo";
    src: url("../fonts/ChickenDinnerDemo.otf") format("opentype"), url('../fonts/chickendinnerdemo-webfont.woff2') format('woff2'),
    url('../fonts/chickendinnerdemo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;;
}

.fontfamily {
     
    width: 25%;
    background-color: #d0d0d0;
    padding: 10px;
    border: solid black 2px;
    font-family: "ChickenDinnerDemo",serif;

}

html

    
    <p class="fontfamily">金无足赤,<span>人无完人span>。
        <br />No one is perfect, <span>everyone will make mistakesspan>.
    p>

默认字体样式	自定义字体样式

⑸ 注意事项
- ① 字体的路径: src: url("../fonts/ChickenDinnerDemo.otf") format("opentype")
  - 路径必须正确
  - ❶ 相对位置是相对谁: css 文件中的路径, 是相对于写该css代码的该 .css 文件的,不是相对于引用 css文件的 .html文件的,这一点要注意,路径一旦错了,自定义字体不会有效果的
  - ❷ 路径中的斜杠: 是正斜杠 / ,和除号一样的符号 /, 一定不要用错
    - 直接复制的绝对路径中的斜杠是错误的 C:\Users\Administrator\Desktop\PracticeDemo\CSS-Learning\fonts(错误)
- ② 同语言只显示一个:
  - 如果设置了两个自定义字体,结果只显示了一个,很可能是两种自定义字体,都是针对同一语言的,所以只应用了找到的第一个到该语言.

⑹ 使用自定义字体的步骤
- 先把自定义的字体文件下载到项目的文件夹中
- ⇒ 转换格式:
  - 为了兼容各个浏览器,把字体转换成多种格式的多个文件 (有转换字体格式的网站)
- ⇒ 满足各种格式:
  - 在@font-face中引用各种格式的字体
- ⇒ 命名:
  - 要给自定义的字体规定名称, 在 @font-face中的 font-family属性中设置
- ⇒ 在选择器中引用 :
  - 在需要自定义字体的选择器中引用指定的自定义字体名,选择器中的font-family属性值 = @font-face中 font-family属性值

⑺ 各大浏览器支持的字体格式
- 因为不同的浏览器对字体格式的支持不一样,可能会造成浏览器对@font-face的兼容问题,主要涉及以下几种字体格式,是必需了解的
- ① TureTpe(.ttf)格式：
  - .ttf 字体是 Windows 和 Mac 的 最常见的字体
  - 是一种 RAW 格式，不为网站优化
  - 支持这种字体的浏览器
    - 【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
    - IE8 不支持 TTF；且 IE9 上只有被设置成 “installable” 才能支持,所以还需要转别的格式
    - TTF 允许嵌入最基本的数字版权管理标志————内置标志可以告诉我们字体作者是否允许这个字体在 PDF 或者网站等处使用，所以可能会有版权问题。另一个缺点是，TTF 和 OTF 字体是没压缩的，因此他们文件更大。
- ② OpenType (.otf)格式：
  - .otf 字体被认为是一种原始的字体格式，其内置在 TureType的基础上，OTF 字体包含一部分屏幕和打印机字体数据。OTF 有几个独家功能，包括支持多平台和扩展字符集。
    - OTF 也允许多达 65000 个字符的存储。这个额外的空间让设计师可以自由地添加附加元素
  - 支持这种字体的浏览器
    - 【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
- ③ Web Open Font Format (.woff)格式：
  - .woff 字体是 Web字体中 最佳格式，是一个开放的 TrueType/OpenType的 压缩版本，同时也支持元数据包的分离
  - metadata + 基于 SFNT 的字体（如 TTF、OTF 或其他开放字体格式）。
    - 该格式完全是为了 Web 而创建，由 Mozilla 基金会、微软和 Opera 软件公司合作推出。
  - 压缩和更快的下载速度:
    - WOFF 字体均经过 WOFF 的编码工具压缩，文件大小一般比 TTF 小 40%，加载速度更快，可以更好的嵌入网页中。元数据 metadata 允许在字体文件中包含许可数据，以解决版权问题。
    - 这是万维网联盟提倡的, 目前主流的浏览器的新版本几乎都支持 WOFF。
  - 支持这种字体的浏览器
    - 【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
  - WOFF2 是 WOFF的下一代。
    - WOFF2格式在原有的基础上提升了 30% 的压缩率。
    - 由于它还没有 WOFF 的广泛支持，所以还只是一个可展望的升级,目前已经被使用了。
- ④ Embedded Open Type (.eot)格式：
  - .eot 字体是 IE专用字体，可以从 TrueType 创建此格式字体
  - 是一个在网页上试图绕过 TTF 和 OTF 版权的方案。
    - 可以使用微软的工具从现有的 TTF/OTF字体转成 EOT字体使用，其中对字体进行压缩和裁剪使得文件体积更小。
    - 同时为了避免一些收版权保护的字体被随意复制，EOT 还集成了一些特性来阻止复制行为，以及对字体文件进行加密保护。
    - EOT 格式只有 IE 支持。
  - 支持这种字体的浏览器有
    - 【IE4+】；
- ⑤ SVG (.svg)格式：
  - .svg 字体是基于 SVG字体渲染的一种格式
  - 支持这种字体的浏览器有
    - 【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
    - iPhone 和 iPad 用户， SVG字体是 iOS 上 Safari 4.1 以下唯一允许的字体格式。
- 这就意味着在@font-face中我们至少需要 .woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

示例2: 淘宝网中的自定义字体
- 除了ott, 其他4 种格式都包含,兼容各种浏览器

        @font-face {
     
            font-family: global-iconfont;
            src: url(//at.alicdn.com/t/font_1404888168_2057645.eot);
            
            src: url(//at.alicdn.com/t/font_1404888168_2057645.eot?#iefix) format("embedded-opentype"),
             url(//at.alicdn.com/t/font_1404888168_2057645.woff) format("woff"), 
             url(//at.alicdn.com/t/font_1404888168_2057645.ttf) format("truetype"), 
             url(//at.alicdn.com/t/font_1404888168_2057645.svg#uxiconfont) format("svg")
        }

示例3: 在一个字体里, 同时设置查找本地字体和下载的字体
- 前两种找不到,才使用第三种字体
css

@font-face {
     
    font-family: "ChickenDinnerDemo";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),url("../fonts/ChickenDinnerDemo.otf") format("opentype"), url('../fonts/chickendinnerdemo-webfont.woff2') format('woff2'),
    url('../fonts/chickendinnerdemo-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

示例4: 针对不同的字体粗细选择字体同一字体名的中不同字体
- 新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。
css

/*设置 自定义字体*/
@font-face {
     
    font-family: "ChickenDinnerDemo";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),url("../fonts/ChickenDinnerDemo.otf") format("opentype"), url('../fonts/chickendinnerdemo-webfont.woff2') format('woff2'),
    url('../fonts/chickendinnerdemo-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}
@font-face {
     
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
     
    font-family: myFirstFont;/*和上面一个规则  一样的字体名*/
    src: local(Consolas);
    font-weight:bold;
}
.fontfamily {
     
    width: 25%;
    background-color: #d0d0d0;
    padding: 10px;
    border: solid black 2px;

    font-family: myFirstFont,"ChickenDinnerDemo";
    font-weight: normal;
    /*font-weight: bold;*/

}

html

    <p class="fontfamily fontsize fontsizeajust">金无足赤,人无完人。
        <br />No one is perfect, everyone will make mistakes.
    p>

① 未设置自定义字体时
② 设置自定义字体和对应字体粗细后

正常字体选择器中 font-weight: normal;	加粗字体选择器中 font-weight: bold;

⑻ 自定义字体 @font-face 的浏览器支持

♣ 结束语和友情链接

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

参考文档
- CSS 参考 | MDN
- CSS 2.1 文档之 Fonts
- CSS 3 规范文档
- CSS3 @Font-Face
- 引入 font-face

友情链接
- 免费字体下载中文网
- 免费字体下载英文网 dafont.com
- 字体格式转换 Create Your Own @font-face Kits | Font Squirrel

感谢：♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，持续更新中, 感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103154814
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

【CSS 字体 属性（Font）】

CSS 字体 属性（Font）

CSS 字体属性

1. font 属性: 字体的简写属性 / 集中定义 字体相关属性

2. font-family 属性: 设置 字体族名 (具体/通用,兼顾 中西文和多操作系统)

3. font-size 属性: 设置 字体大小 (绝对/相对大小 关键字,长度值/百分比值)

3.1 CSS3 font-size-adjust 属性: 字体大小 调整 (指定尺寸比 / 保留 首选字体的 x-height/ 字体的 实际字体大小 / 可读性)

4. font-stretch 属性: 设置 字体的伸缩版本 (搭配 font-family 属性)

5. font-style 属性: 设置字体样式 / 字体的倾斜 (搭配 font-family 属性)

6. font-variant 属性: 设置字体的变体 (小型的 大写字母 / 简写属性)

6.1 font-variant-caps 属性: 设置 字体变体的大写设置 (小写字母的 小型的大写/ 大写字母的 小型写法/首字母大写)

6.2 font-variant-east-asian 属性: 设置 字体变体的 东亚字符的 替代符号 (实验中属性)

7. font-weight 属性: 字体的粗细 (搭配 font-family 属性)

8. @font-face: 自定义字体

♣ 结束语 和 友情链接

你可能感兴趣的:(【CSS】,css字体属性,font,font-variant,font-size,@font-face)

【CSS 字体属性（Font）】

CSS 字体属性（Font）

1. font 属性: 字体的简写属性 / 集中定义字体相关属性

2. font-family 属性: 设置字体族名 (具体/通用,兼顾中西文和多操作系统)

3. font-size 属性: 设置字体大小 (绝对/相对大小关键字,长度值/百分比值)

3.1 CSS3 font-size-adjust 属性: 字体大小调整 (指定尺寸比 / 保留首选字体的 x-height/ 字体的实际字体大小 / 可读性)

4. font-stretch 属性: 设置字体的伸缩版本 (搭配 font-family 属性)

6. font-variant 属性: 设置字体的变体 (小型的大写字母 / 简写属性)

6.1 font-variant-caps 属性: 设置字体变体的大写设置 (小写字母的小型的大写/ 大写字母的小型写法/首字母大写)

6.2 font-variant-east-asian 属性: 设置字体变体的东亚字符的替代符号 (实验中属性)

♣ 结束语和友情链接