@ font-face的是一個CSS規則，允許你輸入自己的字型出現在網站上，即使在特定的字型在訪問者的電腦上沒有安裝。這條規則最重要的是，它為設計師開啟了一個全新的世界。您可以使用任何你喜歡的字型。
為什麼它是真棒就像我說的，@ font-face的開啟一個全新的世界。現在，我們能夠以一種全新的方式使用排版。這就是為什麼你看到這麼多獨特的網站上的字型排版的網頁設計項目和更高的整合度。
此外，作為一個解決方案，展示了自訂字型，使用在映像上的文字可以協助搜尋引擎最佳化
下面的文法是你如何使用@ font-face的。首先，定義新的字型所提供的名稱和說明的字型。
@font-face { font-family: DeliciousRoman; src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');}
然後你引用它。
p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}
就是這樣。
在前面的例子中使用外部來源。但是，如果將字型檔是在您的伺服器上，那麼你可以參考以下的方式：
@font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf');}
此外，還有其他三個字型屬性，您應該知道的。首先是font-stretch，您可以設定的字型會被展開，“normal’”是預設的。此外，有字型的風格，讓你的字型是斜或斜體。最後，還有字型的重量，最後字型為粗體，等你可以自己設定
@font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf'); font-stretch: condensed; font-style: oblique; font-weight: bold;}
建議
字型渲染是一件棘手的事情 - 尤其是老行動瀏覽器。你應該總是測試，你可以儘可能多的裝置支援。發現問題的速度越快越好。
最後，請記住，使用許多不同的字型可能會減慢你的網站需要時間來載入所有這些字型！
瀏覽器的相容性並非所有的瀏覽器都支援@ font-face的！
目前，@ font-face的支援
這是你會說他不支援IE9以下的瀏覽器嗎，不用擔心，在舊的瀏覽器使用@ font-face時，不同的瀏覽器支援特定的字型檔。
Font Squirrel是一個很棒的網站，你應該非常熟悉。Font Squirrel是一家集優質商業使用的免費字型供您下載。最重要的是，他們有@ font-face的工具包部分和@ font-face的工具包產生器。Font Squirrel工具包，為您提供不同的字型類型，你需要支援的每一個瀏覽器。
@ font-face的工具包Font Squirrel的套件部分是現成的工具包，其中包括多種字型格式，CSS和HTML代碼的集合。所有你必須做的是選擇一個字型，下載工具包，並複製代碼。這是簡單，。最重要的是，他們有一個很大的選擇充滿了巨大的字型。
@ font-face的工具包產生器另一方面，你有工具包產生器，您上傳您自己的字型，它為您提供了所需的所有代碼。因為它創造了一個新的工具包為您的字型。所有你必須做的就是下載新的套件，並複製代碼到您的網站。它也就是這麼簡單。然而，當使用自己的字型，請確保您有權利使用它- 不是所有的字型著作權允許
Google字型Google字型是Google的API，你必須選擇在您的網站中使用的字型的集合。所有的字型都是免費的，開放源碼的。他們的選擇是相當大的，包括許多偉大的字型。此外，您還可以自由選擇你喜歡的。一旦你選擇了你的字型，你給出的程式碼片段，將其粘貼到您的網站。Google允許您選擇不同的代碼，如將CSS匯入到您的<head>標籤。
當談到Google的字型，那肯定是一個便於使用的服務。有一件事是你要知道的：它會告訴你你所選擇的字型對您的網站的載入時間的負載。
TypeKitTypeKit是另一種服務，有字型的集合 - 儘管他們是一種有償服務。他們一直致力於使@ font-face的更容易實現。他們的價格似乎是公平的，很多人使用它，因為他們有一個宏偉的集合偉大的字型供您使用。有沒有授權你不用擔心，如果你使用他們的服務 - 他們為你照顧。他們還與許多字型製造商合作，為您提供最新，最好的字型。
本文連結：什麼是@font-face，以及在css當中如何使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
