HTML 字体

一. 通用字体家族

1.1 Serif（衬线字体）

常用示例：Times New Roman、Georgia、Garamond、Palatino Linotype、Book Antiqua

示例效果

这是一段使用 Times New Roman 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Georgia 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Garamond 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Palatino Linotype 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Book Antiqua 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'Times New Roman';">
  这是一段使用 Times New Roman 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Georgia;">
  这是一段使用 Georgia 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Garamond;">
  这是一段使用 Garamond 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Palatino Linotype';">
  这是一段使用 Palatino Linotype 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Book Antiqua';">
  这是一段使用 Book Antiqua 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

1.2 Sans-serif（无衬线字体）

常用示例：Arial、Helvetica、Verdana、Trebuchet MS、Tahoma、Segoe UI

示例效果

这是一段使用 Arial 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Helvetica 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Verdana 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Trebuchet MS 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Tahoma 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Segoe UI 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: Arial;">
  这是一段使用 Arial 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Helvetica;">
  这是一段使用 Helvetica 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Verdana;">
  这是一段使用 Verdana 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Trebuchet MS';">
  这是一段使用 Trebuchet MS 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Tahoma;">
  这是一段使用 Tahoma 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Segoe UI';">
  这是一段使用 Segoe UI 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

1.3 Monospace（等宽字体）

常用示例：Courier New、Consolas、Lucida Console、Monaco、Source Code Pro

示例效果

这是一段使用 Courier New 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Consolas 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Lucida Console 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Monaco 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Source Code Pro 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'Courier New';">
  这是一段使用 Courier New 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Consolas;">
  这是一段使用 Consolas 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Lucida Console';">
  这是一段使用 Lucida Console 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Monaco;">
  这是一段使用 Monaco 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Source Code Pro';">
  这是一段使用 Source Code Pro 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

1.4 Cursive（手写体）

常用示例：Comic Sans MS、Brush Script MT、Lucida Handwriting

示例效果

这是一段使用 Comic Sans MS 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Brush Script MT 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Lucida Handwriting 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'Comic Sans MS';">
  这是一段使用 Comic Sans MS 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Brush Script MT';">
  这是一段使用 Brush Script MT 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: 'Lucida Handwriting';">
  这是一段使用 Lucida Handwriting 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

1.5 Fantasy（装饰字体）

常用示例：Impact、Papyrus、Jokerman

示例效果

这是一段使用 Impact 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Papyrus 的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Jokerman 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: Impact;">
  这是一段使用 Impact 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Papyrus;">
  这是一段使用 Papyrus 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Jokerman;">
  这是一段使用 Jokerman 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

二. 常见中文字体（含中英文混排）

2.1 Windows 系统常用中文字体

常见字体：

  • 微软雅黑（Microsoft YaHei）
  • 黑体（SimHei）
  • 宋体（SimSun）
  • 楷体（Kaiti）

示例效果（Windows）

这是一段使用 Windows 常用中文字体（微软雅黑）的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Windows 常用中文字体（黑体）的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Windows 常用中文字体（宋体）的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 Windows 常用中文字体（楷体）的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'Microsoft YaHei'">
  这是一段使用 Windows 常用中文字体（微软雅黑）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: SimHei">
  这是一段使用 Windows 常用中文字体（黑体）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: SimSun">
  这是一段使用 Windows 常用中文字体（宋体）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: Kaiti; border:1px solid #ccc; padding:10px; margin-bottom:10px;">
  这是一段使用 Windows 常用中文字体（楷体）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

2.2 macOS 系统常用中文字体

常见字体：

  • 华文细黑（STXihei）
  • 华文楷体（STKaiti）
  • 华文宋体（STSong）

示例效果（Mac）

这是一段使用 macOS 常用中文字体（华文细黑）的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 macOS 常用中文字体（华文楷体）的示例文本。 The quick brown fox jumps over the lazy dog.
这是一段使用 macOS 常用中文字体（华文宋体）的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: STXihei">
  这是一段使用 macOS 常用中文字体（华文细黑）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: STKaiti">
  这是一段使用 macOS 常用中文字体（华文楷体）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>
