【CSS 字体 属性（Font）】

最新推荐文章于 2026-04-29 08:58:11 发布
原创 最新推荐文章于 2026-04-29 08:58:11 发布 · 3.6k 阅读 · 15 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
【CSS】

当前文章被收录于：

【CSS】
29 篇文章 4 人学习

CSS 的入门知识、详细介绍、使用技巧等，可按 Ctrl+F 进行关键词搜索，能快速找到想要的内容哦。

订阅专栏 查看详情

CSS 字体 属性（Font）

CSS 字体属性

  • （Font）
    • 美 [fɑnt] , 字体
用于属性名CSS 版本
① 字体的简写属性 / 集中定义 字体 相关属性font1
② 设置 字体族名 (兼顾 具体/通用字体,兼顾 中西文和多操作系统)。font-family1
③ 设置 字体大小 (有 绝对/相对大小 关键字,长度值/百分比值)。font-size1
④ 字体大小 调整 (指定 尺寸比 / 保留 首选字体的 x-height,影响 字体的 实际字体大小 ) 尺寸比= x-height /font-sizefont-size-adjust3
⑤ 收缩或拉伸 当前的字体。设置 字体的 伸缩版本 (搭配font-family 属性)font-stretch2
⑥ 设置 字体样式 / 字体的倾斜 (搭配 font-family 属性)。font-style1
⑦ 设置 字体的变体 (小型的 大写字母 / 简写属性)font-variant1
⑧ 设置 字体的粗细 (搭配 font-family 属性)font-weight1
⑨ 设置 自定义字体 (不是属性,是一种@规则)@font-face3

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;
  • ⑻ 除了以上 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;
  • ⒀ 字体族名的 浏览器支持
    • 在这里插入图片描述
  • 示例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;
<absolute-size> | <relative-size> | <length-percentage>

where 
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>

/* <absolute-size>，绝对大小值 */
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;

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

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

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

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

    • Ⅰ. 绝对大小 关键字: 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 | <percentage>;
