网络安全字体是在所有浏览器和设备上普遍安装的字体。
然而,不存在 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 的最佳网络安全字体:
注意:在发布网站之前,请务必检查您的网站 字体出现在不同的浏览器和设备上,并且始终使用 后备字体!
Arial 是在线和印刷媒体使用最广泛的字体。宋体 也是 Google Docs 中的默认字体。
Arial 是最安全的网络字体之一,可在所有主要操作系统上使用。
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 也很容易阅读。
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 字体的字符之间的间距较小。
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是微软于1996年设计的。请谨慎使用此字体。不是 所有移动操作系统均支持。
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 是世界上最知名的字体之一。它看起来 专业,被许多报纸和“新闻”网站使用。这也是 Windows 设备和应用程序的主要字体。
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.
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.
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.
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>
Brush Script MT 字体旨在模仿手写体。 它优雅而复杂,但可能难以阅读。请小心使用。
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 字体以及如何使用它们。