千字网 CDN

主题

最佳实践 ​

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

性能优化 ​

1. 精确选择字体 ​

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

错误做法：

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

正确做法：

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

优势：

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

2. 使用加速域名 ​

推荐域名优先级：

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

示例：

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

3. 合理设置 font-display ​

不同场景的推荐值：

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

示例：

css
/* 标题使用 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. 预加载关键字体 ​

适用场景：

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

实现方法：

html
<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. 避免重复引用 ​

错误做法：

css
/* 在多个文件中重复引用同一字体 */
/* 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
/* 在主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. 设置合理的字体回退 ​

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

示例：

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

回退顺序：

  1. 千字网CDN字体
  2. 系统中文字体
  3. 系统默认无衬线字体

2. 优化字体大小和行高 ​

推荐值：

css
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. 响应式字体大小 ​

移动端优化：

css
/* 移动端使用较小字体 */
@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. 避免字体闪烁 ​

方法：

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

示例：

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

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

开发实践 ​

1. 使用CSS变量管理字体 ​

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

示例：

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：

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：

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. 条件加载字体 ​

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

示例：

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

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

4. 使用字体加载事件 ​

JavaScript 示例：

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. 备份字体配置 ​

建议做法：

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

示例配置记录：

markdown
## 字体配置记录

### 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. 忽视字体加载状态 ​

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

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

总结 ​

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

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

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

相关文档 ​

基于 MIT 许可发布 | 支持开源

版权所有 © 2024-present Exyone Dev