/* 关键字值 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
        • 最宽的字体

    • Ⅳ. 百分比值: <percentage>

      • 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 <angle>| 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 <angle>
      • ❶ 倾斜的角度:
        • 选择分类为 倾斜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 | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

where 
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]

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

font-variant-east-asian: full-width;         /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
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。
    • ③ 东亚字体 变体 宽度关键字值<east-asian-width-values>
      • 这些值 控制用于 东亚字符的 数字大小。两个可能的值:
      • ❶ proportional-width: 美 /prəˈpɔːrʃənl/
        • 激活 一组 宽度不同的东亚字符。
        • 它对应于 OpenType 值 pwid
      • ❷ full-width:
        • 激活 东亚字符集，这些字符 都是相同的，大致是 正方形，宽度标准。
        • 它对应于OpenType值 fwid
    • ④ 东亚字体 变体 关键字值: <east-asian-variant-values>
      • 这些值 指定一组 用于显示的 符号变体。可能的值是:
关键字定义字形的标准OpenType 等值
jis78JIS X 0208:1978jp78
jis83JIS X 0208:1983jp83
jis90JIS X 0208:1990jp90
jis04JIS X 0213:2004jp04
simplifiedNone, 使用 简体中文符号smpl
traditionalNone, 使用传统的汉字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的优点: 主要强项在于它 能给开发者 提供关于字体显示、不同字体大小的像素级 显示 等的 高级控制。
          • 更多 详细信息
  • ⑷ 浏览器支持
    • 在这里插入图片描述

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
100400100
200400100
300400
(300 及以下,更粗 = 400 = normal)		100
400700100
500700
(400~500 ,更粗 = 700 = bold)		100
(500 及以下,更细 = 100 = thin)
600900400
700900400
(600~700 及以下,更细 = 400 = normal)
800900700
900900
(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(https://blog.csdn.net/"/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url(https://blog.csdn.net/"/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
  • ⑶ 自定义字体 @font-face 的语法
@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>  [<format>]; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
where 
<family-name> = <string> | <custom-ident>+
  • ⑷ 自定义字体 @font-face的 属性
    • ① 指定 字体名字: font-family
      • 自定义字体的名字 将会被用于font或font-family属性( i.e. font-family: <family-name>; )
    • ② 指定 字体地址: src [<format>]
      • ❶ 字体的路径:(相对该 css 文件的路径,可相对,可绝对路径)
        • 远程字体文件位置的URL 或者 用户计算机上的字体名称， 可以使用local语法通过名称 指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。
        • 如果 找不到该字体，将会尝试 其他来源，直到找到它。
      • ❷ 自定义字体的格式:
        • [<format>] 指的是 自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：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(https://blog.csdn.net/"../fonts/ChickenDinnerDemo.otf") format("opentype"), url(https://blog.csdn.net/'../fonts/chickendinnerdemo-webfont.woff2') format('woff2'),
    url(https://blog.csdn.net/'../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 mistakes</span>.
    </p>
默认 字体样式自定义 字体样式
  • ⑸ 注意事项

    • ① 字体的路径: src: url(https://blog.csdn.net/"../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(https://at.alicdn.com/t/font_1404888168_2057645.eot);
            
            src: url(https://at.alicdn.com/t/font_1404888168_2057645.eot?#iefix) format("embedded-opentype"),
             url(https://at.alicdn.com/t/font_1404888168_2057645.woff) format("woff"), 
             url(https://at.alicdn.com/t/font_1404888168_2057645.ttf) format("truetype"), 
             url(https://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(https://blog.csdn.net/"../fonts/ChickenDinnerDemo.otf") format("opentype"), url(https://blog.csdn.net/'../fonts/chickendinnerdemo-webfont.woff2') format('woff2'),
    url(https://blog.csdn.net/'../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;

♣ 结束语 和 友情链接

  • 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
    • 可以备注 支持的理由 或 想对作者说的话哦~
      在这里插入图片描述
  • 赞助二维码:
    在这里插入图片描述
  • 感谢：♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，持续更新中, 感谢阅读 ~
  • 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
  • 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
    • 作者：Hey_Coder
    • 来源：CSDN
    • 原文：https://blog.csdn.net/VickyTsai/article/details/103154814
    • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！

在这里插入图片描述

标签
#css字体属性 #font #font-variant #font-size #@font-face
CSS属性 – font-variant(了解)
coolchaobing的博客
07-27 2960
认识font-variant
CSS之font-size的说明与妙用
热门推荐
zhang_hai_cheng的博客
09-18 1万+
font-size用来设置页面的字号，他有很多种指定方式，像绝对值、相对值、长度值、百分比值、数学值、全局值。用它怎么设置比浏览器最小字号更小的字号，并能够让页面实际渲染出来？ 我的文字之间为什么有空隙，两个span标签不挨着，两个图片中间有空白条？
思源宋体：零成本打造专业中文排版的完整指南
最新发布
gitblog_00292的博客
04-29 445
还在为中文排版的美观性和专业性发愁吗？思源宋体这款开源字体解决方案，让你无需任何费用就能获得媲美商业字体的完美体验。作为Adobe与Google联合打造的开源项目，它不仅提供7种完整字重，更采用SIL开源许可证，让商业应用毫无后顾之忧。 ## 为什么思源宋体是你的最佳选择？ ### 完全开源免授权的商业优势 **零成本商业使用**是思源宋体最大的亮点。与传统商业字体动辄数千元的授权费用不同，
7、前端开发：CSS知识总结——字体样式
不迁怒，不贰过。小知识，大智慧。
08-16 5806
字体设置也是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。...
css 加粗_常用的css属性
weixin_39517560的博客
11-29 847
今天给大家介绍一些常用的css属性:1 font-size:用于设置字体大小 font-size:20px; font-size:150%2 font-weight:设置字体是否加粗 normal 不加粗 2 bold：加粗3 font-style:设置字体是否倾斜 normal 不倾斜 italic 倾斜4 font-family:设置字体名称 font-family:”宋体”, ”微软雅黑”5...
CSS设置字体样式
lh11223326的博客
04-06 1万+
在网页中字体是重要的组成部分，使用好字体可以让网页更加美观，在CSS中提供了一系列用来设置文本样式的属性，如更改字体，控制字体大小和粗细等等。如下：：用来设置字体的。font-style：用来设置字体风格，比如斜体。：用来设置字体粗细。font-size：用来设置字体尺寸。：可以将小写字母转换为小型大写字母。：对字体进行伸缩变形(使用较小，并且主流的浏览器都不支持，就不做讲解了)。font：字体所有属性的缩写，可以在一个声明里面设置多个字体属性。CSS设置网页颜色-CSDN博客。
CSS 字体 font-family属性
Tusk_Act4的博客
01-12 6514
CSS规范清楚的认识到，字体选择是一个常见而且很重要的特性，所以设置字体的属性就是样式表中最常见的用途之一。 字体相关的属性在CSS1就已经定义，CSS3又新增了font-stretch 和 font-size-adjust 这两个属性。 人们早已认识到字体选择很重要，并在CSS2就支持可下载字体，也定义了 @font-face 相关属性，但是并没有得到浏览器的广泛支持。直到CSS3，浏览器才开始支持 @font-face，使设计师可以在网页中使用自己喜欢的任意字体。 字体系列 在CSS中，通过 font-
CSS属性详解——使用font属性设置字体
Wod_7的博客
05-23 6305
CSS 是一门用于网页样式控制的语言，其中 font 属性用于设置网页中元素字体的风格、大小、粗细和类型等。在本文中，我们将深入介绍该属性的详细语法和使用方式，帮助您轻松掌握使用。
CSS字体属性(font-family、font-size、font-weight、font-style)
Dreamer
10-20 6487
CSS字体属性 CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式。 字体系列 CSS使用font-family属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family:Arial,"Microsoft Yahei","微软雅黑";} 各种字体间用英文英文状态下的逗号隔开。如果是用空格隔开的多个单词组成的字体，需要加引号。尽量使用系统自带的字体，保证在任何用户的浏览器中都能够正常显示。首先显示第一种字体，电脑没有第一种字体会显示第二种字
css字体样式属性-font字体
der_alone的博客
09-15 732
font字体 1）font-size 字体大小 作用：用于设置字号 可以使用相对长度单位，也可以使用绝对长度单位，但使用较少。 字体像素最小是12px 2）font-family 字体 各种字体之间必须使用英文状态下的逗号分隔 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 3）font-weight 字体粗细 属性值 描述 normal 默认值（不加粗）
html font综合属性,CSS font字体样式属性
weixin_39625098的博客
06-10 827
font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p{ font...
CSS文字文本样式（font字体、css外观属性）
IT之一小佬的博客
01-10 8411
1. font字体 1.1. font-size:大小 作用：font-size属性用于设置字号。 p { font-size:20px; } 单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 注意： 文字大小基本就用px了，其他单位很少使用 谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。...
怎样通过font属性控制CSS字体样式？
CZ-001的博客
05-16 1342
使用font-family属性设置字体时，需要注意以下几点。使用fomt属性综合设置字体样式时，必须按上述语法格式中的顺序书写，各个属性以空格隔开(line-height用于设置行间距，属于文本外观属性，在后面将具体介绍)。其中，不需要设置的属性可以省略(省略的属性将取默认值)，但必须保留fomt-size和 font-family属性，否则font 属性将不起作用。从图中可以看出，font属性设置的样式并没有对第二个段落文本生效，这是因为对第二个段落文本的设置中省略了字体属性“font-family”。
【重学前端】CSS 字体属性 Font
qq_36194388的博客
07-19 947
font-family 字体名称 作用： 设置或检索用于对象中文本的字体名称序列。 语法： font-family :name 示例： p{ font-family: 微软雅黑; } p{ font-family: "arial block"; } p{ font-family: Courier, "arial block"; } p{ font-family: Courier, "arial block", 微软雅黑; } 注: 1）字体名称可以是英文也可以是中文。 2）英文字体如果出来多个.
css属性字体（font）样式使用详解
hacker97
04-16 4285
现在主要设置的字体样式种类有以下五种 1、font-style：指定文本字体样式 itailc：指定为斜体 oblique：对于没有设计过斜体样式的文字强行用代码使其倾斜 2、font-variant：指定文本是否为小型的大写字母（只对字母有效） small-cap：小型的大写字母 3、font-weight：指定文本字体的粗细 bold：粗体400 4、font-size：指定文
常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
No1banana的博客
01-22 3352
一、常见的CSS字体样式属性 1.font-size属性：用于设置字体字号 该属性的值有 相对长度单位：em（相对当前对象内文本字体尺寸）px（像素，最常用） 绝对长度单位：in（英寸）cm（厘米）mm（毫米）pt（点） 2.font-family属性：用于自定义设置字体 css样式代码p{ font-family:"微软雅黑"; } 3.font-weight属性：用于定义字体的粗细 字体粗细常用的值有：normal（默认值400）bold（粗体700）bolder（更粗字体）lighter（更细的字体）
CSS字体属性-字体系列（font-family）-字体大小(font-size)-字体粗细(font-weight)-文字样式(font-style)-字体复合属性（font）
qq_51277605的博客
02-23 6687
CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。 字体系列： CSS 使用font-family属性定义文本的字体系列。 p { font-family: "微软雅黑"; } div { font-family: Arial, "Microsoft Yahei", 微软雅黑; } 多个字体时 各个字体用英文逗号分开 遇见多个单词组成的有空格的 用引号进行包含 单双引号都可以 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示 最常见的几个字体： body
css字体font属性
2301_76255666的博客
07-06 411
font是符合属性，可以一次性完成对公字体属性的设置，包括字体粗细、风格、字体变体、大小/行高及字体名称。
CSS字体样式属性（font-size、font-family、Unicode、font-weight、font-style、font）
weixin_42235173的博客
06-06 1万+
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下： font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下C...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hey_Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值