常用的字体

制作中文网站时常用的字体

在中文网站设计中，选择合适的字体至关重要，不仅影响美观性，还关系到可读性、兼容性和性能。以下是常见的中文网页字体及其特点：

1. 通用系统字体（默认字体族）

常见的系统字体在不同操作系统下表现不同，建议使用 字体族（font-family）+ 兜底字体，确保跨平台兼容。

1body {
2  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "SimSun", sans-serif;
3}

现在更推荐如下写法：

1body {
2  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
3}

理由：

• Microsoft YaHei UI 是 Windows 10+ 的优化版本
• Noto Sans CJK SC 作为 Android/Linux 更现代的兜底方案

推荐做法：

• Windows 优先 Microsoft YaHei（微软雅黑），因为 SimSun（宋体）显示较细，阅读体验不好。
• macOS/iOS 用 PingFang SC（苹方），视觉上更现代。
• Android 设备自动使用系统内置字体（如 Noto Sans CJK）。

2. 推荐的常用中文字体

2.1 无衬线字体（San-serif）——现代简洁风格

适合科技、互联网、金融、简约设计风格的网站。

示例：

1body {
2  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans", sans-serif;
3}

2.2 衬线字体（Serif）——正式稳重风格

适合新闻、博客、教育、政府、文学类网站。

示例：

1body {
2  font-family: "Source Han Serif", "SimSun", "FangSong", serif;
3}

3. Web 字体（在线加载字体）

如果希望使用更个性化的字体，可以引入 Web 字体，例如：

3.1 Google Fonts + 思源字体

1@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
2body {
3  font-family: 'Noto Sans SC', sans-serif;
4}

🔹 优点：跨平台支持，适合多语言网站。
🔹 缺点：需要联网，加载速度受限于 CDN。

优化

1<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
2<style>
3body {
4  font-family: 'Noto Sans SC', sans-serif;
5}
6</style>

理由：

• 使用 标签比 @import 加载性能更好
• 明确指定 display=swap 避免重复声明

3.2 阿里巴巴普惠体（商用免费）

阿里巴巴普惠体下载地址

1@font-face {
2  font-family: 'AlibabaPuHuiTi';
3  src: url('AlibabaPuHuiTi-Regular.woff2') format('woff2');
4}
5
6body {
7  font-family: 'AlibabaPuHuiTi', sans-serif;
8}

4. 字体优化技巧

4.1 设置字体兜底方案

确保字体族中包含多个字体，以防某些字体不可用。

1body {
2  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans", "Arial", sans-serif;
3}

4.2 font-display 解决 FOUT/FOIT

避免网页加载字体时出现闪烁。

1@font-face {
2  font-family: 'AlibabaPuHuiTi';
3  src: url('AlibabaPuHuiTi-Regular.woff2') format('woff2');
4  font-display: swap;
5}

🔹 swap 让文本先用系统字体显示，字体加载完毕后再切换。

4.3 预加载 Web 字体

提高字体加载速度。

1<link rel="preload" href="AlibabaPuHuiTi-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

4.4 使用 clamp() 让字体自适应

1p {
2  font-size: clamp(14px, 2vw, 18px);
3}

保证字体在不同屏幕尺寸下保持合适大小。

5. 总结

最佳实践：

1. 优先使用系统默认字体，确保渲染速度快。
2. 使用 Web 字体时提供兜底方案，避免字体缺失。
3. 针对不同设备选择合适字体（PingFang SC、Microsoft YaHei）。
4. 使用 font-display: swap 避免字体加载问题。
5. 响应式设计 时可用 clamp()、vw 适配字体大小。

制作英文网站时常用的字体

在英文网站设计中，选择合适的字体至关重要，它不仅影响页面的美观度，还直接关系到可读性、品牌形象和跨设备兼容性。接下来介绍英文网站常用的字体类别、推荐字体以及优化技巧。

1. 英文字体的主要类别

