编辑“︁CSS自定义字体”︁

= CSS自定义字体 =

== 介绍 ==
'''CSS自定义字体'''允许开发者通过<code>@font-face</code>规则加载并使用非系统默认的字体文件（如TTF、WOFF、WOFF2等）。这一功能突破了传统网页设计对用户设备字体的依赖，使设计师能够精确控制排版风格，同时保持跨平台一致性。

== 工作原理 ==
浏览器通过HTTP请求获取字体文件，随后将其临时安装到用户系统中供页面渲染使用。整个过程分为三个步骤：
# 定义字体家族（<code>@font-face</code>）
# 指定字体文件路径（<code>src</code>属性）
# 在元素中应用该字体（<code>font-family</code>）

<mermaid>
graph TD
    A[定义@font-face] --> B[指定字体文件]
    B --> C[应用font-family]
</mermaid>

== 基础语法 ==
以下是最基本的<code>@font-face</code>实现：

<syntaxhighlight lang="css">
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/myfont.woff2') format('woff2'),
         url('fonts/myfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}
</syntaxhighlight>

=== 参数说明 ===
* '''font-family'''：定义引用时的字体名称
* '''src'''：支持多文件回退（现代浏览器优先加载WOFF2）
* '''format()'''：帮助浏览器快速识别字体类型
* '''font-display: swap'''：避免字体加载时的文本不可见期（FOIT）

== 高级特性 ==

=== 多字重/样式支持 ===
为同一字体家族的不同变体分别定义：

<syntaxhighlight lang="css">
@font-face {
    font-family: 'MyVariableFont';
    src: url('font-bold.woff2') format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: 'MyVariableFont';
    src: url('font-italic.woff2') format('woff2');
    font-style: italic;
}
</syntaxhighlight>

=== 可变字体（Variable Fonts） ===
单个文件支持多种动态变化：

<syntaxhighlight lang="css">
@font-face {
    font-family: 'MyVF';
    src: url('font.woff2') format('woff2-variations');
    font-weight: 100 900; /* 定义可变范围 */
    font-stretch: 75% 125%;
}

h1 {
    font-family: 'MyVF';
    font-weight: 350; /* 使用中间值 */
}
</syntaxhighlight>

== 性能优化 ==

=== 字体子集化 ===
使用工具（如pyftsubset）只包含需要的字符：
<math>
文件大小 = \sum_{i=1}^{n} (字符_i \times 编码成本)
</math>

=== 预加载提示 ===
在HTML头部添加：
<syntaxhighlight lang="html">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</syntaxhighlight>

== 浏览器兼容性 ==
{| class="wikitable"
|-
! 格式 !! 支持版本
|-
| WOFF2 | Chrome 36+, Firefox 39+
|-
| WOFF | IE9+, 所有现代浏览器
|-
| TTF/OTF | 部分限制支持
|}

== 实际案例 ==
'''电商品牌定制'''：某奢侈品网站使用自定义字体实现独特的品牌标识：
<syntaxhighlight lang="css">
@font-face {
    font-family: 'LuxurySerif';
    src: url('luxury.woff2') format('woff2');
    unicode-range: U+0020-007F; /* 仅拉丁字符 */
}

.product-title {
    font-family: 'LuxurySerif', serif;
    letter-spacing: 0.1em;
}
</syntaxhighlight>

== 常见问题 ==

=== FOUT处理 ===
通过CSS定义回退字体匹配：
<syntaxhighlight lang="css">
body {
    font-family: 'CustomFont', fallback-font;
    /* 确保回退字体有相似的度量值 */
    font-size-adjust: 0.5; /* 保持x-height一致 */
}
</syntaxhighlight>

=== 版权问题 ===
* 确认字体许可证允许网页嵌入
* 商业字体通常需要购买Webfont授权
* 推荐使用开源字体（如Google Fonts、Font Squirrel）

== 扩展阅读 ==
* WOFF2压缩算法原理
* 字体渲染引擎差异（Windows/macOS）
* CSS Fonts Module Level 4新特性

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]