千字网CDN

常见问题

Exyone Dev — Sat, 28 Mar 2026 04:30:55 GMT

本文档整理了用户在使用千字网CDN时可能遇到的常见问题及详细解答。

基础问题

千字网CDN是什么？

千字网CDN是一个完全免费的公益字体CDN项目，致力于为中文互联网提供稳定、快速的字体服务。所有资源托管于 Codeberg Pages，配合 Cloudflare 全球加速，确保稳定访问。

如何开始使用？

浏览字体列表，找到需要的字体
在CSS中引用字体文件
设置 font-family 属性

详细步骤请参考使用教程。

服务是免费的吗？

是的，千字网CDN完全免费。我们依赖 Codeberg Pages、Cloudflare 等公益平台提供服务，站长自掏腰包维护加速节点。

字体使用

如何找到字体文件夹名和族名？

查看 font_mapping.toml 文件。

文件夹名：URL中使用，如 Source+Han+Sans+VF
族名：CSS中使用，将 + 替换为空格，如 'Source Han Sans VF'

如何引用字体？

在CSS中引用：

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

body {
    font-family: '字体族名';
}

字体支持粗体/斜体吗？

不支持粗体和斜体变体。

本站理念是"能用CSS修改的，就不用字体变体"。通过 font-weight: bold 和 font-style: italic 可以获得粗体和斜体效果。

如需精确的字体变体，推荐使用中文网字计划。

可以商用吗？

请查看各字体的开源许可证。本站仅提供CDN服务，字体版权归各自作者所有。

性能优化

访问速度慢怎么办？

推荐使用加速域名：

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

感谢 minc-nice-100 提供的加速服务。

需要加载所有字体吗？

不建议。引用 main.css 会加载所有字体，页面加载会非常慢。

正确做法：只引用你需要的具体字体。

如何优化字体加载？

只引用需要的字体：避免加载不必要的字体文件
使用加速域名：选择离用户更近的CDN节点
设置 font-display：使用 font-display: swap 提升加载体验
预加载关键字体：使用 <link rel="preload"> 预加载

技术问题

字体无法加载怎么办？

检查URL是否正确：确认字体文件夹名拼写无误
检查网络连接：确保能访问CDN域名
查看浏览器控制台：检查是否有CORS或404错误
尝试其他域名：使用备用域名测试

支持哪些浏览器？

千字网CDN使用标准的 WebFont 格式（WOFF2），支持所有现代浏览器：

Chrome 36+
Firefox 39+
Safari 10+
Edge 14+

不支持 IE 浏览器。

字体文件大小是多少？

经过拆包优化后，单个字体文件通常在 100KB-500KB 之间，具体取决于页面使用的字符数量。

授权与商用

字体授权情况如何？

请查看各字体的开源许可证。本站收录的字体大多为开源字体，但具体授权信息请参考字体原始发布页面。

可以修改字体吗？

请遵守字体的开源许可证。大多数开源字体允许修改，但需要保留原始版权信息。

如何联系字体作者？

请查看字体原始发布页面，通常包含作者联系方式。

最佳实践

Exyone Dev — Sat, 28 Mar 2026 04:30:27 GMT

本文档提供使用千字网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. 忽视字体加载状态

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

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

总结

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

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

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

故障排查

Exyone Dev — Sat, 28 Mar 2026 04:29:04 GMT

本文档帮助你诊断和解决使用千字网CDN时可能遇到的技术问题。

字体加载问题

问题：字体无法加载

症状：

页面显示默认字体
浏览器控制台显示404错误
Network 标签中字体文件加载失败

排查步骤：

检查URL是否正确

/* 确认字体文件夹名拼写正确 */
@import url("https://hanzi.itedev.com/fonts/Source+Han+Sans+VF/result.css");

验证字体文件可访问
- 直接在浏览器中访问字体URL
- 确认返回CSS内容而非404错误
检查网络连接
- 确认能访问CDN域名
- 尝试其他域名（如 hanzi.bluu.pl）
查看浏览器控制台
- 打开开发者工具（F12）
- 检查 Console 和 Network 标签
- 查找错误信息

解决方案：

修正URL拼写错误
切换到其他CDN域名
检查网络连接

问题：字体加载超时

症状：

字体加载时间过长
页面长时间显示空白

排查步骤：

