如何在 WordPress 網站上使用可變字體

已發表: 2018-07-30

說實話。如果您在您的網站上使用單一字體，而沒有重量、高度或間距的變化，人們會感到無聊。他們不會讀你的東西。這就是為什麼您需要在您的網站上使用可變字體的原因。即使您選擇只使用一種字體，您也可以通過 CSS 對其進行足夠的調整，使其在功能上成為多種字體選擇。

什麼是可變字體？

可變字體是單個字體，CSS 可以根據 5 個不同的標准或軸來更改這些字體。每個軸控製字體外觀的一個特定方面，並具有相應的 CSS 標籤。

重量（CSS 中的wght ）
傾斜（CSS 中的slnt ）
斜體（ITAL在CSS）
光學尺寸（CSS 中的opsz ）
寬度（CSS 中的wght ）

然後是偽軸 Grade，在 CSS 中用GRAD表示。我希望我能告訴你為什麼在你的樣式表中使用 Grade 時用全大寫寫......但我不能。就是這樣。此外，隨著技術的發展，不同的公司可以引入（並且正在）新的軸。因此，我們將來可以用這些來做很多事情。

當組合所有這些不同的軸時，您可以使任何單個字體大致做您想做的任何事情——甚至像 SVG 一樣為它們設置動畫。（請注意，這也包括像我們這樣的圖標字體。）

為什麼要使用可變字體？

簡短的回答是他們比嵌入和您的網站上呈現多種字體更為有效。谷歌的開發者文檔總結得很好：

OpenType 可變字體允許我們將類型系列的多個變體存儲到單個字體文件中。 Monotype 進行了一項實驗，通過組合 12 種輸入字體來生成 8 個權重，跨越三種寬度，跨越斜體和羅馬風格。在單個可變字體文件中存儲 48 種獨立字體意味著文件大小減少了88% 。 （強調他們的）

在 WordPress 中使用可變字體

所以現在我們知道可變字體非常棒，下一步是將它們整合到我們的工作流程和 WordPress 網站中。

第1步

您要做的第一件事是在您的網站上安裝字體。您可以使用像 Use Any Font 這樣的插件，如果您是 ET 成員，則可以直接通過 Divi 界面上傳，使用@font-face 鏈接到它，或者完全放棄插件和主題並以老式的方式進行。

如何在 WordPress 中使用可變字體

不管你怎麼做，一旦你把它放在你的網站上，使用這種字體實際上很容易。為此，我通過 Divi 上傳了免費字體 Gingham，因為這就是我使用的。最終結果是一樣的。

第2步

由於可變字體是基於 CSS 的，因此您將想要轉到添加自定義 CSS 的任何位置。這可能在custom.css文件、 stylesheet.css 、WordPress 定制器的附加CSS 中，甚至在 Divi 主題選項的常規選項卡的底部（大多數主題也有類似的框）。您將輸入此代碼（使用您正在使用的任何可變字體的名稱）。

@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

它在您的 CSS 窗口中看起來像這樣。

如何在 WordPress 中使用可變字體

所有這些都是允許您在您的網站上使用字體。

如何在 WordPress 中使用可變字體

第 3 步

現在是時候以某種方式設計它了。你可以用它做任何你想做的事情，樣式可以應用於任何類或 ID。正如你所看到的，這個被應用於任何.et_pb_text div。您可以將它應用於全身或h1、h2、h3甚至p。你的選擇。畢竟它們是可變字體。

有兩種方法可以解決這個問題。第一個是使用font-variation-settings的單個高效 CSS 行。

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75; 
}

您也可以將這些添加到其他 CSS 中，就像浮動或z 軸或其他任何東西一樣。

或者，您可以在單獨的行上輸入軸。

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100;  
}

他們最終都做同樣的事情。

圖片來源：谷歌開發者指南

我在哪裡可以找到可變字體？

找到可變字體比僅僅使用 Google Fonts 稍微困難一些（尤其是因為沒有一個 Google Fonts 是可變的）。因為這項技術是新的，可變字體並沒有那麼普遍。由於軸之間的所有交互，它們必須單獨製作，因此在提供它們的地方，它們通常是購買的優質字體。

V-Fonts.com 是一個包含許多不同地方的目錄，供您獲取可變字體。他們鏈接到他們拉取的不同來源。
Monotype 銷售可變字體，甚至還有他們FF Meta字體的免費演示。

免費可變字體

也就是說，您可以獲得一些免費的個人字體。這些是品味高雅且總是才華橫溢的肯尼·辛（Kenny Sing）推薦的。

格子就是我們上面使用的。肯尼讓我參與其中，這是一個很好的選擇。
League Mono 也是簡單但多功能的可變字體的不錯選擇。
雷納的頁面說這是一部現代傑作。我有什麼資格爭論？

現在應該可以了。因為可變字體就像一個盒子裡裝了幾十種字體，下載上面的那些，你可以訪問更多的選項，我數不清。

記住

在 WordPress 網站上使用可變字體時，您唯一需要記住的是：並非所有瀏覽器都支持它們，但Firefox，例如，它們存在一些問題。因此，如果您打算讓可變字體的可變部分成為您網站的寶貴部分，您可能需要為使用 Firefox 或 Microsoft Edge 的人制定應急計劃。但話說回來，您可能已經擁有其中之一，因為人們仍在運行 IE 6。

包起來

可變字體為表格帶來了大量價值，而用戶方面的工作很少。能夠像添加粗體或斜體一樣使用 CSS 屬性設置樣式是很棒的。隨著越來越多的瀏覽器開始識別為它們開發的各種軸，可變字體將是您至少想要嘗試的東西——如果不是雙臂擁抱的話。

你對可變字體有什麼看法？

文章特色圖片來源 Tyler Finck / tylerfinck.com