最佳实践

本文档提供使用千字网CDN的最佳实践建议，帮助你优化字体使用和提升用户体验。

性能优化

1. 精确选择字体

原则：只引用页面实际使用的字体

错误做法：

/* 引用所有字体，浪费资源 */
@import url('https://hanzi.bluu.pl/main.css');

正确做法：

/* 只引用需要的字体 */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

优势：

减少HTTP请求
降低带宽消耗
提升页面加载速度

2. 使用加速域名

推荐域名优先级：

https://hanzi.itedev.com - 加速域名，速度最快
https://hanzi.bluu.pl - 备用域名（仅可在Codeberg Pages中使用）
https://hanzi.qzz.io - Cloudflare 代理

示例：

/* 优先使用加速域名 */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

3. 合理设置 font-display

不同场景的推荐值：

场景	推荐值	说明
关键标题	`block`	确保字体加载完成再显示
正文文本	`swap`	快速显示内容，提升体验
装饰性字体	`optional`	可选字体，不影响核心内容

示例：

/* 标题使用 block */
h1, h2, h3 {
    font-family: 'Source Han Sans VF', sans-serif;
    font-display: block;
}

/* 正文使用 swap */
p, div {
    font-family: 'Source Han Sans VF', sans-serif;
    font-display: swap;
}

4. 预加载关键字体

适用场景：

首屏关键字体
品牌字体
重要标题字体

实现方法：

<head>
    <!-- 预加载字体CSS -->
    <link rel="preload" href="https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css" as="style">
    
    <!-- 预加载字体文件 -->
    <link rel="preload" href="https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/xxx.woff2" as="font" crossorigin>
    
    <link rel="stylesheet" href="style.css">
</head>

5. 避免重复引用

错误做法：

/* 在多个文件中重复引用同一字体 */
/* main.css */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

/* header.css */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

/* footer.css */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

正确做法：

/* 在主CSS文件中引用一次 */
/* main.css */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

/* 其他CSS文件直接使用字体 */
/* header.css */
h1 {
    font-family: 'Source Han Sans VF', sans-serif;
}

/* footer.css */
footer {
    font-family: 'Source Han Sans VF', sans-serif;
}

用户体验

1. 设置合理的字体回退

原则：确保在任何情况下都有可用的字体

示例：

body {
    font-family: 'Source Han Sans VF', 
                 'PingFang SC', 
                 'Microsoft YaHei', 
                 sans-serif;
}

回退顺序：

千字网CDN字体
系统中文字体
系统默认无衬线字体

2. 优化字体大小和行高

推荐值：

body {
    font-size: 18px;      /* 适合大多数屏幕 */
    line-height: 1.6;     /* 提升可读性 */
}

h1 {
    font-size: 2em;       /* 相对大小 */
    line-height: 1.2;     /* 标题行高较小 */
}

p {
    font-size: 1em;       /* 继承body大小 */
    line-height: 1.6;     /* 正文行高较大 */
}

3. 响应式字体大小

移动端优化：

/* 移动端使用较小字体 */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 1.5em;
    }
}

/* 桌面端使用标准字体 */
@media (min-width: 769px) {
    body {
        font-size: 18px;
    }
    
    h1 {
        font-size: 2em;
    }
}

4. 避免字体闪烁

方法：

使用 font-display: swap
预加载字体
设置合理的回退字体

示例：

@font-face {
    font-family: 'Source Han Sans VF';
    font-display: swap;
}

body {
    font-family: 'Source Han Sans VF', 'PingFang SC', sans-serif;
}

开发实践

1. 使用CSS变量管理字体

优势：便于统一管理和修改

示例：

:root {
    --font-primary: 'Source Han Sans VF';
    --font-secondary: 'Source Han Serif VF';
    --font-mono: 'Source Han Sans VF', monospace;
}

body {
    font-family: var(--font-primary), sans-serif;
}

h1, h2, h3 {
    font-family: var(--font-secondary), serif;
}

code, pre {
    font-family: var(--font-mono);
}

2. 模块化字体引用

推荐结构：

styles/
├── base/
│   ├── fonts.css      # 字体引用
│   ├── reset.css      # 样式重置
│   └── typography.css # 排版样式
├── components/
│   ├── button.css
│   └── card.css
└── pages/
    ├── home.css
    └── about.css

base/fonts.css：

@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");
@import url("https://hanzi.itedev.com/fonts/Source+Han+Serif+VF/result.css");

base/typography.css：

body {
    font-family: 'Source Han Sans VF', sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Source Han Serif VF', serif;
}

3. 条件加载字体

适用场景：不同页面使用不同字体

示例：

/* 首页使用无衬线字体 */
.home-page {
    font-family: 'Source Han Sans VF', sans-serif;
}

/* 文章页使用衬线字体 */
.article-page {
    font-family: 'Source Han Serif VF', serif;
}

4. 使用字体加载事件

JavaScript 示例：

document.fonts.ready.then(function () {
    console.log('所有字体加载完成');
    // 执行字体加载后的操作
});

document.fonts.load('16px "Source Han Sans VF"').then(function () {
    console.log('特定字体加载完成');
    // 执行特定字体加载后的操作
});

维护建议

1. 定期检查字体更新

建议频率：每月检查一次

检查内容：

字体文件是否有更新
字体版本是否有变化
字体授权是否有变更

2. 监控字体加载性能

工具推荐：

Google PageSpeed Insights
Lighthouse
WebPageTest

关键指标：

字体加载时间
首次内容绘制（FCP）
最大内容绘制（LCP）

3. 备份字体配置

建议做法：

保存字体引用配置
记录字体版本信息
建立回退方案

示例配置记录：

## 字体配置记录

### 2026-03-27
- 主字体：Source Han Sans VF
- 衬线字体：Source Han Serif VF
- CDN域名：https://hanzi.itedev.com
- 版本：1.0.0

4. 测试字体兼容性

测试浏览器：

Chrome（最新版本）
Firefox（最新版本）
Safari（最新版本）
Edge（最新版本）

测试设备：

桌面端（Windows、macOS、Linux）
移动端（iOS、Android）
平板设备

5. 优化字体使用策略

定期评估：

是否所有引用的字体都在使用
是否有更合适的字体替代
是否需要调整字体回退策略

优化建议：

移除未使用的字体引用
合并功能相似的字体
更新字体回退列表

常见错误

1. 过度使用字体

错误：引用过多字体，影响性能

解决：只引用必要的字体

2. 忽视字体回退

错误：只设置单一字体，无回退方案

解决：设置合理的字体回退链

3. 不考虑移动端

错误：只在桌面端优化字体

解决：针对移动端进行字体优化

4. 忽视字体加载状态

错误：不处理字体加载失败的情况

解决：使用字体加载事件和回退方案

总结

遵循这些最佳实践，你可以：

提升性能：减少加载时间，优化用户体验
改善兼容性：确保在各种环境下正常工作
便于维护：简化字体管理，降低维护成本
提升质量：提供更好的视觉体验

记住，好的字体使用策略是性能、兼容性和用户体验的平衡。