Web Safe Fonts是建立在互联网上的文本的前台字体。在网络普及初期，用户的电脑上并没有安装很多字体，大部分只有默认字体 。于是Web Safe Fonts这个概念应运而生。
一、常用Web Safe Fonts字体
这是一些常见的Web Safe Fonts字体：
font-family: Arial, Helvetica, sans-serif; font-family: "Arial Black", Gadget, sans-serif; font-family: "Bookman Old Style", serif; font-family: "Comic Sans MS", cursive, sans-serif; font-family: Courier, monospace; font-family: "Courier New", Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: "Lucida Console", Monaco, monospace; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-family: "MS Sans Serif", Geneva, sans-serif; font-family: "MS Serif", "New York", sans-serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Wingdings, "Zapf Dingbats", sans-serif;
这些字体大部分都是类似于Arial、Times New Roman等传统字体，因为它们流行并且在Windows和Macintosh上都有，因此可以保证在大多数电脑上都能正确渲染。对于一个网站来说，如果使用某些神怪的字体，用户电脑上没有安装，那么它用的除了这些备选字体就只能是默认字体了。
二、字体降级
字体降级是一种技术，意味着在网站设计中使用Web Safe Fonts as primary。
所以，一份CSS样式代码可能是这样的：
p {
font-family: "MS Serif", "New York", serif;
font-size: 18px;
color: #333333;
}
让我们考虑<body>中使用其他字体的可能性：
body {
font-family: Trebuchet MS, sans-serif;
font-size: 16px;
color: #555555;
line-height: 1.5;
}
在这个例子中，我们正在为主要字体选择Web Safe Fonts，即Trebuchet MS, sans-serif，也就是说，如果用户的计算机上没有安装Trebuchet MS，那么它为备选字体选择了一个“sans-serif”字体，例如Arial，Helvetica，等等。
三、为什么要使用Web Safe Fonts？
在过去，每种计算机上都有不同的字体，这就意味着一个站点在不同的计算机上看起来可能是完全不同的。一个站点使用的前台字体可能在其他计算机上看起来完全不同。 苹果电脑拥有不同的字体和Windows电脑不同，Linux似乎也有自己的一套字体。
Web Safe Fonts避免了这一问题，因为这些字体完全相同，无论哪种计算机或操作系统。 因此，您可以放心使用这些字体，而不必担心他们的渲染效果受到影响。
四、如何增加字体资料库？
您可能希望添加更多的字体到您的资料库中，以此提高站点的视觉吸引力，而又不会影响加载速度。 从Google Web Fonts中选择字体，这是一种绝好的选择。 它为您提供免费字体，可以通过与您的CSS创建链接来集成使用。
接下来是一个示例代码：
<head>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Lato', sans-serif;
}
</style>
</head>
在本例中，我们可以使用Lato字体类型，因为它很适合网站使用，而且相当流行，而且这些字体完全免费。
结论
Web Safe Fonts是其名字所暗示的东西。但是，Web Safe Fonts并没有使事情无聊，因为它们已经广泛使用，并有很好的可靠性和浏览器兼容性创建。 它并不是告诉你必须使用这些字体，而是在出现问题的情况下，提供一个可信的选择。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/185451.html
微信扫一扫 
支付宝扫一扫 