CSS 字体 Font 5.1核心简写属性 font font 属性是一个简写属性，允许你在一行声明中设置多个字体相关的

核心简写属性 font

font 属性是一个简写属性，允许你在一行声明中设置多个字体相关的属性。

作用: 同时设置 font-style, font-variant, font-weight, font-stretch, font-size, line-height, 和 font-family。
语法:
- 必须包含和这两个值。
- font-style, font-variant, font-weight, font-stretch 必须在 font-size 之前，顺序不限。
- line-height 必须紧跟在 font-size 之后，用斜杠 / 分隔。
- font-family 必须是最后一个值。
- 示例: font: italic small-caps bold 16px/1.5 Arial, sans-serif;
- 注意: 如果省略了可选值，它们会被设置为各自的初始值（例如 font-weight: normal）。
系统字体关键字: font 也可以设置为一些关键字，直接使用操作系统的字体（现在不太常用，建议显式指定）：
- caption: 活动窗口标题栏字体。
- icon: 图标标签字体。
- menu: 菜单字体。
- message-box: 对话框字体。
- small-caption: 小号标题栏字体。
- status-bar: 窗口状态栏字体。

字体具体属性 (Longhand Font Properties)

以下是构成 font 简写属性或与之紧密相关的具体属性：

font-family
- 作用: 指定一个按优先级排序的字体族名称列表和/或通用字体族名称。浏览器会尝试列表中的第一个字体，如果不可用则尝试下一个，直到找到可用的字体或使用通用字体族。
- 值:
  - : 具体的字体名称，如 "Times New Roman", Arial, Verdana。包含空格的字体名称需要用引号括起来。
  - : 通用字体族（作为最终后备）。包括：
    - serif: 带衬线的字体 (如 Times New Roman)。
    - sans-serif: 无衬线的字体 (如 Arial, Helvetica)。 （网页最常用）
    - monospace: 等宽字体 (如 Courier New, Consolas)。
    - cursive: 草书字体 (如 Comic Sans MS - 慎用, Brush Script MT)。
    - fantasy: 装饰性字体 (如 Impact)。
    - system-ui: 使用系统默认 UI 字体。
    - ui-serif, ui-sans-serif, ui-monospace, ui-rounded: 更细化的系统 UI 字体。
    - math: 用于数学表达式的特殊样式字体。
- 示例: font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; (这是一个考虑多平台的常用后备列表)
font-size
- 作用: 设置字体的大小。
- 值:
  - 绝对大小关键字: xx-small, x-small, small, medium, large, x-large, xx-large (基于用户浏览器的默认字体大小)。
  - 相对大小关键字: smaller, larger (相对于父元素的字体大小)。
  - 长度值: :
    - px (像素): 固定大小，最常用。
    - em: 相对于当前元素的字体大小 (若未设置则继承父元素)。1em 等于当前字体大小。
    - rem (root em): 相对于根元素 的字体大小。非常适合响应式设计和全局字体大小调整。
    - % (百分比): 相对于父元素的字体大小。
    - vw, vh: 相对于视口宽度或高度的百分比。
  - 数学函数: calc(), min(), max(), clamp() 可以用于计算。
- 示例: font-size: 16px;, font-size: 1.2rem;, font-size: 80%;
font-weight
- 作用: 设置字体的粗细程度。
- 值:
  - 关键字:
    - normal: 等同于 400。
    - bold: 等同于 700。
    - lighter: 比父元素更细一级 (受可用字重限制)。
    - bolder: 比父元素更粗一级 (受可用字重限制)。
  - 数值: 100 到 900 之间的整百数。
    - 100: Thin (Hairline)
    - 200: Extra Light (Ultra Light)
    - 300: Light
    - 400: Normal (Regular)
    - 500: Medium
    - 600: Semi Bold (Demi Bold)
    - 700: Bold
    - 800: Extra Bold (Ultra Bold)
    - 900: Black (Heavy)
  - 注意: 并非所有字体都支持所有这些字重。浏览器会尝试匹配最接近的可用字重。可变字体 (Variable Fonts) 可以支持这个范围内的任意值。
- 示例: font-weight: bold;, font-weight: 600;
font-style
- 作用: 设置字体样式。
- 值:
  - normal: 正常的字体样式。
  - italic: 使用字体的斜体版本 (如果可用)。
  - oblique: 使用字体的倾斜版本 (通常是程序化倾斜的 normal 版本)。可以指定角度，如 oblique 14deg。
- 示例: font-style: italic;
line-height
- 作用: 设置文本行之间的距离（行高）。影响垂直间距。
- 值:
  - normal: (默认值) 浏览器根据字体和大小计算一个合理的行高，通常约为 1.2。
  - 数值 (Unitless): : 推荐使用。这个数字会乘以元素自身的 font-size 来计算行高。例如 line-height: 1.5; 表示行高是字体大小的 1.5 倍。这种方式继承性最好。
  - 长度值: : 如 24px, 1.5em。em 相对于当前元素的字体大小计算。
  - 百分比: : 相对于元素自身的 font-size 计算。例如 line-height: 150%;。
