Solejay's Blog
Back to Docs

字体使用指南

博客字体系统配置指南，使用仓耳今楷04-W04字体支持中英文混排

概述#

本博客已集成仓耳今楷04-W04字体，提供优秀的中英文显示效果。字体系统采用统一字体策略，确保中英文混排时有最佳的视觉一致性。

字体配置#

字体文件#

  • 仓耳今楷04-W04 (CangErJinKai): 中英文通用字体，优雅的楷体风格
  • 等宽字体: 代码显示专用字体

字体特性#

  • 仓耳今楷04-W04：优雅的楷体风格，支持中英文混排
  • 字体来源：仓耳字库 ↗
  • 支持字体回退，确保在不同系统下都有良好显示
  • 使用 WOFF2 格式，优化加载性能

使用方法#

1. CSS 类方式#

通用字体（中英文混排）#

.text-content {
  font-family: 'CangErJinKai', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
css

代码字体#

.code-text {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
}
css

2. UnoCSS 类方式#

字体族类#

<!-- 使用仓耳今楷字体（中英文混排） -->
<div class="font-wenkai">这是中文内容 This is English content</div>

<!-- 使用等宽字体 -->
<div class="font-mono">console.log('Hello World');</div>
html

组合使用#

<!-- 中英文混合内容 -->
<article class="font-wenkai">
  <h1>文章标题 Article Title</h1>
  <p>这是中文段落内容。This is an English paragraph.</p>
  <pre class="font-mono"><code>const message = "Hello 世界";</code></pre>
</article>
html

3. 组件中使用#

Astro 组件#

---
// 在组件中定义字体样式
const fontClass = 'font-wenkai'
---

<div class={fontClass}>
  <h2>组件标题 Component Title</h2>
  <p>组件内容使用仓耳今楷字体显示，支持中英文混排。</p>
</div>
astro

代码块字体#

---
// 代码块使用等宽字体
---

<div class="font-wenkai">
  <p>正文使用仓耳今楷字体</p>
  <pre class="font-mono"><code>// 代码使用等宽字体
const greeting = "Hello 世界";
console.log(greeting);</code></pre>
</div>
astro

性能优化#

1. 字体预加载#

字体已在 BaseHead.astro 中配置预加载：

<link rel='preload' href='/fonts/cang-er-jin-kai.woff2' as='font' type='font/woff2' crossorigin />
html

2. 字体回退策略#

使用 font-display: swap 确保字体加载过程中有良好的用户体验：

@font-face {
  font-family: 'CangErJinKai';
  src: url('/fonts/cang-er-jin-kai.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
css

3. 字体格式优化#

  • 使用 WOFF2 格式，相比 TTF 格式有更好的压缩率
  • 支持可变字重（300-900），单一文件支持多种字重
  • 文件大小约 8.6MB，包含完整的中英文字符集

最佳实践#

1. 字体选择原则#

  • 中英文混排内容: 使用 font-wenkai 类（默认字体）
  • 代码内容: 使用 font-mono 类
  • 统一体验: 仓耳今楷字体支持中英文，无需切换字体

2. 响应式字体#

/* 在不同屏幕尺寸下调整字体大小 */
.text-content {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .text-content {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .text-content {
    font-size: 1.25rem;
  }
}
css

3. 字体权重#

/* 标题使用较重的字重 */
h1, h2, h3 {
  font-weight: 600;
}

/* 正文使用正常字重 */
p, div {
  font-weight: 400;
}
css

故障排除#

1. 字体不显示#

  • 检查字体文件 cang-er-jin-kai.woff2 是否正确放置在 public/fonts/ 目录
  • 确认 CSS 中的字体路径是否正确
  • 检查浏览器开发者工具中的网络请求
  • 确认字体文件格式为 WOFF2

2. 字体加载缓慢#

  • 确认字体预加载配置是否正确（在 BaseHead.astro 中）
  • 检查网络连接和服务器响应时间
  • 考虑使用 CDN 加速字体加载
  • 确认使用了 font-display: swap 策略

3. 字体回退问题#

  • 确认字体回退链配置正确（PingFang SC → Hiragino Sans GB → Microsoft YaHei）
  • 测试在不同系统环境下的显示效果
  • 检查字体文件的兼容性

扩展和自定义#

1. 添加新字体#

  1. 将字体文件（推荐 WOFF2 格式）放入 public/fonts/ 目录
  2. 在 src/assets/styles/app.css 中添加 @font-face 声明
  3. 在 uno.config.ts 中添加字体族配置
  4. 在 BaseHead.astro 中添加字体预加载配置
  5. 更新字体回退策略

2. 字体子集化#

使用工具如 fonttools 创建字体子集以减少文件大小：

# 安装 fonttools
pip install fonttools brotli

# 创建字体子集（仅包含使用的字符）
pyftsubset cang-er-jin-kai.woff2 \
  --text-file=chars.txt \
  --output-file=cang-er-jin-kai-subset.woff2 \
  --flavor=woff2
bash

3. 配置示例#

完整的字体配置示例（src/assets/styles/app.css）：

@font-face {
  font-family: 'CangErJinKai';
  src: url('/fonts/cang-er-jin-kai.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

html, body {
  font-family: 'CangErJinKai', 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
css

参考资源#