检查网络速度
- 使用网速测试工具检查连接速度
- 确认网络稳定
检查字体文件大小
- 查看字体文件是否异常大
- 正常字体文件应在100KB-500KB之间
使用浏览器缓存
- 清除浏览器缓存
- 使用隐私模式测试

解决方案：

使用加速域名 https://hanzi.itedev.com
设置 font-display: swap 提升体验
考虑预加载字体文件

问题：CORS 错误

症状：

浏览器控制台显示 CORS 错误
字体文件被浏览器阻止加载

排查步骤：

检查CDN域名配置
- 确认CDN正确设置CORS头
- 查看响应头是否包含 Access-Control-Allow-Origin
检查HTTPS/HTTP
- 确认协议匹配
- 混合协议可能导致CORS问题

解决方案：

使用正确的协议（HTTPS或HTTP）
联系CDN提供商检查CORS配置

显示问题

问题：字体显示不正确

症状：

字体族名设置后仍显示默认字体
部分字符显示为方框或问号

排查步骤：

检查font-family名称

/* 确认字体族名正确，注意空格和引号 */
body {
    font-family: 'Source Han Sans VF', sans-serif;
}

检查字符支持
- 确认字体包含所需字符
- 查看字体字符集说明

检查字体加载顺序

/* 确认字体在回退列表中位置正确 */
body {
    font-family: 'Source Han Sans VF', 'PingFang SC', sans-serif;
}

解决方案：

修正 font-family 名称
使用包含所需字符的字体
调整字体回退顺序

问题：字体模糊或锯齿

症状：

字体显示模糊
边缘有锯齿感

排查步骤：

检查字体格式
- 确认使用WOFF2格式
- WOFF2提供更好的渲染质量
检查浏览器设置
- 查看浏览器字体渲染设置
- 尝试调整字体平滑选项
检查屏幕分辨率
- 高分辨率屏幕可能需要调整
- 使用媒体查询优化

解决方案：

使用WOFF2格式字体
调整浏览器字体渲染设置
针对高分辨率屏幕优化

性能问题

问题：页面加载缓慢

症状：

页面加载时间长
字体文件加载时间过长

排查步骤：

检查引用的字体数量

/* 避免引用过多字体 */
@import url("https://hanzi.itedev.com/fonts/字体1/result.css");
@import url("https://hanzi.itedev.com/fonts/字体2/result.css");
@import url("https://hanzi.itedev.com/fonts/字体3/result.css");

检查字体文件大小
- 查看Network标签中字体文件大小
- 确认字体已进行拆包优化
检查网络连接
- 测试网络速度
- 确认CDN节点响应正常

解决方案：

只引用必要的字体
使用加速域名
设置 font-display: swap
考虑预加载关键字体

问题：字体闪烁

症状：

页面加载时字体闪烁
字体切换时出现跳动

排查步骤：

检查font-display设置

/* 确认使用了合适的font-display值 */
@font-face {
    font-family: 'Source Han Sans VF';
    font-display: swap; /* 或其他合适值 */
}

检查字体加载顺序
- 确认字体CSS优先加载
- 避免字体加载延迟

解决方案：

使用 font-display: swap
预加载字体文件
优化字体加载顺序

兼容性问题

问题：IE浏览器不显示字体

症状：

IE浏览器显示默认字体
字体无法加载

排查步骤：

检查浏览器版本
- 确认IE版本
- 千字网CDN不支持IE浏览器
检查字体格式
- WOFF2格式不被IE支持
- 需要使用WOFF或EOT格式

解决方案：

升级到现代浏览器
使用支持IE的字体CDN服务

问题：移动端显示异常

症状：

移动设备字体显示不正确
字体大小或样式异常

排查步骤：

检查媒体查询

/* 确认移动端样式正确 */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

检查viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

解决方案：

优化移动端样式
设置正确的viewport
测试不同移动设备

网络问题

问题：无法访问CDN域名

症状：

无法访问 hanzi.itedev.com
无法访问 hanzi.bluu.pl
DNS解析失败

排查步骤：

检查DNS解析

# Windows
nslookup hanzi.itedev.com

# Mac/Linux
dig hanzi.itedev.com

检查网络连接
- 确认网络连接正常
- 尝试访问其他网站
检查防火墙设置
- 确认防火墙未阻止CDN域名
- 检查代理设置

解决方案：

切换DNS服务器
检查防火墙设置
尝试其他CDN域名

