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並沒有使事情無聊，因為它們已經廣泛使用，並有很好的可靠性和瀏覽器兼容性創建。它並不是告訴你必須使用這些字體，而是在出現問題的情況下，提供一個可信的選擇。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/185451.html

Web Safe Fonts

一、常用Web Safe Fonts字體

二、字體降級

三、為什麼要使用Web Safe Fonts？

四、如何增加字體資料庫？

結論

相關推薦

發表回復