网络安全字体

Sankgao约 2143 字大约 7 分钟

Web 安全字体

下面列出了适用于 HTML 和 CSS 的最佳 Web 安全字体：

Arial（sans-serif）
Verdana（sans-serif）
Helvetica（sans-serif）
Tahoma（sans-serif）
Trebuchet MS（sans-serif）
Times New Roman（serif）
Georgia（serif）
Garamond（serif）
Courier New（monospace）
Brush Script MT（cursive）

提示

发布网站之前，请您始终检查字体在不同浏览器和设备上的显示效果，并始终使用后备字体

Arial（sans-serif）

Arial 是在线和印刷媒体上使用最广泛的字体。Arial 也是 Google Docs 中的默认字体。

Arial 是最安全的网络字体之一，并且在所有主要操作系统上都可用。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: Arial, sans-serif;
}

Verdana（sans-serif）

Verdana 是一种非常流行的字体。甚至 Verdana 的小字体也很容易阅读。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: Verdana, sans-serif;
}

Helvetica（sans-serif）

Helvetica 字体广受设计师喜爱。它适合多种商业类型。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: Helvetica, sans-serif;
}

Tahoma（sans-serif）

Tahoma 字体的字符间距较小。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: Tahoma, sans-serif;
}

Trebuchet MS（sans-serif）

Trebuchet MS 由 Microsoft 于 1996 年设计。请谨慎使用此字体。并非所有移动操作系统都支持。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: "Trebuchet MS", sans-serif;
}

Times New Roman（serif）

Times New Roman 是世界上最知名的字体之一。它看起来很专业，并在许多报纸和新闻网站中使用。它也是 Windows 设备和应用程序的主要字体。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: "Times New Roman", serif;
}

Georgia（serif）

Georgia 是一种优雅的衬线字体。它在不同的字体大小下都有很强的可读性，因此非常适合用于移动响应式设计。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: Georgia, serif;
}

Garamond（serif）

Garamond 是用于许多印刷书籍的经典字体。它拥有经典的外观和良好的可读性。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: Garamond, serif;
}

Courier New（monospace）

Courier New 是使用最广泛的等宽衬线字体。Courier New 通常用于代码的显示，许多电子邮件提供商将其用作默认字体。Courier New 还是电影剧本的标准字体。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: 'Courier New', monospace;
}

Brush Script MT（cursive）

Brush Script MT 字体旨在模仿笔迹。它优雅精致，但可能很难阅读。请小心使用。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

h1,
p {
  font-family: "Brush Script MT", cursive;
}

提示

可以查看 Google 字体open in new window 及使用方法

常用的后备字体

以下是按 5 个通用字体系列组织的一些常用字体后备：

衬线字体（Serif）：在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感
无衬线字体（Sans-serif）：字体线条简洁（没有小笔画）。它们营造出现代而简约的外观
等宽字体（Monospace）：这里所有字母都有相同的固定宽度。它们创造出机械式的外观
草书字体（Cursive）：模仿了人类的笔迹
幻想字体（Fantasy）：是装饰性俏皮的字体

Serif 字体

Times New Roman 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>衬线字体（Serif）</p>

h1,
p {
  font-family: "Times New Roman", Times, serif;
}

Georgia 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>衬线字体（Serif）</p>

h1,
p {
  font-family: Georgia, serif;
}

Garamond 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>衬线字体（Serif）</p>

h1,
p {
  font-family: Garamond, serif;
}

Sans-Serif 字体

Arial 和 Helvetica 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>无衬线字体（Sans-serif）</p>

h1,
p {
  font-family: Arial, Helvetica, sans-serif;
}

Tahoma 和 Verdana 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>无衬线字体（Sans-serif）</p>

h1,
p {
  font-family: Tahoma, Verdana, sans-serif;
}

Trebuchet MS 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>无衬线字体（Sans-serif）</p>

h1,
p {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

Georgia 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>无衬线字体（Sans-serif）</p>

h1,
p {
  font-family: Georgia, Verdana, sans-serif;
}

Monospace 字体

Courier New 和 Courier 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>等宽字体（Monospace）</p>

h1,
p {
  font-family: "Courier New", Courier, monospace;
}

Lucida Console 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>等宽字体（Monospace）</p>

h1,
p {
  font-family: "Lucida Console", monospace;
}

Monaco 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>等宽字体（Monospace）</p>

h1,
p {
  font-family: Monaco, monospace;
}

Cursive 字体

Brush Script MT 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>草书字体（Cursive）</p>

h1,
p {
  font-family: "Brush Script MT", cursive;
}

Lucida Handwriting 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>草书字体（Cursive）</p>

h1,
p {
  font-family: "Lucida Handwriting", cursive;
}

Fantasy 字体

Copperplate 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>幻想字体（Fantasy）</p>

h1,
p {
  font-family: Copperplate, fantasy;
}

Papyrus 字体名称。例如：

演示

<h1>Welcome to Shanghai!</h1>

<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>

<p>0 1 2 3 4 5 6 7 8 9</p>

<p>幻想字体（Fantasy）</p>

h1,
p {
  font-family: Papyrus, fantasy;
}

网络安全字体

# Web 安全字体

# Arial（sans-serif）

# Verdana（sans-serif）

# Helvetica（sans-serif）

# Tahoma（sans-serif）

# Trebuchet MS（sans-serif）

# Times New Roman（serif）

# Georgia（serif）

# Garamond（serif）

# Courier New（monospace）

# Brush Script MT（cursive）

# 常用的后备字体

# Serif 字体

# Sans-Serif 字体

# Monospace 字体

# Cursive 字体

# Fantasy 字体