<div style="font-family: STSong">
  这是一段使用 macOS 常用中文字体（华文宋体）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

三. 支持中英文的 Web 字体（单一字体覆盖中英文）

利用 Web 字体服务加载同时支持中文与英文字符的字体，从而在中英文混合时保持统一风格。

3.1 Noto Sans SC（可选：Google Noto，覆盖简体中文与拉丁字母 — 需导入）

说明：字形中性、适合界面与正文混排；在多平台上保持一致性时常用（但默认需通过 Google Fonts 等服务导入）。

示例效果（Web 字体）

这是一段使用 Web 字体 Noto Sans SC 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'Noto Sans SC';">
  这是一段使用 Web 字体 Noto Sans SC 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

3.2 DengXian（等线 — Windows 10/11 原生，界面感强）

说明：等线风格更偏 UI/标题，笔画垂直感好，适合现代界面语言。系统/原生字体（无需导入）。

示例效果（系统/原生）

这是一段使用 DengXian（等线）的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'DengXian';">
  这是一段使用 DengXian（等线）的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

3.3 Hiragino Sans GB（ヒラギノ — macOS / 一些设备上预装，字形精致）

说明：字形细腻、适合大段文本与界面，苹果生态常见。系统/原生字体（无需导入）。

示例效果（系统/原生）

这是一段使用 Hiragino Sans GB 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'Hiragino Sans GB';">
  这是一段使用 Hiragino Sans GB 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

3.4 WenQuanYi Micro Hei（文泉驿微米黑 — 部分 Linux 发行版常见，开源）

说明：Linux 环境常见的开源中文无衬线，适用于需要覆盖开源/服务器环境的场景。系统/原生（或常见预装）。

示例效果（系统/原生）

这是一段使用 WenQuanYi Micro Hei 的示例文本。 The quick brown fox jumps over the lazy dog.

示例代码

<div style="font-family: 'WenQuanYi Micro Hei', sans-serif;">
  这是一段使用 WenQuanYi Micro Hei 的示例文本。 The quick brown fox jumps over the lazy dog.
</div>

四. 更多 Web 字体推荐（英文主／中英文混排）

说明：下面每个小节都同时引入 Google Fonts（用 @import），并在示例 div 中仅在 font-family 写一个字体名（如果该字体能覆盖中英文就写该字体；否则只写英文字体名）。你可以把每一段复制到支持 HTML 渲染的 Markdown 编辑器或网页中查看真实效果。

4.1 Open Sans（Google Fonts）

无衬线，阅读友好，适合正文与 UI 文案。

示例效果（引入并展示）

Open Sans — 标题示例

这是一段使用 Open Sans 的正文示例。The quick brown fox jumps over the lazy dog.

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');</style>
<div style="font-family: 'Open Sans'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:700;">Open Sans — 标题示例</h3>
  <p>这是一段使用 Open Sans 的正文示例。 The quick brown fox jumps over the lazy dog.</p>
</div>

4.2 Lato（Google Fonts）

线条圆润、现代感强，适合产品页与段落。

示例效果（引入并展示）

Lato — 页面片段

这段文本使用 Lato，字符形态友好，适合正文和按钮文本。

设计建议：正文 16px 行高 1.6，标题使用 700 字重。

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');</style>
<div style="font-family: 'Lato'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:700;">Lato — 页面片段</h3>
  <p>这段文本使用 Lato，适合正文与 UI 文案。</p>
</div>

4.3 Montserrat（Google Fonts）

几何感强，非常适合标题、品牌与展示用语。

示例效果（引入并展示）

Montserrat — 大标题示例