1.1 无衬线字体（Sans-serif）

✅ 特点：简洁、现代、易读，适合科技、互联网、金融、简约风格的网站。
✅ 适用场景：正文、按钮、导航栏、现代设计

常见无衬线字体：

示例代码：

1body {
2  font-family: 'Roboto', 'Arial', sans-serif;
3  /* 或者 增加 system-ui 通用系统字体声明，遵循现代 CSS 字体栈最佳实践 */
4  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
5}

1.2 衬线字体（Serif）

✅ 特点：传统、正式、优雅，适合新闻、博客、学术、文学、政府类网站。
✅ 适用场景：新闻文章、学术类内容、品牌网站

常见衬线字体：

示例代码：

1body {
2  font-family: 'Georgia', serif;
3}

1.3 代码等宽字体（Monospace）

✅ 特点：等宽字符，适合代码、编程网站、技术博客
✅ 适用场景：代码片段、终端模拟器、开发者文档

常见等宽字体：

示例代码：

1code {
2  font-family: 'Fira Code', 'Courier New', monospace;
3}

优化：
‘Courier New’ 替换为 ‘Menlo’, ‘Consolas’, ‘Roboto Mono’

• Menlo 是 macOS 更现代的系统等宽字体
• Roboto Mono 提供更好的跨平台一致性

1.4 现代几何字体（Geometric Sans-serif）

✅ 特点：极简、几何风格，适合品牌网站、时尚、科技公司
✅ 适用场景：Logo、标题、品牌视觉

常见几何风格字体：

示例代码：

1h1 {
2  font-family: 'Montserrat', sans-serif;
3}

2. Web 字体（Google Fonts & Adobe Fonts）

2.1 Google Fonts（免费 Web 字体）

可以直接使用 Google Fonts 提供的免费 Web 字体，例如 Roboto、Lato、Open Sans 等。

1@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
2
3body {
4  font-family: 'Open Sans', sans-serif;
5}

🔹 优点：免费、易用、适合网页加载
🔹 缺点：需要网络连接，加载速度取决于 CDN

2.2 Adobe Fonts（付费 Web 字体）

适用于专业品牌设计，例如 Proxima Nova、Futura PT、Avenir。

1body {
2  font-family: "Proxima Nova", sans-serif;
3}

🔹 优点：高级设计感，适合高端品牌
🔹 缺点：需付费，需 Adobe 订阅

3. 响应式字体设置技巧

3.1 设置备用字体

确保不同设备和操作系统都能有合适的字体。

1body {
2  font-family: "Roboto", "Arial", sans-serif;
3}
4/* 视口单位与行高关联 */
5p {
6  font-size: clamp(1rem, 0.875rem + 0.25vw, 1.125rem);
7  line-height: clamp(1.5, 1.4 + 0.2vw, 1.6);
8}

• 同步优化行高的响应式表现
• 使用无单位行高值实现动态计算

3.2 font-display 优化字体加载

1@font-face {
2  font-family: 'Open Sans';
3  src: url('OpenSans.woff2') format('woff2');
4  font-display: swap;
5}

🔹 swap 让浏览器在字体未加载时先显示系统字体，避免闪烁（FOUT）。

3.3 clamp() 设置响应式字体大小

1h1 {
2  font-size: clamp(24px, 5vw, 48px);
3}

🔹 保证字体大小在不同屏幕下都适合阅读。

4. 总结

最佳实践

✅ 默认使用无衬线字体 (Roboto, Open Sans)，保证可读性
✅ 正文用 serif 或 sans-serif，代码用 monospace
✅ 使用 Web 字体时提供备用方案（Arial, Georgia 等）
✅ 优化字体加载（font-display: swap + 预加载）
✅ 响应式设计 时用 clamp() 或 vw 动态调整字体

优化字体加载

因为国内访问 https://fonts.googleapis.com/ 访问速度慢，所以可以替换为 https://fonts.loli.net/

国内CDN加速方案