建站
咨詢
售后
建站咨詢
新聞中心
在您的wordpress網(wǎng)站上托管和使用字體時(shí)，有很多不同的選擇。您可以在本地托管它們，也可以使用Google字體（現(xiàn)在大多數(shù)主題都集成了Google字體），或使用其他3rd方服務(wù)，如Adob??e Fonts。
今天，我們想深入探討在WordPress中托管本地字體具有優(yōu)勢(shì)的幾個(gè)原因。您不僅可以有更多的HTML字體選擇，而且有時(shí)也有性能優(yōu)勢(shì)。查看我們下面的深入教程，了解如何在本地托管您的高級(jí)字體以及來(lái)自Google字體的任何字體系列。
- 什么是web字體？
- 本地托管字體與第3方字體
- 如何在WordPress服務(wù)器托管Web字體
什么是Web字體？
當(dāng)您瀏覽某人的WordPress網(wǎng)站時(shí)，您會(huì)看到兩種基本字體，Web安全字體或Web字體?；蛘咚麄円部梢曰旌鲜褂脙烧?。
建議閱讀：如何在WordPress中更改字體。
- Web安全字體是預(yù)裝在設(shè)備或操作系統(tǒng)上的字體。Web安全字體的一些示例包括Arial、Times New Roman和Courier New以及通用字體系列，如serif、sans-serif（請(qǐng)參閱現(xiàn)代字體）和等寬字體。這些是您已經(jīng)看到多年的字體。查看Web安全字體的完整列表。
- Web 字體是未預(yù)裝在設(shè)備上的字體，必須由用戶的瀏覽器下載才能顯示。Web 字體的一些示例包括 Google 的 Open Sans 和 Roboto 字體，以及來(lái)自 Adob??e Fonts 的流行的 Proxima Nova 字體。
Google Fonts是一個(gè)開源字體目錄，在過去幾年中得到了廣泛使用。根據(jù)BuiltWith的數(shù)據(jù)，在排名前10,000的網(wǎng)站中，超過45%的網(wǎng)站在其網(wǎng)站上使用Google字體。如果我們查看Google Fonts分析，我們可以看到它們的瀏覽量超過17千萬(wàn)次。這是很多！Open Sans和Roboto是他們使用最廣泛的兩個(gè)字體系列，Roboto 在過去一年中增長(zhǎng)了77%。我們有一篇關(guān)于最佳Google字體的文章，請(qǐng)務(wù)必查看： 15 種最佳Google 字體（按數(shù)字排序）。
谷歌字體統(tǒng)計(jì)
本地托管字體與第3方
在我們深入學(xué)習(xí)本教程之前，重要的是要了解托管本地字體和簡(jiǎn)單地使用3rd方服務(wù)之間的一些優(yōu)缺點(diǎn)。在本地托管字體意味著您實(shí)際上在自己的服務(wù)器上擁有字體文件（和/或復(fù)制到您的CDN，您也將其用于所有其他資產(chǎn)）。而如果您使用第三方（例如Google Fonts或Adob??e Fonts），則只需通過鏈接到外部資產(chǎn)來(lái)包含字體。
本地字體的優(yōu)勢(shì)
1. 更廣泛的字體選擇
使用本地字體的一個(gè)巨大優(yōu)勢(shì)是您可以選擇更廣泛的字體！雖然Google Fonts和Adob??e Fonts等3rd方服務(wù)擁有龐大的庫(kù)，但它們無(wú)法與高級(jí)字體商店相比，您可以在其中購(gòu)買所需的任何高級(jí)網(wǎng)絡(luò)字體并將其托管在您的網(wǎng)站上。我們實(shí)際上將在下面的教程中使用高級(jí)字體，您無(wú)法從任何3rd方服務(wù)中獲得。
2. 可以更好地整合
由于字體選擇范圍更廣，在本地托管它們可能會(huì)讓您選擇一種與您的品牌更好地集成的字體，以保持整個(gè)網(wǎng)站的一致性。這一切都取決于您的設(shè)計(jì)需求和偏好。
3. 不必依賴第三方服務(wù)
當(dāng)您在本地托管字體時(shí)，您不必依賴3rd方服務(wù)或其服務(wù)器。眾所周知，諸如Adob??e Fonts（以前稱為Typekit）之類的服務(wù)會(huì)出現(xiàn)故障，這反過來(lái)又會(huì)讓您看起來(lái)很糟糕。對(duì)WordPress網(wǎng)站的依賴越少越好。
4. 完全控制緩存
通過使用本地字體，您可以完全控制字體文件的緩存。如果您使用Google字體或其他3rd方服務(wù)，您可能會(huì)看到錯(cuò)誤或警告，指出資源缺少緩存驗(yàn)證器或它們需要expires headers。這些是在服務(wù)器級(jí)別修復(fù)的，當(dāng)它們?cè)?rd方服務(wù)器上時(shí)，您無(wú)法控制修復(fù)它們。
指定緩存驗(yàn)證器
5. 更少的請(qǐng)求等于更快的加載時(shí)間
由于必須從第3方下載Web字體，這反過來(lái)可能會(huì)影響您網(wǎng)站的加載速度。您永遠(yuǎn)不知道他們的服務(wù)器在特定時(shí)刻的運(yùn)行速度。但是，您確實(shí)可以通過WordPress主機(jī)對(duì)此進(jìn)行更多控制，或者您應(yīng)該這樣做！例如，Adobe Fonts添加了2個(gè)外部HTTP請(qǐng)求，并且它還對(duì)所有字體格式進(jìn)行了base64編碼。如果您不熟悉字體，則不再需要提供所有字體格式，您只需要WOFF和WOFF2（如果您要進(jìn)行額外壓縮）。
使用Google Fonts，您還有一個(gè)額外的DNS請(qǐng)求來(lái)查找fonts.googleapis.com以獲取CSS文件。然后，您可以向fonts.gstatic.com發(fā)出其他請(qǐng)求以下載字體文件。當(dāng)您在本地托管所有請(qǐng)求時(shí)，所有請(qǐng)求都來(lái)自同一個(gè)域，并且很可能您不需要另一個(gè)CSS文件，因?yàn)樗鼘⒃谀腤ordPress主題的CSS文件中。
Google字體HTTP請(qǐng)求
6. 單個(gè)HTTP/2連接
如果您還沒有了解HTTP/2的優(yōu)勢(shì)，我們強(qiáng)烈建議您這樣做。通過在本地或CDN上托管您的字體，您可以利用單個(gè)HTTP/2連接來(lái)實(shí)現(xiàn)更好的并行性和多路復(fù)用。
本地字體的缺點(diǎn)
現(xiàn)在我們已經(jīng)了解了本地字體的優(yōu)點(diǎn)，但也有一些缺點(diǎn)需要注意。
1. 谷歌字體可能已經(jīng)被緩存
Google Fonts使用自己的CDN，速度很快，畢竟是Google。由于如此多的網(wǎng)站已經(jīng)在使用Google字體，因此用戶很可能已經(jīng)在瀏覽器的緩存中擁有該字體。如果您使用更獨(dú)特、更優(yōu)質(zhì)的字體，它實(shí)際上可能會(huì)增加下載時(shí)間。例如，如果有人訪問使用Google Fonts中的Roboto字體的網(wǎng)站，它將下載到他們的緩存中。如果他們隨后訪問您的網(wǎng)站，該網(wǎng)站也使用Roboto，則無(wú)需再次下載該字體。但是，如果您使用的是新發(fā)布的高級(jí)字體，例如Proxima Soft，則很可能需要下載，這可能會(huì)增加加載時(shí)間。
這里的關(guān)鍵要點(diǎn)是，如果您打算使用一種未廣泛使用的高級(jí)字體，您可能應(yīng)該指望該人的瀏覽器在他們第一次訪問您的網(wǎng)站時(shí)需要下載它。注意：如果您使用流行的Google字體并將其托管在本地，例如Roboto，則這不適用，因?yàn)闉g覽器足夠智能，可以在緩存中檢測(cè)到它（無(wú)論是從Google加載還是從您的站點(diǎn)本地加載）。
2. 更復(fù)雜
我們意識(shí)到并不是每個(gè)人都是WordPress大師。托管本地字體肯定需要更多的設(shè)置。例如，WordPress主題可能會(huì)在其主題中自動(dòng)調(diào)用Google字體，如果您在本地托管字體，則需要找到一種方法來(lái)禁止在您的站點(diǎn)上調(diào)用它們。這可能需要與您的主題開發(fā)人員聯(lián)系以獲得快速的代碼行。這聽起來(lái)可能很復(fù)雜，但我們將嘗試在下面的教程中盡可能簡(jiǎn)單地解釋它。
3. 更謹(jǐn)慎的字體選擇
當(dāng)您托管本地字體時(shí)，您必須選擇要支持的字體類型。如果您只選擇較新的格式，例如WOFF2，您可能會(huì)忽略較舊的瀏覽器，而這些瀏覽器將默認(rèn)使用舊的網(wǎng)絡(luò)安全字體。例如，根據(jù)CanIUse的說法，IE11、Safari和某些版本的Android瀏覽器可能會(huì)在僅使用WOFF2網(wǎng)絡(luò)字體時(shí)出現(xiàn)問題。因此，您可能希望使用WOFF+WOFF 2以確保全面安全。WOFF 2提供了更高的壓縮方法，這就是您想要同時(shí)使用兩者的原因。
WOFF2瀏覽器支持
使用 3rd 方服務(wù)時(shí)，幾乎不可能把它搞砸，因?yàn)樗鼈兛紤]了開箱即用的廣泛瀏覽器支持。因此，在本地托管時(shí)，您必須更加小心您的字體類型選擇。
4. 不要沒有CDN
如今，許多站點(diǎn)都在使用Cloudflare或KeyCDN等CDN來(lái)加速其資產(chǎn)的交付。這很重要，因?yàn)樗梢匀鏈p少延遲和DNS查找時(shí)間。如果您使用本地字體，而不使用CDN，實(shí)際上，與使用Google Fonts或Adob??e Fonts等服務(wù)相比，您的網(wǎng)站速度可能會(huì)變慢。原因是所有這些服務(wù)都使用CDN來(lái)提供它們的字體。所以我們強(qiáng)烈建議，除非您只有一個(gè)小地理區(qū)域的流量，否則如果您托管自己的字體，請(qǐng)始終使用CDN。當(dāng)然，請(qǐng)確保您使用的是支持HTTP/2的CDN提供商。
如何在WordPress中托管本地字體
現(xiàn)在是時(shí)候進(jìn)行有趣的部分了！在WordPress中托管您的本地字體。我們?cè)谙旅孢M(jìn)行了兩種不同的選擇，一種是使用我們購(gòu)買的高級(jí)字體，第二種實(shí)際上是使用 Google 字體并將其托管在本地。在本教程中，我們使用全新的WordPress安裝并安裝了2017主題。
- 如何在本地托管高級(jí)字體
- 如何在本地托管Google字體
1. 如何在本地托管高級(jí)字體
為了在本地托管高級(jí)字體，我們選擇使用Fontspring和2017年1月發(fā)布的新Proxima Soft字體。由Mark Simonson創(chuàng)建的Proxima Nova Soft是原始Proxima Nova字體的更新版本。我們選擇Fontspring是因?yàn)樗鼈儾恍枰魏?rd方跟蹤腳本，而且該字體是一次性購(gòu)買的，可以在無(wú)限數(shù)量的網(wǎng)站上使用。購(gòu)買字體時(shí)要非常小心，因?yàn)槠渲泻芏嘈枰?rd方跟蹤腳本，這在某種程度上違背了在本地托管它們的目的。
Fontspring
我們購(gòu)買了Proxima Soft Regular和Proxima Soft Bold字體。通常，對(duì)于大多數(shù)網(wǎng)站來(lái)說，常規(guī)字體類型和粗體就足夠了。根據(jù)您的站點(diǎn)，您可能還需要斜體和半粗體。
步驟1
購(gòu)買字體后，您將收到一封電子郵件，其中包含字體文件的鏈接。
Proxima Soft字體下載
步驟2
每個(gè)字體版本，例如粗體和正則都有自己的字體類型，例如WOFF2、WOFF、TTF等。在這個(gè)例子中，我們將只使用粗體和粗體正則的WOFF和WOFF2版本，這確保全面的現(xiàn)代瀏覽器支持。
本地字體文件
步驟3
我們獲取字體文件并通過FTP將它們上傳到我們的WordPress站點(diǎn)到我們創(chuàng)建的名為“fonts”的文件夾中。在此示例中，我們將CDN用于我們的所有資產(chǎn)，以及來(lái)自KeyCDN團(tuán)隊(duì)的免費(fèi)CDN Enabler插件。這個(gè)插件會(huì)自動(dòng)復(fù)制我們剛剛上傳到CDN的字體。即使我們說在本地托管它們，CDN仍在引用您的本地資產(chǎn)。重要的部分是您從同一位置提供所有資產(chǎn)，而不是引用多個(gè)域（主機(jī)）。
將字體上傳到網(wǎng)絡(luò)服務(wù)器
步驟4
您需要在WordPress網(wǎng)站上的CSS中引用新字體?，F(xiàn)在很多主題都有自定義CSS面板，或者您可以使用像Simple Custom CSS and JS這樣的免費(fèi)插件。我們將插入以下代碼，引用我們的CDN URL。
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
您還需要更新樣式以指向新的字體系列。這是我們?cè)?017主題中使用的代碼示例。
body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}
這是來(lái)自Simple Custom CSS and JS插件的屏幕截圖。
自定義字體CSS代碼
步驟5
如果您的WordPress主題已經(jīng)集成了Google字體，您需要確保禁用它們。否則，您可能會(huì)同時(shí)加載本地字體和Google字體。由于我們?cè)诒窘坛讨惺褂昧?017主題，因此我們使用免費(fèi)的Disable Google Fonts插件。這僅適用于WordPress中的默認(rèn)主題。對(duì)于大多數(shù)主題，您可能需要聯(lián)系開發(fā)人員，他們可以快速提供禁用 Google字體的功能?；蛘邫z查他們的文檔，通常這是一個(gè)非常快速的調(diào)整。某些主題甚至可以選擇在后端打開或關(guān)閉它們。
就是這樣！這是我們的新Proxima Soft字體加載的屏幕截圖，用于我們的正文字體和2017主題的標(biāo)題。
wordpress網(wǎng)站上的新字體
這是我們的HTTP請(qǐng)求的屏幕截圖。如您所見，我們只有2個(gè)對(duì)WOFF2字體的請(qǐng)求，而不是我們之前顯示的Google的4個(gè)請(qǐng)求。我們?cè)诰W(wǎng)站上也有WOFF字體，但由于Chrome支持WOFF2，所以改為拉取這些字體。例如，如果我們使用IE 11訪問該站點(diǎn)，則會(huì)加載WOFF字體。
本地托管字體的HTTP請(qǐng)求
2. 如何在本地托管Google字體
在本地托管字體的第二種方法是實(shí)際使用您在Google Fonts上已經(jīng)喜歡的字體，然后將其移動(dòng)到您的服務(wù)器或CDN。眾所周知，Open Sans非常輕巧且速度超快。所以我們將在我們的例子中使用它。
步驟1
獲取Google字體的最佳方法是使用免費(fèi)的google-webfonts-helper工具，我們將在本教程中使用該工具。您可能還想查看Font Face Observer項(xiàng)目。您需要做的第一件事是搜索您想要的Google字體，然后選擇樣式。我們?cè)俅芜x擇常規(guī)和粗體 (700) 字體樣式。
下載Open Sans網(wǎng)絡(luò)字體
步驟2
然后你需要選擇你想要的瀏覽器支持。現(xiàn)代瀏覽器會(huì)給你WOFF和WOFF2字體，這正是我們想要的。最好的支持為您提供WOFF、WOFF2、EOT、TTF和SVG。如您所見，它為您提供了可以復(fù)制到剪貼板的代碼，以及包含字體的下載zip。
現(xiàn)代瀏覽器中字體的CSS
其余的說明與我們上面的高級(jí)字體示例非常相似。
步驟3
我們獲取字體文件并通過FTP將它們上傳到我們的WordPress站點(diǎn)到我們創(chuàng)建的名為“fonts”的文件夾中。在此示例中，我們將CDN用于我們的所有資產(chǎn)，以及來(lái)自KeyCDN團(tuán)隊(duì)的免費(fèi)CDN Enabler插件。這個(gè)插件會(huì)自動(dòng)復(fù)制我們剛剛上傳到CDN的字體。即使我們說在本地托管它們，CDN仍在引用您的本地資源。重要的部分是您從同一位置提供所有資源，而不是引用多個(gè)域（主機(jī)）。
將Google字體上傳到網(wǎng)絡(luò)服務(wù)器
步驟4
您需要在WordPress網(wǎng)站上的CSS中引用新字體?，F(xiàn)在很多主題都有自定義CSS面板，或者您可以使用像Simple Custom CSS and JS這樣的免費(fèi)插件。我們將插入以下代碼，引用我們的CDN URL。
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
您還需要更新樣式以指向新的字體系列。這是我們?cè)?017主題中使用的代碼示例。
body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}
這是來(lái)自Simple Custom CSS and JS插件的屏幕截圖。
本地托管的Open Sans字體的CSS
步驟5
如果您的WordPress主題已經(jīng)集成了Google字體，您需要確保禁用它們。這似乎有點(diǎn)諷刺，因?yàn)槲覀兪褂玫氖荊oogle字體。但您需要這樣做的原因是禁用外部請(qǐng)求。由于我們?cè)诒窘坛讨惺褂昧?017主題，因此我們使用免費(fèi)的Disable Google Fonts插件。這僅適用于WordPress中的默認(rèn)主題。對(duì)于大多數(shù)主題，您可能需要聯(lián)系開發(fā)人員，他們可以快速提供禁用 Google 字體的功能?；蛘邫z查他們的文檔，通常這是一個(gè)非?？焖俚恼{(diào)整。某些主題甚至可以選擇在后端打開或關(guān)閉它們。
就是這樣！這是我們?yōu)?017主題的正文字體和標(biāo)題加載的新Google Open Sans字體的屏幕截圖。
本地托管的Open Sans字體示例
這是我們請(qǐng)求的屏幕截圖。如您所見，我們只有2個(gè)對(duì)WOFF2字體的請(qǐng)求，而不是我們之前顯示的Google的4個(gè)請(qǐng)求。我們?cè)诰W(wǎng)站上也有WOFF字體，但由 Chrome支持WOFF2，所以改為拉取這些字體。例如，如果我們使用IE 11訪問該站點(diǎn)，則會(huì)加載WOFF字體。
打開Sans HTTP請(qǐng)求
小結(jié)
就是這樣！您現(xiàn)在知道如何從高級(jí)字體商店托管本地字體或?qū)oogle字體移動(dòng)到您自己的服務(wù)器和/或CDN。所以現(xiàn)在你可以去看看那里所有漂亮的字體，而不必?fù)?dān)心它們?nèi)绾斡绊懶阅?。他們可能只是為您的WordPress網(wǎng)站改頭換面（請(qǐng)務(wù)必閱讀我們關(guān)于WordPress字體的深入指南）！另一個(gè)很好的選擇是系統(tǒng)字體。
網(wǎng)頁(yè)題目：在WordPress網(wǎng)站服務(wù)器托管Web字體的深入指南
本文URL：http://m.5511xx.com/article/djcoiid.html