Montserrat 线条硬朗，适合醒目且简洁的品牌展示。The quick brown fox jumps over the lazy dog.

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');</style>
<div style="font-family: 'Montserrat'; border:1px solid #ccc; padding:12px;">
  <h2 style="font-weight:800;">Montserrat — 标题示例</h2>
  <p>这是一段 Montserrat 的示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>

4.4 Roboto（Google Fonts）

Google 推广广泛的现代无衬线，手机与 Android 系统常见。

示例效果（引入并展示）

Roboto — UI 示例

Roboto 在屏幕阅读上优化良好，字重与间距可控，适合移动端与 Web 界面。

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');</style>
<div style="font-family: 'Roboto'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:500;">Roboto — UI 示例</h3>
  <p>Roboto 示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>

4.5 Noto Sans SC（Google Fonts — 支持中文）

Noto 系列专注多语言覆盖，Noto Sans SC 可同时渲染简体中文与拉丁字母，适合中英文混排页面想要一致风格时使用。

示例效果（引入并展示）

Noto Sans SC — 中英统一示例

这是一段使用 Noto Sans SC 的示例文本，中文与英文风格一致，适合国际化站点与文档。

示例：中文—这是中文示例；英文—The quick brown fox jumps over the lazy dog.

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');</style>
<div style="font-family: 'Noto Sans SC'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:700;">Noto Sans SC — 中英统一示例</h3>
  <p>这是一段 Noto Sans SC 的示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>

4.6 Noto Serif SC（Google Fonts — 支持中文）

衬线版 Noto，适合希望中英文都有衬线风格的场景（文章、长文档排版）。

示例效果（引入并展示）

Noto Serif SC — 文章示例

Noto Serif SC 适合长篇文章与正式场景，中文与英文的衬线样式一致。

示例：中文—这是中文示例；英文—The quick brown fox jumps over the lazy dog.

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;700&display=swap');</style>
<div style="font-family: 'Noto Serif SC'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:700;">Noto Serif SC — 文章示例</h3>
  <p>这是一段 Noto Serif SC 的示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>

4.7 Poppins（Google Fonts）

圆润几何风，适合标题与现代 UI。

示例效果（引入并展示）

Poppins — 品牌/标题示例

Poppins 字形圆润，字重层次明显，适合页面标题与短句展示。

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');</style>
<div style="font-family: 'Poppins'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:700;">Poppins — 标题示例</h3>
  <p>这是一段 Poppins 的示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>

4.8 Playfair Display（Google Fonts — 衬线）

高对比度衬线，适合标题、海报与优雅排版。

示例效果（引入并展示）

Playfair Display — 优雅标题

高对比衬线，适合用于视觉冲击较强的标题与展示文本。

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&display=swap');</style>
<div style="font-family: 'Playfair Display'; border:1px solid #ccc; padding:12px;">
  <h1 style="font-weight:700;">Playfair Display — 标题示例</h1>
  <p>这是一段 Playfair Display 的示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>

4.9 Source Code Pro（Google Fonts — 等宽）

专为代码阅读设计的等宽字体，适合展示与程序相关的文本。

示例效果（引入并展示）

Source Code Pro — 代码示例 
function hello() {
  console.log("Hello, world!");
}

等宽排列便于对齐与阅读。

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap');</style>
<div style="font-family: 'Source Code Pro'; border:1px solid #ccc; padding:12px;">
  <strong>Source Code Pro — 代码示例</strong>
  <pre>console.log("Hello, world!");</pre>
</div>

4.10 Merriweather（Google Fonts — 衬线）

适合文章正文，具有较好印刷感和可读性。

示例效果（引入并展示）

Merriweather 在长文本阅读中表现良好，适合博客与文章排版。

示例代码

<style>@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');</style>
<div style="font-family: 'Merriweather'; border:1px solid #ccc; padding:12px;">
  <h3 style="font-weight:700;">Merriweather — 正文示例</h3>
  <p>这是一段 Merriweather 的示例文本。The quick brown fox jumps over the lazy dog.</p>
</div>