本文適合任何人，從初學者到最有經驗的 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-face 和 font-family 是否正確加載是一個非常簡單的過程，見下文。
檢查字體和字體系列
- 使用瀏覽器擴展輕鬆查看您的網站使用的字體：
- 編輯您的頁面並“破壞”
@font-face，模擬未加載自定義字體的情況。您可以通過更改導致不存在字體的字體名稱或 URL 來“中斷”加載。 - 結果應該是與您的設備匹配的第一個字體作為後備。例如，如果您使用的是 Apple 設備，則應為“-apple-system”。
技巧和竅門
- 如果您從 CDN 加載字體，請使用“預連接”HTML 鏈接標題標籤。
- 在每個字體聲明中，添加
font-display: swap;以加速加載。這指示瀏覽器使用後備字體顯示文本，直到自定義字體完全下載。 - 僅加載實際需要的字體，我見過有人加載相同字體的 7 種字體類型，但只使用其中一種。
- 要提高頁面速度，請使用 HTTP/2 預加載（第一個或必要的）字體。這將大大加快您的頁面速度並修復 Google PageSpeed“確保文本在 webfont 加載期間保持可見”。
好了，就是這樣，希望這篇文章對你有所幫助。
評論