CSS自定义字体

CSS自定义字体

介绍

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

工作原理

浏览器通过HTTP请求获取字体文件，随后将其临时安装到用户系统中供页面渲染使用。整个过程分为三个步骤：

1. 定义字体家族（@font-face）
2. 指定字体文件路径（src属性）
3. 在元素中应用该字体（font-family）

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

基础语法

以下是最基本的@font-face实现：

@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;
}

参数说明

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

高级特性

多字重/样式支持

为同一字体家族的不同变体分别定义：

@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;
}

可变字体（Variable Fonts）

单个文件支持多种动态变化：

@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; /* 使用中间值 */
}

性能优化

字体子集化

使用工具（如pyftsubset）只包含需要的字符： 解析失败 (语法错误): {\displaystyle 文件大小 = \sum_{i=1}^{n} (字符_i \times 编码成本) }

预加载提示

在HTML头部添加：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

浏览器兼容性

格式	支持版本
Chrome 36+, Firefox 39+
IE9+, 所有现代浏览器
部分限制支持

实际案例

电商品牌定制：某奢侈品网站使用自定义字体实现独特的品牌标识：

@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;
}

常见问题

FOUT处理

通过CSS定义回退字体匹配：

body {
    font-family: 'CustomFont', fallback-font;
    /* 确保回退字体有相似的度量值 */
    font-size-adjust: 0.5; /* 保持x-height一致 */
}

版权问题

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

扩展阅读

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