- 示例: line-height: 1.6; (最常用和推荐), line-height: 30px;
font-variant
- 作用: 控制字体的变体形式，如小型大写字母。这是一个简写属性，用于设置更具体的 font-variant-* 属性。
- 常用值 (简写):
  - normal: 重置所有变体为默认值。
  - none: 关闭所有变体（等同于 font-variant-ligatures: none; font-variant-caps: normal; 等）。
  - small-caps: 启用小型大写字母。
- 它涵盖的具体属性 (Longhands):
  - font-variant-ligatures: 控制连字 (如 fi, ffl)。值: normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures, etc.
  - font-variant-caps: 控制大写字母形式。值: normal, small-caps, all-small-caps, petite-caps, unicase, titling-caps.
  - font-variant-numeric: 控制数字、分数、序号标记的显示。值: normal, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero.
  - font-variant-east-asian: 控制东亚文字的字形替换。值: normal, jis78, jis83, simplified, traditional, full-width, proportional-width, ruby.
  - font-variant-alternates: 控制备用字形 (很少直接使用)。
  - font-variant-position: 控制上标和下标 (很少直接使用，通常用 ^{/_{或 vertical-align)。}}
- 示例: font-variant: small-caps;
font-stretch
- 作用: 从一个字体家族中选择一个正常、压缩或扩展的字体外观。需要字体本身提供不同宽度的变体（常见于可变字体或大型字体家族）。
- 值 (关键字):
  - ultra-condensed
  - extra-condensed
  - condensed
  - semi-condensed
  - normal
  - semi-expanded
  - expanded
  - extra-expanded
  - ultra-expanded
- 值 (百分比): 也可以使用百分比值。
- 示例: font-stretch: condensed;

其他相关的字体属性和规则

@font-face 规则
- 作用: 不是属性，而是一个 CSS @规则。允许网页开发者指定在用户计算机上未安装的自定义字体，指示浏览器从服务器或本地下载并在网页上使用。
- 常用描述符:
  - font-family: 定义字体的名称，供 CSS 其他地方引用。
  - src: 指定字体文件的来源 URL (url()) 或本地字体名称 (local())。可以提供多种格式 (woff2, woff, ttf, otf, eot, svg) 以兼容不同浏览器。
  - font-weight: 定义这个字体文件对应的字重。
  - font-style: 定义这个字体文件对应的样式。
  - font-stretch: 定义这个字体文件对应的拉伸度。
  - font-display: 控制字体加载期间的行为。
  - unicode-range: 指定这个字体文件支持的 Unicode 字符范围。
- 示例:
```
      @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 推荐：先显示后备字体，字体加载完后替换 */
}
    
```
font-display (在 @font-face 中使用)
- 作用: 控制可下载字体（通过 @font-face 指定）在下载期间和下载完成后的显示方式。影响性能感知和布局稳定性（避免 FOIT/FOUT）。
- 值:
  - auto: (默认) 浏览器自定义行为。
  - block: 短暂阻塞期（字体不可见），然后无限交换期（字体加载后显示）。可能导致 FOIT (Flash of Invisible Text)。
  - swap: 极短阻塞期，然后无限交换期。会先显示后备字体，字体加载完成后替换。可能导致 FOUT (Flash of Unstyled Text)，但内容始终可见。常用推荐值。
  - fallback: 极短阻塞期，短暂交换期。如果字体没在短暂交换期内加载完成，将一直使用后备字体。
  - optional: 极短阻塞期，无交换期。如果字体未立即可用，则使用后备字体，并可能在后台下载字体供下次导航使用。对性能最好，但可能不用新字体。
font-kerning
- 作用: 控制是否使用字体中存储的字距调整信息（kerning pairs），用于调整某些特定字符对（如 'AV', 'To'）之间的间距，使排版更美观。
- 值:
  - auto: (默认) 浏览器决定是否应用字距调整。
  - normal: 应用字距调整。
  - none: 禁用字距调整。
- 示例: font-kerning: normal;
font-optical-sizing
- 作用: 控制浏览器是否根据字体大小自动优化字形的外观（光学尺寸调整）。例如，小字号时笔画可能略微加粗以提高可读性。需要可变字体的支持。
- 值:
  - auto: (默认) 允许浏览器进行光学尺寸调整。
  - none: 禁用光学尺寸调整。
