一、Web安全字體

在HTML中，Web安全字體是一組常見的字體，被Web內容創(chuàng)作者廣泛使用，以增加他們的內容在實際中以所選字體來顯示的可能性。這些字體通常是由操作系統(tǒng)預先安裝的，因此可以在各種計算機系統(tǒng)中使用。當網(wǎng)站訪問者沒有指定字體時，瀏覽器將嘗試根據(jù)作者指定的保護字體列表選擇替代字體。這樣可以確保在不同的設備和瀏覽器上，網(wǎng)站的文本都能按照設計者的意圖正確顯示。

通用字體（在本例中為 Tahoma）稱為 Web 安全字體。Web 安全字體是大多數(shù)計算機操作系統(tǒng)和瀏覽器支持的字體，因此可以在 Web 上安全使用?？梢栽谧煮w堆棧中使用相當多的 Web 安全字體，并且高度確信網(wǎng)站訪問者使用想要的字體查看你的網(wǎng)站不會有任何問題：

• Web 安全襯線字體：Times New Roman、Georgia、Palatino、Lucida Bright；
• Web 安全無襯線字體：Arial、Tahoma、Trebuchet MS、Verdana；
• Web 安全等寬字體：Courier、Courier New、Lucida Sans Typewriter；
• Web 安全專用字體：Copperplate、Papyrus、Arial Black、Arial Narrow。

這些是在所有操作系統(tǒng)中具有最廣泛支持的 Web 安全字體。

二、測試字體堆棧

即使按相同的值調整大小，不同字體的呈現(xiàn)方式仍會使它們看起來大小明顯不同。以Times New Roman和Lucida Bright為例。這些 Web 安全字體通常用作襯線樣式 Web 字體的后備選項。但是，如果我們并排比較它們，我們可以看到一些顯著差異。

示例代碼：

<style> .timestext { font-family: "Times New Roman", Times, serif; font-size: 1em; } .lucidatext { font-family: "Lucida Bright", Lucida, serif; font-size: 1em; } </style> <p class="timestext">This sentence is written in Times New Roman.</p> <p class="lucidatext">This sentence is written in Lucida Bright.</p>

上面的代碼定義了兩個 HTML 段落元素。首先，我們應用了一個 CSS 規(guī)則，使其以 1em 大小的 Times New Roman 字體顯示。第二句話將以 1em 大小的 Lucida Bright 字體顯示。

.timestext { font-family： “Times New Roman”， Times， serif; font-size： 1em; } .lucidatext { font-family： “Lucida Bright”， Lucida， serif; font-size： 1em; }
第一句話是用Times New Roman寫的。
第二句話是用Lucida Bright寫的。

如果打開文字處理應用程序并以兩種不同的字體顯示相同的句子，將看到相同的行為，但即使大小相同，不同的字體顯示也大不相同。雖然網(wǎng)站內容在 Lucida Bright 中可能看起來很棒，但如果使用 Times New Roman 作為后備，如果系統(tǒng)不支持 Lucida Bright，文本最終可能會變得太小，使訪問者無法舒適地閱讀。下面介紹如何測試字體堆棧，以確?；赝俗煮w選項呈現(xiàn)良好：

• 注釋掉字體堆棧中除一種字體之外的所有字體，并在字體堆棧中只有一種字體處于活動狀態(tài)的情況下查看網(wǎng)站；
• 重復該過程，直到使用每種回退字體查看了網(wǎng)站；
• 如果任何字體產生可讀性問題，請將其從堆棧中刪除；
• 確保在每個字體堆棧中至少保留三到四種呈現(xiàn)良好的字體，以便在字體堆棧中提供足夠的瀏覽器和操作系統(tǒng)覆蓋率。

三、使用Web字體

一旦探索到可用的大量Web字體，可能不希望僅限于使用一些Web安全字體。Web字體并不是預裝在用戶設備上的，而是與網(wǎng)站的其他內容一起傳送給訪問者。盡管它們可能會對網(wǎng)站加載速度產生一定影響，但隨著寬帶互聯(lián)網(wǎng)連接的普及，這種延遲的影響已降至最低，并且大多數(shù)現(xiàn)代網(wǎng)站都使用Web字體。

在使用Web字體時，最好將它們嵌入到字體堆棧中。字體堆棧確定了在無法加載首選字體時要使用的后備字體。例如，在示例的字體堆棧中，我們首先列出了Open Sans Web字體，這意味著它會首先嘗試加載Open Sans字體，如果無法加載，則會回退到下一個字體。

有兩種常見的方法可以將Web字體添加到網(wǎng)站中：

1、@font-face規(guī)則

通過使用CSS的@font-face規(guī)則，可以將自定義字體文件鏈接到網(wǎng)頁。這樣，瀏覽器會下載并顯示這些字體。例如，可以在CSS中添加以下代碼來定義字體：

@font-face {
font-family: 'Open Sans';
src: url('opensans.woff2') format('woff2'),
url('opensans.woff') format('woff');
}

在上面的示例中，我們定義了一個名為Open Sans的字體，并提供了它的WOFF2和WOFF格式的文件鏈接。

2、Web字體服務

另一種方法是使用Web字體服務，如Google Fonts或Typekit。這些服務提供了大量的Web字體供選擇，并且它們會自動處理字體文件的傳遞和瀏覽器兼容性問題。只需將提供的代碼片段添加到網(wǎng)站中即可。例如，對于Google Fonts，可以在HTML文件的頭部添加以下代碼：

