@ font-face的是一個CSS規則，允許你輸入自己的字體出現在網站上，即使在特定的字體在訪問者的計算機上沒有安裝。這條規則最重要的是，它為設計師打開了一個全新的世界。您可以使用任何你喜歡的字體。
為什么它是真棒
就像我說的，@ font-face的打開一個全新的世界。現在，我們能夠以一種全新的方式使用排版。這就是為什么你看到這么多獨特的網站上的字體排版的網頁設計元素和更高的集成度。
此外，作為一個解決方案，展示了自定義字體，使用在圖像上的文字可以幫助搜索引擎優化
如何使用@ 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的支持
- Firefox
- Opera
- Chrome
- Safari
- Internet Explorer 9
這是你會說他不支持IE9以下的瀏覽器嗎，不用擔心，在舊的瀏覽器使用@ font-face時，不同的瀏覽器支持特定的字體文件。
- IE瀏覽器：EOT
- Mozilla瀏覽器：OTF，TTF
- Safari瀏覽器：OTF，TTF，SVG
- 歌劇：OTF，TTF，SVG
- Chrome瀏覽器：TTF，SVG
@ font-face的資源
Font Squirrel
Font Squirrel是一個很棒的網站，你應該非常熟悉。Font Squirrel是一家集優質商業使用的免費字體供您下載。最重要的是，他們有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，為您提供不同的字體類型，你需要支持的每一個瀏覽器。
@ font-face的工具包
Font Squirrel的套件部分是現成的工具包，其中包括多種字體格式，CSS和HTML代碼的集合。所有你必須做的是選擇一個字體，下載工具包，並復制代碼。這是簡單，。最重要的是，他們有一個很大的選擇充滿了巨大的字體。
@ font-face的工具包生成器
另一方面，你有工具包生成器，您上傳您自己的字體，它為您提供了所需的所有代碼。因為它創造了一個新的工具包為您的字體。所有你必須做的就是下載新的套件，並復制代碼到您的網站。它也就是這么簡單。然而，當使用自己的字體，請確保您有權利使用它- 不是所有的字體版權允許
谷歌字體
谷歌字體是谷歌的API，你必須選擇在您的網站中使用的字體的集合。所有的字體都是免費的，開放源碼的。他們的選擇是相當大的，包括許多偉大的字體。此外，您還可以自由選擇你喜歡的。一旦你選擇了你的字體，你給出的代碼片段，將其粘貼到您的網站。谷歌允許您選擇不同的代碼，如將CSS導入到您的<head>標簽。
當談到谷歌的字體，那肯定是一個易於使用的服務。有一件事是你要知道的：它會告訴你你所選擇的字體對您的網站的加載時間的負載。
TypeKit
TypeKit是另一種服務，有字體的集合 - 盡管他們是一種有償服務。他們一直致力於使@ font-face的更容易實現。他們的價格似乎是公平的，很多人使用它，因為他們有一個宏偉的集合偉大的字體供您使用。有沒有授權你不用擔心，如果你使用他們的服務 - 他們為你照顧。他們還與許多字體制造商合作，為您提供最新，最好的字體。
