如果有一件事對您網站的品牌和外觀最重要，它可能只是字型。精心選擇的字型可以傳達個性，使長篇文字更清晰，並在人們的腦海中鞏固您的品牌。
但是您不能只是下載任何舊字型並在您的網站上使用它。首先需要考慮很多事情。
您在哪裡可以找到網路字型，哪些字型與HTML相容，哪些字型是“Web安全的”並且可以在任何網站上使用？我們將在本文中探討它們。
HTML字型：什麼是Web字型？
字型有著悠久的歷史，但正如我們今天所知，字型隨著計算機和網際網路的興起而得到廣泛使用。數字字型需要特殊處理才能在螢幕上呈現。當不同的螢幕尺寸和裝置發揮作用時，事情只會變得更加複雜。
Google Fonts是一組流行的網路字型
談到數字字型，有幾種不同的型別。某些字型主要用於印刷和圖形設計。這些往往很大，不適合網站，但非常適合建立圖形。大多數機器上也有“Web安全”字型。
但是對於網頁設計，您需要尋找的是網頁字型，專門設計用於在網頁和各種裝置上完美呈現的字型。您還可以在電子郵件或其他線上服務中使用網路字型。
有一些事情使網路字型與標準的可下載桌面字型不同。一方面，它們通常不能與您計算機上的程式一起使用；它們必須上傳到伺服器並在網路上使用。
它們還被設計為在不同的螢幕和不同的尺寸上都清晰易讀。它們可以使用CSS設定樣式（例如應用粗體或斜體、顏色和其他屬性）並支援其他條件，例如從右到左呈現。
雖然 Web 字型不會安裝在您或您的訪問者的裝置上，但有一些特殊的方式來顯示它們，以便訪問您網站的任何人都可以看到它們。
您可以像平常一樣下載這些字型並將它們上傳到您的伺服器，或者使用特殊的網路字型託管服務將它們嵌入您的網站而無需下載。
你可以在HTML中使用哪些字型？
有些字型不打算在網路上使用，但哪些可以插入到您的HTML站點中？
本質上，您可以在您的網站上使用任何可下載的字型。您需要做的就是上傳並正確配置它，它應該會顯示在您的網站上。
Scribble字型不適用於網頁
但是，雖然您可以在技術上使用網站上的任何字型，但這並不總是最好的主意。您應該專門尋找 Web 字型，而不是旨在用於印刷或圖形設計的字型。某些字型是如此風格化或用於如此大的文字大小，以至於它們無法在您的網站上正確呈現。使用網路字型，這不是問題。
在您的網站上使用桌面字型（或使用網路字型進行印刷設計）時，還需要擔心許可問題。在與您購買字型不同的媒體中使用字型會給您帶來麻煩。在購買之前，請務必仔細閱讀字型的許可證。
您還可以尋找某些允許您使用HTML中的簡單呼叫通過免費或付費計劃在您自己的網站上呈現其字型的主機。
無論哪種方式，只要您使用的字型正確上傳並具有正確的檔案型別：
- TTF
- OTF
- WOFF/WOFF2
- SVG
- EOT
有了這些字型檔案型別，您就可以在整個站點中使用它們，並使用HTML和CSS對其進行樣式設定。
還有一些網路安全字型通常可以在所有瀏覽器和程式中通用。
什麼是Web安全字型？
大多數網路字型的一個問題是無法保證它們會在您的網站上正確顯示。與平面設計不同，您只需在程式中建立影象並列印出來進行分發，瀏覽器必須在每次開啟頁面時呈現Web字型。如果您的字型無法載入，您最終可能會得到一個空白、損壞的網站。
出於這個原因，一些網站所有者選擇僅依賴網路安全字型。它們預裝在大多數系統上，因此可以保證在除最晦澀的裝置之外的所有裝置上都能正確顯示。它們的載入速度也往往比Web字型快得多，後者顯示起來可能很慢。
Arial是一種常見的Web安全字型
如果您所擔心的只是最大限度地提高效能並確保您的網站正確顯示字型，那麼網路安全字型適合您。
這是一個通常可以使用的Web安全字型列表。
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
還有數十種Web安全字型，但這些是各種裝置中最普遍的字型。
在所有這些中，Arial、Times New Roman、Helvetica和Courier New是最安全的。儘管被認為是網路安全的，但其他一些不能在某些作業系統上執行。
問題是，除非您執行的是政府網站或簡單的資訊網站之類的網站，否則通過避免使用大多數字體來犧牲您的品牌是不值得的。網路安全字型清晰易讀，但它們也過於通用和過度使用。
最好選擇一組更好、更獨特的字型在您的網站上使用，特別是因為有一個解決 Web 字型無法載入的問題的方法：後備字型。
關於字型堆疊的註釋
字型堆疊，也稱為後備字型，是使用粗體和創意網路字型的唯一原因。
無論您做什麼或採取什麼預防措施，總會有人無法載入您的字型。也許他們禁用了Javascript，因此您的託管字型無法正確呈現，或者程式碼中出現問題並阻止您上傳的字型顯示。或者某種字型可能與某人的裝置不相容。
多虧了後備字型，如果出現問題，很容易載入網路安全字型。這是通過選擇使用者根據字型系列安裝的字型來工作的：
- 襯線字型由附加到字母線末端的小筆劃定義。這些字型被認為是優雅和易讀的。
- 無襯線字型的設計與襯線字型類似，但缺少筆畫。它們更簡單，更易讀。
- 等寬字型在每個字母之間均勻分佈，使它們具有獨特的外觀。
- 草書字型（或指令碼字型）描繪了正式的手寫字母。它們不太清晰，更適合標題或圖形設計。
- 夢幻字型（或裝飾字型）高度程式化，像草書字型，不適合作為正文。
請記住，字型堆疊確實是一個“堆疊”；完全有可能按順序擁有多個後備字型。只要確保在堆疊的末尾始終有一個網路安全字型，如果主要字型失敗，您仍然有機會使用類似的字型來宣傳您的品牌。
如何使用HTML新增字型
如果您想向您的網站新增Web字型，您有幾個選擇。
對於WordPress使用者，將字型新增到您的網站的最簡單方法是使用外掛。兩個最受歡迎的字型是Easy Google Fonts和Use Any Font。前者簡化了將Google字型新增到您的網站的過程，而UAF允許您直接將字型上傳到您的網站。
如果您不使用WordPress，或者不想依賴外掛，則該過程將需要一些手動修改。
首先，您可以使用託管在其他地方的字型，例如Google Fonts。此處的說明取決於您選擇的服務。使用谷歌字型，你需要在你的<head>中嵌入你想要使用的字型，然後在你想要使用它的時候呼叫它。
您還可以在您的網站上本地託管您Internet下載的字型。這可能更可取，因為您不需要依賴第三方服務。
幸運的是，只要你有一個正確配置的網路字型，這很容易做到。只需將檔案上傳到您的伺服器，然後使用樣式表中的@font-face規則來定義它。例如：
@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}
然後，您可以使用font-family標記在HTML文件中的任何位置呼叫您的字型。
使用HTML和CSS設計字型
一旦您的字型安全地上傳到您的網站，您現在就可以使用HTML和CSS對其進行樣式設定。即使您的程式設計技能很少，設計字型也很容易。您可以更改文字顏色、背景顏色、大小、樣式或粗細。
注意：如果您使用過舊的HTML版本，您可能會記住
<font>標籤。這不再受支援，不應使用。相反，您可以使用CSS或HTML樣式元素來設定文字樣式。
首先，您可以使用顏色程式碼更改字型。您可以使用“紅色”等顏色名稱、RGB程式碼或HEX值。這是使用color屬性設定的，如下所示：
p {
color: blue;
}
或者在單個HTML樣式元素中：
<p style="color:blue;">Text.</p>
背景顏色相同，但使用背景顏色屬性。
p {
background-color: blue;
}
接下來是字型大小。這可以是畫素、百分比或em（這有利於設計響應式網站）。
p {
font-size: 16px;
}
或者：
<p style="font-size:200%;">Text.</p><br />
使用CSS設定字型大小
最後是字型樣式和粗細，或斜體和粗體。對於傾斜的文字，請使用“italic”標籤。
.italic {
font-style: italic;
}
And for bold:
.bold {
font-weight: bold;
}
使用CSS設定字型樣式。
您也可以改用HTML標籤。對於斜體，您可以使用：
<em>對於表達重點的文字，或使用：
<i> 對於旨在在視覺上不同的文字。
對於粗體，請使用：
<b>或者<strong>
例如：
<b>Bold Text</b>
或者
<strong>I'm of special importance.</strong>從哪裡獲得HTML字型？
無論您是要使用第三方字型主機還是下載它們，您都需要知道查詢字型的最佳位置在哪裡。那裡有數百個分銷商，但眾所周知，少數分銷商是獲取字型的可靠來源。這裡有一些：
- Google Fonts是獲取字型的最佳場所之一。為什麼？您可以輕鬆地將它們嵌入您的網站而無需下載任何內容，其選擇範圍廣泛且美觀，最重要的是，它是完全免費的。Google伺服器總是很快，因此您可以相信它們會以儘可能少的延遲交付字型。
谷歌字型
- Adobe Fonts通過任何Creative Cloud訂閱提供數千種字型。對於其他服務（至少不依賴於像Google Fonts這樣的開源字型），您通常需要擔心許可問題。這些字型可用於任何個人或商業專案。
- Fonts.com有多種可供桌面和網路使用的字型。他們為您提供在您的網站上獲取所需的程式碼。問題是有幾個不同的許可證，這可能有點令人困惑。付款基於一次性費用或現收現付模式。
- TypeNetwork為具有各種許可選項的嚴肅專案提供高質量字型。為桌面、Web、應用程式或ePub購買字型。Web字型還帶有一個額外的選項：託管或自託管。
- 在Google Fonts出現之前，Font Squirrel是一個可以在任何專案中找到免費的、商業許可的字型的地方。它有很多選擇，但遺憾的是沒有字型託管選項。您需要下載字型並將它們手動上傳到您的網站。並非所有字型都針對網路進行了優化，但您可以嘗試使用Webfont Generator。
Top 10值得推薦的HTML字型
有數以千計的網路字型，但從哪裡開始呢？這裡有十種簡單的HTML字型，它們在任何網站上看起來都很棒。這些都是網路安全的，因此它們應該適用於幾乎所有裝置。他們還製作了很棒的後備字型。
1. Arial
Arial字型的示例。
Arial是所有字型中最著名的。它不是最漂亮的，但它在各種情況下都很簡單和有用。
2. Times New Roman
Times New Roman也是一種非常常見的字型。如果您正在執行更正式的網站，則最好。這種襯線字型並不是特別令人興奮，但也不會讓人分心。
3. Palatino
Palantino字型的一個例子。
Palatino可能看起來很熟悉，因為它經常用於書籍印刷。現在它是一種優雅的數字字型，預設包含在許多裝置上。
4. Verdana
Verdana以非常易於閱讀而著稱，並且即使在大尺寸下仍然看起來很棒。這個 sans serif 是一個很好的 Arial 替代品。
5.Courier New
Courier New字型的示例。
讓人想起舊的打字機文字，Courier New是一個偉大的等寬設計，適用於想要老式但清晰的外觀的網站。
6. Calibri
Calibri字型的示例。
Calibri是一種簡單、可愛的無襯線字型，是Microsoft Office等程式的標準配置。但是，它是一種專有字型，因此通常僅在Windows作業系統上受支援。
7. Georgia
Georgia字型的示例。
這種圓形襯線字型的靈感來自類似的網路安全字型Garamond。如果您需要一種不像Times New Roman那樣嚴肅的正式字型，這是一個不錯的選擇。
8. Garamond
Garamond字型的示例。
與Palatino非常相似，Garamond是一種經常用於書籍印刷的經典字型。儘管針對現代作業系統進行了更新，但它看起來仍然相當老式。
9. Didot
Didot字型的示例。
這種襯線字型的最小字母間距賦予它獨特的外觀和感覺。您可以在大多數Apple裝置上找到它。
10.Tahoma
Tahoma字型的示例。
這種乾淨的字型已成為舊版Windows作業系統的預設字型。其更大膽的外觀使其脫穎而出而不會分散注意力。
小結
重要的是選擇在您的網站上看起來不錯、可讀性強且能將您的品牌個性化的網路字型。您可以在各種網站上安裝免費字型或付費下載獲得許可的字型，我們提供了一些好的字型示例。
您不必堅持使用幾十年來在網際網路上看到的無聊的網路安全字型。多虧了後備字型，您可以使用任何您喜歡的排版，並設定一個後備字型，以便在未載入時使用。
無論您是在您的網站、電子郵件還是徽標中使用這些HTML字型，請確保您進行大量測試，以便您的網站保持可讀性，並且排版與您的其他設計完美融合。
評論留言