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并没有使事情无聊,因为它们已经广泛使用,并有很好的可靠性和浏览器兼容性创建。 它并不是告诉你必须使用这些字体,而是在出现问题的情况下,提供一个可信的选择。