问题：间歇性连接失败

症状：

字体有时加载成功，有时失败
连接不稳定

排查步骤：

检查网络稳定性
- 测试网络连接稳定性
- 查看丢包率
检查CDN节点状态
- 确认CDN节点运行正常
- 查看CDN状态页面

解决方案：

使用更稳定的网络连接
切换到其他CDN域名
设置字体回退方案

诊断工具

浏览器开发者工具

使用方法：

按F12打开开发者工具
选择 "Network" 标签
刷新页面
查看字体文件加载情况

关键信息：

文件大小
加载时间
状态码（200、404等）
响应头

在线字体检测工具

推荐工具：

获取帮助

如果以上方法无法解决你的问题：

查看其他文档
联系支持
- 邮箱：exyone.dev@icloud.com
- 提供详细的错误信息和环境信息
报告问题
- 描述问题症状
- 提供复现步骤
- 附上错误截图

配置指南

Exyone Dev — Sat, 28 Mar 2026 04:28:13 GMT

本指南详细介绍千字网CDN的各种配置选项和参数说明。

基础配置

字体引用

千字网CDN提供两种引用方式：

方式一：单字体引用（推荐）

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

优点：

加载速度快
带宽占用小
精确控制字体

方式二：全字体引用（不推荐）

@import url('https://hanzi.bluu.pl/main.css');

缺点：

加载所有字体，速度慢
带宽占用大
不适合生产环境

域名选择

千字网CDN提供多个域名：

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

推荐：优先使用 hanzi.itedev.com，速度最快。

高级配置

font-display 属性

控制字体加载时的显示行为：

@font-face {
    font-family: '字体族名';
    font-display: swap;
}

参数值：

