如何在WordPress中使用Web字體

最近，每個人似乎都在談論龍蝦。不是海洋的甲殼類動物，而是網絡字體。對於那些尚未聽說過的人，龍蝦是一個流行的Google字體的一個很好的例子，該字體嵌入了網頁中。

嵌入字體並不像您想像的那麼新。早在1998年，CSS 2引入了 @font-face規則。從理論上講，這使設計人員能夠將任何truetype或postscript字體下載到用戶計算機中以在網頁中顯示。不幸的是，當時，只有Internet Explorer 4支持該規則。人們普遍擔心許可昂貴的字體會被盜用。如今，CSS 3仍然無濟於事，但所有網絡瀏覽器都支持該規則。從那時起，屏幕分辨率也得到了巨大改進。因此，如果您還沒有接受字體嵌入，那麼現在是時候這樣做了。

>

鑰匙要點

>擁抱WordPress中Web字體的使用以增強視覺吸引力並確保在不同設備和瀏覽器上進行一致的版式。
>利用Google字體，Adobe Edge Web字體和開放字體庫來訪問各種免費和開源字體。
• >
考慮從字體商店等來源的付費字體，以獲取可以使您的網站與眾不同的高質量和獨特的版式。
• >使用@Import，link或javaScript等CSS方法在WordPress中實現字體，或使用插件以更輕鬆地集成。 >
>使用CSS中的字體堆棧指定首選字體並提供後備選項，以確保在不同系統上有效顯示文本。 在更改主題或添加新字體以避免丟失數據並確保更新之前，請始終備份WordPress網站。
當前的Web字體選項
>在我們談論在WordPress中使用Web字體之前，讓我們退後一步，看一下網絡上的字體。
• >對字體的最基本支持級別來自用戶使用的操作系統。這可能為台式機或筆記本電腦系統提供數十個字體，可在Android上使用三種字體。 不幸的是，這仍然是一個相當相當的運氣系統。我們都知道，設置為16px及以下時，在基於Windows的機器上的外觀較差，並且在某些OS X的某些較舊版本上，Arial看起來不太奇妙。

  >這些差異中的許多差異之所以發生，是因為原始的Apple Mac操作系統與每英寸72的舊印刷技術相關。因此，在顯示屏上分配了10點字體10個像素。當時，Apple提供的垂直（肖像）監視器與標準紙的大小相同，並且可以從屏幕上進行直接的一對一比較與印刷版本進行比較。另一方面，微軟選擇了96ppi的基礎，人們將距離計算機監視器的距離額外1/3，而不是從印刷頁面上。因此，所有內容在基於Windows的計算機上都渲染了1/3。 自1990年代這些技術出現以來，事情已經走了很長一段路，現在我們有無數不同的屏幕尺寸和解決方案可以處理。但是，除非您指定字體，否則用戶的設備和瀏覽器仍將為您選擇字體。 >

  >另一個問題是某些組織限制了用戶計算機上的字體。我曾經在一個僅安裝了佐治亞州和威爾達納的計算機的組織工作。這樣一來，員工發送的信件和電子郵件只能使用與公司身份相匹配的字體發送。
  充分利用內置字體
  >儘管沒有使用公司字體，大多數台式機和筆記本計算機 - 都為Web項目的Microsoft Core Fonts創建了字體。 1996年的這件字體包括Andale Mono，Arial，Arial Black，Comic Sans MS，Courier New，Georgia，Impact，Times New Roman，Trebuchet MS，Verdana和Webdings。雖然，這些字體或它們的等效物的版本可以依賴於大多數台式機和筆記本電腦上，但瀏覽器可能不會按照您的預期顯示字體。

  可以使用A

  font stack

  來最大程度地限制此類限制。這為瀏覽器設置了CSS規則，以使用許多字體之一。它始終包括一個捕獲所有襯線（在中風的末端帶有小點綴）或sans-serif（沒有點綴）。因此，我們可能擁有字體家庭：Cambria，“ Hoefler Text”，“ Liberation Serif”，Times，“ Times New Roman”，Serif。瀏覽器應瀏覽您的“堆棧”，並使用用戶計算機上存在的第一個定義字體顯示文本。如果找不到任何一個，它使用的後備字體在此示例中定義為serif。

  的目的是選擇一系列字體，這些字體在各種不同的分辨率和變焦級別的範圍內都很好地渲染。 >在這裡對加拿大設計師Amrinder Sandhu的字體堆棧進行了很好的討論。 不幸的是，如果您的觀眾正在使用手持設備，則使用字體堆棧無濟於事。 Android設備使用Droid Sans，Droid Serif和Droid Sans Mono，而Apple iOS設備使用具有各種樣式和重量的Helvetica Neue。

  >您可能希望與依賴多種操作系統和版本的內置字體相比，對WordPress頁面的外觀有更多的控制權。我們可以通過嵌入字體來克服這一點。

  >

  現在，讓我們看一下可用的Web字體的類型。

  >

  >免費字體

  >絕大多數可用字體都以某種方式獲得許可。當您購買已安裝操作系統的計算機，平板電腦或手機時，部分費用是字體的許可。但是，有多種使用多種自由嵌入字體的方法。

  > 嵌入式字體是字符集，該字符集從第三方平台上下載到用戶的計算機，該頁面處於活動狀態，並且在頁面關閉時丟失。這使得服務公司可以保留對字體的控制，但允許您顯示使用該字體以付費以使用該字體。有大量提供字體的公司。最著名的是：
  該平台可能是最受歡迎的免費字體服務，可能是最受歡迎的免費字體服務，提供了700多個設計良好的字體，包括龍蝦。
  Adobe還通過其Edge Web字體平台提供字體。這直接與Typekit服務接口（請參見下文），但過濾付費字體，留出免費的開放字體。
  >值得考慮的另一個平台是開放字體庫。這有超過600個字體。
  這些平台上的所有字體以及其他許多字體都使用開放字體許可證。開放字體許可（OFL）的目標是刺激全球協作字體項目的開發，支持學術和語言社區的字體創建工作，並提供一個免費的開放式框架，可以在其中共享和改進字體，並改善合夥企業的字體。與其他人。
  開放字體的優勢在於，它們可以在您的網站上免費使用，而無需支付年度許可費。缺點是您所選的字體可能沒有各種樣式和權重。
  >

  >付費字體

  儘管自由字體流行，但仍然有大量的字體鑄造廠提供高級字體。例如，類型的Foundries檔案列表列出了近300個創建者和提供優質字體的網站，儘管並非所有這些都可以嵌入網頁中。

  > 在提供用於網絡使用的高級字體的組織中，德國字體商店也許是付費字體最受歡迎的市場。有高質量的字體，以及異常的字形，例如Ulrike Rausch的廚房水果和蔬菜，叉子和刀，鍋和家用電器，Liebecook。

  如果您有一個Adobe Creative Cloud帳戶，則自動可以訪問Adobe的Typekit服務。 Typekit提供450多個字體。注意到的是，雖然許可證允許您在打印出版物和個人非商業網站中使用字體，但如果您為客戶端工作，則只有在擁有Adobe Business帳戶時才可以使用Web字體。 Adobe建議您在開發過程中為客戶設置帳戶，並將其交給他們。這是一個缺點，如果客戶端未能支付其帳戶，則該站點將恢復為您已定義的字體堆棧中的後備字體，即係統字體。

  在WordPress頁面和帖子中獲取想要的字體
  >有許多插件可讓您在WordPress網站上使用Web字體，並且簡單的Google字體是最受歡迎的字體之一。我不會專注於本文中的插件，而是通過對主題進行更改來查看如何手動執行此操作。此外，市場上的某些主題配備了各種Web字體選項。

  >

  實際代碼因服務而異。我將概述Google字體的方法以及Adobe Edge/Typekit。其他服務以類似的方式工作。不過，首先，請記住備份您的網站（或理想地使用單獨的開發副本），並在文件的副本上工作，以防萬一出現問題。應使用兒童主題進行樣式更改，以便每次更新主題時都不會覆蓋您的更改。

  Google字體

  >有三種方法（除了插件），用於在WordPress頁面上顯示外部字體，並使用Google字體：@Import，link和javaScript。

  選擇字體後，單擊“快速使用”按鈕。如果提供，請檢查所需的權重和样式，以及字符集（S）。 >

  接下來，您需要選擇嵌入方法。最簡單的方法是將@Import規則添加到您要修改主題的style.css文件中。將代碼放置在樣式中的位置似乎無關緊要。但是，@Import將阻止其他任何內容下載，直到完成任務為止。因此，如果您打算將此方法用於多種字體，則應將請求組合到一個@Import規則中。
  第二種方法同樣簡單，它使用鏈接方法，並且代碼包含在標準選項卡上。這次，代碼放在header.php文件中。將代碼放在文件頂部。然後，您可以將字體的名稱添加到字體堆棧中。請記住將其添加為第一個字體，其次是首選系統字體和後備字體樣式。

  >在這裡值得注意的是，Google Web Fonts博客指出，如果在 @font-face聲明之前存在腳本標籤，那麼Internet Explorer將在FONT文件完成下載之前不會顯示任何頁面內容。因此，如果文件無法下載，則可能留下空白或部分加載頁面的Internet Explorer用戶。因此，請儘早將 @font-face聲明放在文件中。

  >另一種方法是

  enqeue functions.php文件中的字體。下面顯示的功能將加載所需的字體樣式和權重。 >

  最後，您可以使用JavaScript加載字體。有一些爭論和反對使用JavaScript的論點，但是關閉JavaScript的用戶數量很少。該代碼位於子主題的標題.php中，該代碼位於和標籤之間。 Google再次建議它應該是第一個元素，這樣的字體將加載，而頁面負載的其他部分則應該避免“未風格的文本”。 >
  > Adob​​e Edge Web字體和Typekit 在WordPress中添加Adobe Typekit字體

  略微簡單一點。儘管您可以使用與Google字體的類似方法使用類似的方法，但經驗較低的開發人員可以將Typekit字體用於WordPress插件。安裝後，插件將出現在您的設置菜單中。同樣，請記住在進行這些修改之前備份WordPress。

  >
  >使用Typekit，通過Creative Cloud應用程序登錄到您的帳戶。選擇字體後，創建一個套件。給您的套件一個名稱，然後添加您使用該字體的網站的域名。輸入網站詳細信息後，您將獲得一塊JavaScript。使用純文本編輯器（例如Textedit或Notepad）複製並將其保存在文本文件中。 >
  >下一步是選擇您的字體，將其添加到網站套件中，然後發布。添加您希望使用並發布的任何其他字體。 >
  發布套件後，請轉到WordPress插件的Typekit字體。
  >添加您保存在文本文件中的代碼。 >

  >根據需要添加CSS代碼選擇器。在示例中，我添加了後標題顯示為H1文本（WordPress頁面和帖子標題是H1文本。）。我還添加了主體文本中的H2子標題的子標題。請注意，在命名選擇器之前，最好檢查名稱是否已在主題中使用。您可以使用瀏覽器中的開發人員工具檢查元素來做到這一點。不要忘記刷新您的屏幕按照您進行的每次更改，可能需要幾分鐘才能在您的網站上使用該字體。

  >

  >最後，還建議您每次使用字體時始終指定字體重量和字體式屬性。同樣，這有助於您控制多種可能的平台上字體顯示的控制。

  >

  結論

  在您的網站上添加字體是生產誘人網站的一種公認方法。這也可能是使常用的WordPress主題在其他所有方面脫穎而出的好方法。 但是，不要只是因為您可以 - 我可以 - 我在高中視覺通信中的第一個任務之一就是計算穀物包裝上的字體數量（有25個字體上有25個字體，玉米片包！）。字體通常更少，而將自己限制在兩個或三個設計通常是最好的做法，這不僅是從加載速度的角度來看，而且是視覺設計的觀點。

  Google在Pop Out中提供了一個字體配對功能，該按鈕位於“快速使用”按鈕旁邊，以幫助您開始。圖形設計是一種需要數年掌握的工藝，但是嵌入幾個好的字體將確保您選擇的所有用戶都可以看到您選擇的設計。

  >

  經常詢問有關在WordPress中使用Web字體的問題

  >如何將Google字體添加到我的WordPress站點？ 主題編輯器，然後找到header.php文件。將復制的鏈接粘貼在頭標籤中。最後，您可以通過引用字體家庭中的字體中的字體來使用字體。
  >我可以在WordPress中使用自定義字體嗎？您可以通過將字體文件（通常為.ttf或.otf）上傳到WordPress主題目錄，然後使用CSS將字體應用於您的網站。請記住在使用字體之前檢查該字體的許可。

  >如何更改WordPress中的字體大小？

  >您可以使用CSS更改WordPress中的字體大小。轉到外觀>自定義> WordPress儀表板中的其他CSS，然後添加CSS規則以更改字體大小。例如，要將所有段落的字體大小更改為16px，您可以使用以下CSS：p {font-size：16px; 。 。網絡安全字體的示例包括Arial，Times New Roman和Courier New。 ，您可以簡單地引用CSS中的字體。例如，為了將Arial字體用於所有段落，您可以使用以下CSS：P {font-fot-family：arial; 。例子包括時代新羅馬和佐治亞州。另一方面，sans-serif字體沒有這些小線條。示例包括Arial和Helvetica。

  >如何在WordPress中使用serif字體？

  在WordPress中使用serif字體，您可以在CSS中引用字體。例如，要使用佐治亞州的字體用於所有標題，您可以使用以下CSS：H1，H2，H3，H4，H4，H5，H6 {Font-Font-family：Georgia; 。您可以通過使用CSS將不同的字體應用於不同的HTML元素來做到這一點。例如，您可以使用一條字體進行標題，而另一個字體用於正文文本。

  >在將其應用於我的網站之前，我如何預覽WordPress中的字體？

  >您可以在中預覽字體通過使用插件（例如Easy Google字體），WordPress。該插件允許您在將其應用於網站之前在WordPress Customizer中預覽字體。
  我可以使用Google字體上不可用的字體或在標準的Web-Safe字體上使用的字體嗎？ >是的，您可以使用Google字體上不可用的字體或標準的網絡安全字體。您可以通過將字體文件上傳到WordPress主題目錄，然後使用CSS將字體應用於您的網站。請記住在使用字體之前檢查該字體的許可。

以上是如何在WordPress中使用Web字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！