- 示例: font-optical-sizing: auto;
font-feature-settings
- 作用: 提供对 OpenType 字体特性（如连字、花体字、分数、小型大写字母等）的低级别控制。功能强大但语法复杂，通常优先使用 font-variant-* 属性。
- 值: 一个逗号分隔的特性标签字符串。标签是 4 个字符的 OpenType 特性标签。可以指定开启 (1 或 on) 或关闭 (0 或 off)。
- 示例: font-feature-settings: "liga" on, "smcp" on, "zero" on; (开启标准连字、小型大写字母、带斜线的零)
font-synthesis
- 作用: 控制当字体缺少粗体或斜体版本时，浏览器是否被允许“合成”（伪造）这些样式。
- 值:
  - none: 禁止合成粗体和斜体。
  - weight: 允许合成粗体。
  - style: 允许合成斜体/倾斜。
  - weight style: (默认值) 允许合成粗体和斜体。
- 示例: font-synthesis: none; (如果你希望只使用字体本身提供的样式)

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 字体属性示例</title>
    <link rel="stylesheet" href="111.css">
    <!-- 引入 Google Font (需要联网) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>

    <h1>字体属性演示</h1>

    <section>
        <h2><code>font-family</code> (字体族)</h2>
        <p class="font-default">这是默认字体（通常继承自浏览器或父元素）。Lorem ipsum dolor sit amet.</p>
        <p class="font-serif">这是衬线字体 (Serif)。例如：Georgia, Times New Roman。</p>
        <p class="font-sans-serif">这是无衬线字体 (Sans-serif)。例如：Arial, Helvetica, Verdana。</p>
        <p class="font-monospace">这是等宽字体 (Monospace)。例如：Courier New, Monaco。</p>
        <p class="font-cursive">这是草书字体 (Cursive)。</p>
        <p class="font-fantasy">这是装饰字体 (Fantasy)。</p>
        <p class="font-custom">这是自定义 Web 字体 (Open Sans)。</p>
        <p class="font-custom-lobster">这是另一个自定义 Web 字体 (Lobster)。</p>
    </section>

    <section>
        <h2><code>font-size</code> (字体大小)</h2>
        <p class="size-px">字体大小设置为 14px。</p>
        <p class="size-rem">字体大小设置为 1.5rem (相对于根元素)。</p>
        <p class="size-em">字体大小设置为 1.2em (相对于父元素)。</p>
        <p class="size-percent">字体大小设置为 90% (相对于父元素)。</p>
        <p class="size-keyword">字体大小设置为 large (关键字)。</p>
    </section>

    <section>
        <h2><code>font-weight</code> (字体粗细)</h2>
        <p class="weight-normal">正常粗细 (font-weight: normal / 400)。</p>
        <p class="weight-bold">加粗 (font-weight: bold / 700)。</p>
        <p class="weight-lighter">更细 (font-weight: lighter / 300) - 需要字体支持。</p>
        <p class="weight-bolder">更粗 (font-weight: bolder / 900) - 需要字体支持。</p>
        <p class="weight-numeric">数字设置粗细 (font-weight: 600) - 需要字体支持。</p>
    </section>

    <section>
        <h2><code>font-style</code> (字体样式)</h2>
        <p class="style-normal">正常样式 (font-style: normal)。</p>
        <p class="style-italic">斜体样式 (font-style: italic) - 使用字体的斜体版本。</p>
        <p class="style-oblique">倾斜样式 (font-style: oblique) - 程序化倾斜正常字体。</p>
    </section>

    <section>
        <h2><code>line-height</code> (行高)</h2>
        <p class="line-height-normal">这是默认行高 (normal)。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="line-height-unitless">这是 1.8 倍字体大小的行高 (unitless: 1.8)。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="line-height-px">这是固定 30px 的行高 (length: 30px)。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section>
        <h2><code>font-variant</code> & 其他文本属性</h2>
        <p class="variant-small-caps">小型大写字母 (font-variant: small-caps)。ABCDEFG abcdefg</p>
        <p class="text-decoration-underline">带下划线 (text-decoration: underline)。</p>
        <p class="text-decoration-line-through">带删除线 (text-decoration: line-through)。</p>
        <p class="text-transform-uppercase">全部大写 (text-transform: uppercase)。</p>
        <p class="text-transform-capitalize">首字母大写 (text-transform: capitalize)。some words here.</p>
        <p class="letter-spacing-example">调整字符间距 (letter-spacing: 2px)。</p>
        <p class="word-spacing-example">调整单词间距 (word-spacing: 10px)。Some long words here to see spacing.</p>
    </section>

    <section>
        <h2><code>font</code> 简写属性</h2>
        <p class="font-shorthand-1">简写示例 1: font: italic bold 18px/1.5 Arial, sans-serif;</p>
        <p class="font-shorthand-2">简写示例 2: font: small-caps 600 1.2rem Georgia, serif;</p>
    </section>

</body>
</html>

