本文適合任何人,從初學者到最有經驗的 Web 開發人員。 我見過長達十年的高級 Web 開發人員忽略字體並且沒有正確處理它們,所以請繼續閱讀。

閱讀下面幾行後,您將使用正確的 @font-face 和 CSS,它們將在瀏覽器中正常工作。

您的網站在各種設備上的外觀和性能都應如此。

什麼是字體?

我假設您已經知道這一點,否則您將不會閱讀本文。

然而,為了提供信息,@font-face 允許將特定字體嵌入到網站上,而不必依賴遠程用戶將它們安裝在他們的系統上。

可用的字體類型有:“.woff”、“.woff2”、“.ttf”、“.otf”、“.eot”和“.svg”。

  • ".woff" 代表 Web 開放字體格式
  • ".woff2" stands for WOFF 2.0 - Web Open Font Format
  • ".ttf", ".otf" 代表 TTF/OTF - TrueType 和 OpenType
  • ".eot" 代表 EOT - 嵌入式 OpenType
  • ".svg" 代表 SVG 字體

每個瀏覽器都有對這些類型的“自己的”支持(不幸的是),所以你需要考慮到這一點。

如果您希望您的頁面在所有設備和瀏覽器上看起來都一樣,則需要上述所有格式。

如何正確使用Font Face?

這是棘手的部分,因為如果您對此進行谷歌搜索,即使是頂級網站也不會向您展示嚴酷的現實。

如上所述,每個瀏覽器都有自己對字體的支持,如果你想讓你的字體在每個瀏覽器上工作,你必須加載必要的字體類型並相應地調整你的 CSS。

例如,如果我們檢查 Mozilla ,您會注意到以下內容:

1@font-face {
2  font-family: "Open Sans";
3  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

這夠了嗎? 不,它不適用於所有瀏覽器。 例如,這在 Internet Explorer 下根本不起作用。

您可以結帳 https://caniuse.com/?search=woff2 並親自查看。

另一個例子,如果我們結帳 W3 Schools

1@font-face {
2  font-family: myFirstFont;
3  src: url(myFirstFont.woff);
4}

這個對嗎? 仍然沒有,它不會支持所有瀏覽器。

為了支持所有瀏覽器,您加載的字體類型和 CSS 應如下所示:

 1@font-face {
 2	font-family: 'FONT';
 3	src: url('FONT.eot'); 									/* IE9 Compat Modes */
 4	src: local(''),
 5       url('FONT.eot?#iefix') format('embedded-opentype'), 	/* IE6-IE8 */
 6       url('FONT.woff2') format('woff2'), 					/* Super Modern Browsers */
 7       url('FONT.woff') format('woff'), 					/* Modern Browsers */
 8       url('FONT.ttf') format('truetype'), 					/* Safari, Android, iOS */
 9       url('FONT.svg#FONT') format('svg'); 					/* Legacy iOS */
10}

注意每種字體類型的註釋,這是不言自明的。 這將支持所有瀏覽器,並且您的字體將相應地顯示。

##如何轉換和生成Font Face類型?

如果您正在為客戶開發網站,他們通常會給您一種字體類型。 這要么只是 .otf.ttf 格式,還不夠。

您需要所有瀏覽器所需的所有格式,因此您需要將它們轉換為適當的 @font-face 類型。

幸運的是,我們有在線工具可以自動執行此操作,甚至為它生成正確的 CSS(我們是否進化了)。

轉換付費/自定義字體

我推薦你使用 Transfonter ,但你當然可以使用任何你喜歡的。

這個在線免費工具將轉換您的字體並為您提供現成的字體類型和 CSS:

 1@font-face {
 2    font-family: 'Sample';
 3    src: url('Sample.eot');
 4    src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5        url('Sample.woff2') format('woff2'),
 6        url('Sample.woff') format('woff'),
 7        url('Sample.ttf') format('truetype'),
 8        url('Sample.svg#Sample') format('svg');
 9    font-weight: normal;
10    font-style: normal;
11}

轉換免費/開源字體

在另一種情況下,您的客戶不會為您提供付費字體而是免費的 Google 字體,也有一個工具可以做到這一點:[https://google-webfonts-helper.herokuapp.com/fonts](https:/ /google-webfonts-helper.herokuapp.com/fonts)。

該工具還將生成在所有瀏覽器上正確顯示字體所需的類型和 CSS。

我強烈建議您檢查不同瀏覽器中生成的字體。

如何正確使用字體系列?

我可以打賭,您從未以最佳方式使用字體系列規範。 加載正確的字體是不夠的,您還需要指定後備字體。

噹噹前字體不可用時使用備用字體。 由於 CDN 問題或網絡超時,可能會發生這種情況。

您會注意到大多數 CMS 都定義瞭如下的後備字體:

1html {
2  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

夠了嗎? 嗯,沒有。 不幸的是,每個設備上的系統字體都不相同。 Windows 有它自己的,Android 有它自己的,iOS 也有,等等。

那麼該怎麼辦? 正確聲明它們,查看 Bootstrap 是如何做到的:

 1  // Safari for OS X and iOS (San Francisco)
 2  -apple-system,
 3  // Chrome < 56 for OS X (San Francisco)
 4  BlinkMacSystemFont,
 5  // Windows
 6  "Segoe UI",
 7  // Android
 8  "Roboto",
 9  // Basic web fallback
10  "Helvetica Neue", Arial, sans-serif,
11  // Emoji fonts
12  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

將上述內容與自定義字體一起使用,結果將是:

1font-family: "自定義字體在這裡", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

現在這是處理後備字體的一種巧妙方法,確保您的網站在字體加載(或根本不加載)時在所有設備上看起來都很流暢。

測試字體和字體系列

不要被測試這個詞嚇到,如果你聰明地工作,這是一個非常簡單的過程。 您甚至不需要手動檢查頁面以查看已加載的字體(如果您很懶惰)。

隨著技術的發展,可供開發人員使用的工具也在不斷發展; 讓生活更輕鬆,更容易創造事物。

檢查你的 @font-facefont-family 是否正確加載是一個非常簡單的過程,見下文。

檢查字體和字體系列

  1. 使用瀏覽器擴展輕鬆查看您的網站使用的字體:
  1. 編輯您的頁面並“破壞”@font-face,模擬未加載自定義字體的情況。您可以通過更改導致不存在字體的字體名稱或 URL 來“中斷”加載。
  2. 結果應該是與您的設備匹配的第一個字體作為後備。例如,如果您使用的是 Apple 設備,則應為“-apple-system”。

技巧和竅門

  • 如果您從 CDN 加載字體,請使用“預連接”HTML 鏈接標題標籤。
  • 在每個字體聲明中,添加 font-display: swap; 以加速加載。這指示瀏覽器使用後備字體顯示文本,直到自定義字體完全下載。
  • 僅加載實際需要的字體,我見過有人加載相同字體的 7 種字體類型,但只使用其中一種。
  • 要提高頁面速度,請使用 HTTP/2 預加載(第一個或必要的)字體。這將大大加快您的頁面速度並修復 Google PageSpeed“確保文本在 webfont 加載期間保持可見”。

好了,就是這樣,希望這篇文章對你有所幫助。