您的位置:

Web Safe Fonts

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