目录

CSS 网页安全字体


什么是网页安全字体?

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


备选字体

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

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

这意味着您应该在font-family属性。如果第一种字体不起作用,浏览器将尝试下一种,然后再尝试下一种,依此类推。始终以通用字体系列名称结束列表。

示例

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

p {
font-family: Tahoma, Verdana, sans-serif;
}
亲自试一试 »

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

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

  • Arial(无衬线)
  • Verdana(无衬线)
  • Tahoma(无衬线)
  • Trebuchet MS(无衬线)
  • Times New Roman(衬线体)
  • 格鲁吉亚(衬线体)
  • 加拉蒙德(衬线体)
  • 新快递(等宽)
  • 毛笔MT(草书)

笔记:在发布网站之前,请务必检查您的字体在不同浏览器和设备上的显示方式,并始终使用备选字体



Arial(无衬线)

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

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

Verdana(无衬线)

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

Tahoma(无衬线)

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

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

亲自试一试 »

Times New Roman(衬线体)

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

格鲁吉亚(衬线体)

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

加拉蒙德(衬线体)

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

新快递(等宽)

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

亲自试一试 »

毛笔MT(草书)

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

示例

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

亲自试一试 »

提示:还要检查所有可用的谷歌字体以及如何使用它们。