<link rel="stylesheet"  rel="external nofollow" >

上述代碼將從Google Fonts服務加載Open Sans字體，并將其應用于網(wǎng)頁。

四、自托管字體

自托管 Web 字體與網(wǎng)站文件一起托管。當訪問者訪問網(wǎng)站時，字體文件將與構成網(wǎng)站的其余文件一起從服務器發(fā)送到訪問者的瀏覽器。

CSS at-rule 用于加載網(wǎng)站服務器上存在的 Web 字體。我們之前提到的網(wǎng)絡字體 Open-Sans 可以從 Font Squirrel 免費下載。要使用 Open Sans 作為自托管字體，我們首先會下載所有可用格式的字體，并將它們上傳到與我們的 CSS 文件相同的目錄中。加載自托管字體的規(guī)則如下所示：

/*The following rule is a modified version of the rule included with the download of Open Sans from Font Squirrel. Do not copy and paste this rule. Download the font from a font service and use the code provided with the font.*/ @font-face{ font-family: 'Open Sans'; src: url('OpenSans-Regular-webfont.eot'); src: url('OpenSans-Regular-webfont.eot?iefix') format('embedded-opentype'), url('OpenSans-Regular-webfont.woff') format('woff'), url('OpenSans-Regular-webfont.ttf') format('truetype'), url('OpenSans-Regular-webfont.svg#open_sans') format('svg'); }

現(xiàn)在我們可以將 Open Sans 添加到 CSS 樣式表中的任何字體堆棧中，選定的 HTML 元素將顯示在 Open Sans 中。Font Squirrel 只是眾多地方之一，可以在其中找到免費和高級可下載字體以用作自托管字體。另外兩個值得一看的字體市場包括 Creative Market 和 Font Spring。

五、CDN托管字體

至少有三種服務在面向公眾的內容分發(fā)網(wǎng)絡 （CDN） 上托管字體。要使用這些字體，需要將一些代碼添加到 HTML 文檔中，瀏覽器會從 CDN 下載文件。

使用此模型的三個最知名的服務包括：head

• 谷歌字體：這項完全免費的服務可能是最常見的網(wǎng)絡字體交付方式。它非常易于使用，包括 700 多種字體系列；
• Typekit：Typekit 被認為是字體的主要來源。它與大多數(shù)網(wǎng)頁設計師使用的 Adobe Creative Suite 捆綁在一起，并包括一千多種高質量字體系列。對 Typekit 的完全訪問權限需要 Adobe Creative Suite 許可證或付費 Typekit 帳戶。但是，可以免費使用有限數(shù)量的字體；
• Adobe Edge Web Fonts：Adobe 提供的這項免費服務包括大約 500 個免費字體系列。將此服務視為 Typekit 的顯著縮減版本。

使用托管字體服務還有一個額外的好處，即不必擔心代碼語法是否完美，也不必考慮為每個用戶包含正確的字體文件格式。字體服務會處理所有這些問題。只需將字體服務中的一兩行代碼直接復制并粘貼到 HTML 文檔中，然后使用 CSS 屬性將字體應用于網(wǎng)站的不同元素。例如，Open Sans 可從上述所有三種字體服務獲得。下面是用于使用所有這些源將此字體添加到網(wǎng)頁的代碼。

<head> <!--Google Fonts are added using the link element--> <link  rel='stylesheet' type='text/css'> <!--Edge Fonts code uses a JavaScript file to deliver the font--> <script src="http://use.edgefonts.net/open-sans.js"></script> <!--Typekit Fonts are a bit more complicated to use--> <script src="https://use.typekit.net/font_kit.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> </head>

六、圖標字體

過去，使用圖標字體有點復雜，需要圖標字體文件是自托管的。由于 MaxCDN 和 Bootstrap 贊助的 CDN 托管，任何人都可以將 Font Awesome 圖標添加到他們的網(wǎng)站，而無需將字體文件托管在自己的服務器上，就像采取以下兩個步驟一樣簡單：

• 使用 link head 將單個元素添加到 HTML 文檔中；
• 使用圖標名稱將圖標添加到 HTML 元素。

下面是這兩個步驟的運行示例。

<head> <!--This link is available at Font Awesome's "Get Started" page--> <link rel="stylesheet"  rel="external nofollow" > </head> <body> <p><i class="fa fa-lightbulb-o"></i> Using the i element produces the cleanest code.</p> <p><span class="fa fa-check-square-o"></span> Using the span element is more semantically correct.</p> </body>

圖標字體之所以比圖像圖標字體更好用，是因為它們可以使用用于設置字體樣式的所有相同 CSS 屬性進行樣式設置。例如，如果我們想增加圖標大小，添加圓形背景顏色，更改圖標顏色，并在圖標周圍添加一些額外的填充，我們可以使用一些相當簡單的 CSS 來實現(xiàn)。

.fa { padding: 15px; color: white; background-color: gray; border-radius: 50%; font-size: 1.5em; }

現(xiàn)在，當我們呈現(xiàn)同一段落時，我們可以看到我們的規(guī)則已經生效。

.fa-example { padding： 15px; color： white; background-color： gray; border-radius： 50%; font-size： 1.5em; } 使用 i 元素生成最干凈的代碼