/* 基础样式和默认字体 */
body {
  font-family: sans-serif; /* 设置一个通用后备 */
  line-height: 1.5;      /* 设置基础行高 */
  margin: 20px;
  background-color: #f9f9f9;
}

h1, h2 {
  color: #333;
  border-bottom: 2px solid steelblue;
  padding-bottom: 5px;
  margin-top: 30px;
}

section {
  margin-bottom: 30px;
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

p {
  margin-bottom: 10px;
  color: #555;
}

/* --- font-family 示例 --- */
.font-serif {
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.font-sans-serif {
  font-family: Arial, Helvetica, Verdana, sans-serif;
}
.font-monospace {
  font-family: 'Courier New', Courier, monospace;
}
.font-cursive {
  /* 注意：草书和装饰字体依赖用户系统安装，效果可能差异很大 */
  font-family: cursive;
}
.font-fantasy {
  font-family: fantasy;
}
.font-custom {
  /* 使用从 Google Fonts 引入的 Open Sans */
  font-family: 'Open Sans', sans-serif;
}
.font-custom-lobster {
   /* 使用从 Google Fonts 引入的 Lobster */
  font-family: 'Lobster', cursive;
  font-size: 1.3em; /* 这个字体可能需要大一点才好看 */
}


/* --- font-size 示例 --- */
.size-px {
  font-size: 14px;
}
.size-rem {
  font-size: 1.5rem; /* 假设根元素字体大小为 16px，则为 1.5 * 16 = 24px */
}
.size-em {
  font-size: 1.2em; /* 如果父元素字体大小为 16px，则为 1.2 * 16 = 19.2px */
}
.size-percent {
  font-size: 90%;
}
.size-keyword {
  font-size: large;
}

/* --- font-weight 示例 --- */
.weight-normal {
  font-weight: normal; /* 400 */
}
.weight-bold {
  font-weight: bold; /* 700 */
}
.weight-lighter {
  /* 需要 Open Sans 字体支持 Light (300) 字重才能看到效果 */
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; /* 或 lighter */
}
.weight-bolder {
   /* 需要 Open Sans 字体支持 Black/Heavy (900) 字重才能看到效果 */
   /* Open Sans 标准版可能只到 700 或 800，这里用 700 演示 bold */
  font-family: 'Open Sans', sans-serif;
  font-weight: 700; /* 或 bolder */
}
.weight-numeric {
  /* 需要 Open Sans 字体支持 Semi-Bold (600) 字重才能看到效果 */
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

/* --- font-style 示例 --- */
.style-normal {
  font-style: normal;
}
.style-italic {
  /* 需要 Open Sans 字体支持 Italic 样式 */
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
}
.style-oblique {
  /* 倾斜效果，即使字体没有提供 italic 版本 */
  font-style: oblique 10deg; /* 可以指定倾斜角度 */
}

/* --- line-height 示例 --- */
.line-height-normal {
  line-height: normal;
  background-color: #eee; /* 加背景便于观察 */
}
.line-height-unitless {
  line-height: 1.8; /* 推荐方式 */
  background-color: #e0f7fa;
}
.line-height-px {
  line-height: 30px;
  background-color: #fff9c4;
  font-size: 14px; /* 固定行高可能与字体大小不匹配 */
}

/* --- font-variant & 其他文本属性示例 --- */
.variant-small-caps {
  font-variant: small-caps;
}
.text-decoration-underline {
  text-decoration: underline;
  text-decoration-color: red; /* 可以设置颜色 */
  text-decoration-style: wavy; /* 可以设置样式 */
}
.text-decoration-line-through {
  text-decoration: line-through;
}
.text-transform-uppercase {
  text-transform: uppercase;
}
.text-transform-capitalize {
  text-transform: capitalize;
}
.letter-spacing-example {
  letter-spacing: 2px;
}
.word-spacing-example {
  word-spacing: 10px;
}


    
# 案例 2
    
    
```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>字体样式示例</title>
  <style>
    .font-style {
      font-family: "Helvetica Neue", Arial, sans-serif; /* 字体 */
      font-size: 18px;               /* 字体大小 */
      font-weight: 600;              /* 字体粗细 */
      font-style: italic;            /* 字体样式：italic / normal */
      line-height: 1.6;              /* 行高 */
      color: #333;                   /* 字体颜色 */
      letter-spacing: 1px;           /* 字符间距 */
      word-spacing: 2px;             /* 单词间距 */
      text-align: left;              /* 文本对齐 */
      text-decoration: underline;    /* 下划线，可选值：none、underline、line-through */
      text-transform: capitalize;    /* 首字母大写，可选值：uppercase、lowercase、none */
    }
  </style>
</head>
<body>

  <p class="font-style">
    This is a styled font example. 字体样式示例。
  </p>

</body>
</html>