CSS 网络安全字体


目录

    显示目录


什么是网络安全字体?

网络安全字体是在所有浏览器和设备上普遍安装的字体。


后备字体

然而,不存在 100% 完全网络安全的字体。总有一个 可能未找到字体或未正确安装字体。

因此,始终使用后备字体非常重要。

这意味着您应该在中添加类似的“备份字体”列表 字体系列 财产。如果 第一个字体不起作用,浏览器将尝试下一个,然后下一个,依此类推。 始终以通用字体系列名称结束列表。

例子

这里有三种字体类型:Tahoma、Verdana 和 无衬线字体。第二个和第三个字体是备份,以防找不到第一个字体。

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>

<h1>CSS Fallback Fonts</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>



HTML 和 CSS 的最佳网络安全字体

以下列表是 HTML 和 CSS 的最佳网络安全字体:

  • Arial (sans-serif)
  • Verdana (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(无衬线)

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

Arial 是最安全的网络字体之一,可在所有主要操作系统上使用。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Arial, sans-serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



Verdana(无衬线)

Verdana 是一种非常流行的字体。即使字体很小,Verdana 也很容易阅读。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Verdana, sans-serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



Tahoma(无衬线)

Tahoma 字体的字符之间的间距较小。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



Trebuchet MS(无衬线)

Trebuchet MS是微软于1996年设计的。请谨慎使用此字体。不是 所有移动操作系统均支持。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



Times New Roman(衬线体)

Times New Roman 是世界上最知名的字体之一。它看起来 专业,被许多报纸和“新闻”网站使用。这也是 Windows 设备和应用程序的主要字体。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



格鲁吉亚(衬线体)

Georgia 是一种优雅的衬线字体。它在不同的字体大小下都具有良好的可读性,因此它是移动响应式设计的良好候选者。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Georgia, serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



加拉蒙德(衬线体)

Garamond 是一种用于许多印刷书籍的经典字体。它有一个永恒的 外观和良好的可读性。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Garamond, serif;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



新快递(等宽)

Courier New 是使用最广泛的等宽衬线字体。 Courier New 通常与编码显示一起使用,并且许多电子邮件提供商 使用它作为默认字体。 Courier New也是电影的标准字体 剧本。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: 'Courier New', monospace;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>



毛笔MT(草书)

Brush Script MT 字体旨在模仿手写体。 它优雅而复杂,但可能难以阅读。请小心使用。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>


提示:另请查看所有可用的 Google 字体以及如何使用它们。