值	说明	使用场景
`auto`	浏览器默认行为	通用场景
`block`	字体加载前不显示文本	关键标题
`swap`	立即显示后备字体，加载后替换	正文文本（推荐）
`fallback`	短时间显示后备字体，超时后使用默认字体	平衡方案
`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;
}

font-weight 属性

通过CSS控制字体粗细：

/* 常规（默认） */
.normal {
    font-weight: normal;
}

/* 粗体 */
.bold {
    font-weight: bold;
}

/* 数值控制 */
.thin {
    font-weight: 100;
}
.extra-bold {
    font-weight: 900;
}

常用值：

值	说明
`100`	极细
`200`	特细
`300`	细
`400` / `normal`	常规
`500`	中等
`600`	半粗
`700` / `bold`	粗
`800`	特粗
`900`	极粗

font-style 属性

控制字体样式：

/* 常规（默认） */
.normal {
    font-style: normal;
}

/* 斜体 */
.italic {
    font-style: italic;
}

/* 倾斜（模拟斜体） */
.oblique {
    font-style: oblique;
}

性能优化

预加载字体

提升字体加载速度：

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

字体子集优化

千字网CDN已自动进行字体拆包，只包含常用字符。

优化建议：

只引用页面实际使用的字体
避免重复引用相同字体
使用 font-display: swap 提升体验

缓存策略

千字网CDN使用标准的HTTP缓存头：

CSS文件：缓存 1 小时
字体文件：缓存 1 年

建议：

生产环境使用长期缓存
开发环境使用 Cache-Control: no-cache

兼容性配置

浏览器兼容性

千字网CDN使用 WOFF2 格式，支持所有现代浏览器：

浏览器	最低版本	支持情况
Chrome	36+	✅ 完全支持
Firefox	39+	✅ 完全支持
Safari	10+	✅ 完全支持
Edge	14+	✅ 完全支持
IE	所有版本	❌ 不支持

字体回退方案

设置字体回退，确保兼容性：

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

回退顺序：

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

移动端优化

针对移动设备的优化：

/* 移动端使用更小的字体文件 */
@media (max-width: 768px) {
    body {
        font-family: 'Source Han Sans VF', sans-serif;
        font-size: 16px;
    }
}

/* 桌面端使用标准字体 */
@media (min-width: 769px) {
    body {
        font-family: 'Source Han Sans VF', sans-serif;
        font-size: 18px;
    }
}

配置示例

完整配置示例

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

/* 全局设置 */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Source Han Sans VF', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* 标题设置 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Han Sans VF', sans-serif;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-display: block;
}

/* 正文设置 */
p {
    font-family: 'Source Han Sans VF', sans-serif;
    margin-bottom: 1em;
    font-display: swap;
}

/* 代码设置 */
code, pre {
    font-family: 'Source Han Sans VF', monospace;
    background-color: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* 引用设置 */
blockquote {
    font-family: 'Source Han Sans VF', sans-serif;
    border-left: 4px solid #333;
    padding-left: 1em;
    margin: 1em 0;
    color: #666;
}

常见配置问题

字体没有生效？

检查 font-family 名称是否正确
确认字体文件可以访问
查看浏览器控制台是否有错误
清除浏览器缓存重试

加载速度慢？

使用加速域名 https://hanzi.itedev.com
检查网络连接
使用 font-display: swap
考虑预加载字体

兼容性问题？

确认浏览器版本
设置字体回退方案
测试不同浏览器

更多问题请参考故障排查。

下一步

阅读使用教程了解基础用法
查看最佳实践优化配置
遇到问题？参考故障排查

使用教程

Exyone Dev — Sat, 28 Mar 2026 04:26:55 GMT

本教程将指导你如何在项目中使用千字网CDN的中文字体服务。

快速开始

第一步：选择字体

浏览字体列表，找到你想使用的字体。

第二步：引用字体

在CSS中引用字体：

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

第三步：应用字体

设置 font-family 属性：

body {
    font-family: '字体族名';
}

完成！ 字体已经可以使用了。

详细步骤

1. 查找字体

访问 font_mapping.toml 文件，查看所有可用字体。

文件格式如下：

[Source+Han+Sans+VF]
family = "Source Han Sans VF"
description = "思源黑体可变字体"

文件夹名：Source+Han+Sans+VF（用于URL）
族名：Source Han Sans VF（用于CSS）

2. 引用字体文件

在CSS文件中添加引用：

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

可选域名：

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

3. 应用字体

在CSS中设置字体：

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

h1, h2, h3 {
    font-family: 'Source Han Sans VF', sans-serif;
    font-weight: bold;
}

4. 验证效果

在浏览器中打开你的网页，检查字体是否正确加载。

验证方法：

打开浏览器开发者工具（F12）
选择 "Network" 标签
刷新页面
查看是否有字体文件加载成功

配置选项

font-display 属性

控制字体加载时的显示行为：

@import url("https://hanzi.itedev.com/fonts/字体文件夹/result.css");

在 result.css 中已默认设置为 swap，你可以修改：

@font-face {
    font-family: '字体族名';
    font-display: swap; /* 可选值: auto, block, swap, fallback, optional */
}

参数说明：

auto：浏览器默认行为
block：字体加载前不显示文本
swap：立即显示后备字体，字体加载后替换（推荐）
fallback：短时间显示后备字体，超时后使用默认字体
optional：字体加载快则使用，否则使用默认字体

font-weight 属性

通过CSS控制字体粗细：

/* 常规（默认） */
.normal {
    font-weight: normal;
}

/* 粗体 */
.bold {
    font-weight: bold;
}

/* 数值控制 */
.thin {
    font-weight: 100;
}
.extra-bold {
    font-weight: 900;
}

常用值：

值	说明
`100`	极细
`200`	特细
`300`	细
`400` / `normal`	常规
`500`	中等
`600`	半粗
`700` / `bold`	粗
`800`	特粗
`900`	极粗

font-style 属性

控制字体样式：

/* 常规（默认） */
.normal {
    font-style: normal;
}

/* 斜体 */
.italic {
    font-style: italic;
}

/* 倾斜（模拟斜体） */
.oblique {
    font-style: oblique;
}

示例项目

HTML + CSS

index.html：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎使用千字网CDN</h1>
    <p>这是一个使用千字网CDN字体的示例页面。</p>
    <p class="bold">这是粗体文本。</p>
    <p class="italic">这是斜体文本。</p>
</body>
</html>

style.css：

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

body {
    font-family: 'Source Han Sans VF', sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

Vue.js 项目

在 Vue 组件中引入：

<template>
  <div class="container">
    <h1>Vue.js 字体示例</h1>
    <p>使用千字网CDN字体</p>
  </div>
</template>

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

.container {
  font-family: 'Source Han Sans VF', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}
</style>

React 项目

在 React 组件中引入：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <h1>React 字体示例</h1>
      <p>使用千字网CDN字体</p>
    </div>
  );
}

export default App;

App.css：

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

.container {
    font-family: 'Source Han Sans VF', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

进阶用法

预加载字体

提升字体加载速度：

<head>
    <link rel="preload" href="https://hanzi.itedev.com/fonts/字体文件夹/result.css" as="style">
    <link rel="stylesheet" href="style.css">
</head>

多字体组合

使用多个字体：

@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");

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

.serif-text {
    font-family: 'Source Han Serif VF', serif;
}

字体回退方案

设置字体回退：

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

如果主字体加载失败，会依次尝试后续字体。

常见问题

字体没有生效？

检查CSS是否正确引入
检查 font-family 名称是否正确
查看浏览器控制台是否有错误
确认字体URL可以访问

加载速度慢？

使用加速域名 https://hanzi.itedev.com
检查网络连接
考虑使用 font-display: swap

更多问题请参考常见问题。

下一步

阅读配置指南了解更多配置选项
查看最佳实践优化字体使用
遇到问题？参考故障排查

字体理念

Exyone Dev — Fri, 13 Mar 2026 12:55:36 GMT

取大不取小

我们优先收录功能全面、质量上乘的整合字体，而非分散地收录多个单一字体。这一理念的核心在于，通过精心筛选和整合，为用户提供一站式的字体解决方案，避免用户在众多相似字体中反复挑选和测试的繁琐过程。

取简不取繁

只保留基础的标准字体文件，不存放粗体、斜体等变体。

通过CSS的 font-weight: bold 和 font-style: italic 即可获得粗体和斜体效果。

将化大为小

通过字体拆包工具，将几十MB的整合字体按实际使用场景拆分成仅包含特定字符的小文件包。

一个博客页面只有500个常用汉字，传统方式需要下载5MB字体，而拆包后可能只有200KB。

将化简为繁

利用现代CSS技术，让标准字体展现多样的字形变体和特性。

通过 font-variant-ligatures 开启连字功能，通过 font-feature-settings 控制旧式数字、比例宽度等高级特性。

总结

四个理念环环相扣：

取大不取小 - 保证原料的优质与统一
取简不取繁 - 让收录和分发变得轻盈
将化大为小 - 解决大文件的加载瓶颈
将化简为繁 - 让简洁的字体拥有丰富的表现力

如需包含所有粗细、所有变体的完整字体包，推荐使用中文网字计划或 ZSFT字体自由。

建站公告

Exyone Dev — Fri, 13 Mar 2026 12:55:36 GMT

2026年除夕夜，千字网CDN正式上线。

感谢各位朋友的支持，新年快乐。

千字网CDN

常见问题

目录

基础问题

千字网CDN是什么？

如何开始使用？

服务是免费的吗？

字体使用

如何找到字体文件夹名和族名？

如何引用字体？

字体支持粗体/斜体吗？

可以商用吗？

性能优化

访问速度慢怎么办？

需要加载所有字体吗？

如何优化字体加载？

技术问题

字体无法加载怎么办？

支持哪些浏览器？

字体文件大小是多少？

授权与商用

字体授权情况如何？

可以修改字体吗？

如何联系字体作者？

更多帮助

最佳实践

目录

性能优化

1. 精确选择字体

2. 使用加速域名

3. 合理设置 font-display

4. 预加载关键字体

5. 避免重复引用

用户体验

1. 设置合理的字体回退

2. 优化字体大小和行高

3. 响应式字体大小

4. 避免字体闪烁

开发实践

1. 使用CSS变量管理字体

2. 模块化字体引用

3. 条件加载字体

4. 使用字体加载事件

维护建议

1. 定期检查字体更新

2. 监控字体加载性能

3. 备份字体配置

4. 测试字体兼容性

5. 优化字体使用策略

常见错误

1. 过度使用字体

2. 忽视字体回退

3. 不考虑移动端

4. 忽视字体加载状态

总结

相关文档

故障排查

目录

字体加载问题

问题：字体无法加载

问题：字体加载超时

问题：CORS 错误

显示问题

问题：字体显示不正确

问题：字体模糊或锯齿

性能问题

问题：页面加载缓慢

问题：字体闪烁

兼容性问题

问题：IE浏览器不显示字体

问题：移动端显示异常

网络问题

问题：无法访问CDN域名

问题：间歇性连接失败

诊断工具

浏览器开发者工具

在线字体检测工具

获取帮助

配置指南

目录