font-face是css3中允許使用自定義字型的一個模組。
@ font-face的是一個CSS規則，允許你輸入自己的字型出現在網站上，即使在特定的字型在訪問者的計算機上沒有安裝。這條規則最重要的是，它為設計師打開了一個全新的世界。您可以使用任何你喜歡的字型。
語法規則：,如何使用@ font-face,瀏覽器的兼容性,建議,
font-face是CSS3中的一個模組，他主要是把自己定義的Web字型嵌入到你的網頁中
語法規則：
@font-face {
font-family: <FontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
| 字型描述 | 值 | 說明 |
|---|---|---|
font-family | name | 必需的。定義字型的名稱。 |
src | URL | 必需的。定義該字型下載的網址（S） |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可選。定義該字型應該如何被拉長。默認值是"正常" |
font-style | normal italic oblique | 可選。定義該字型應該是怎樣樣式。默認值是"正常" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可選。定義字型的粗細。默認值是"正常" |
unicode-range | unicode-range | 可選。定義該字型支持Unicode字元的範圍。默認值是"ü+0-10 FFFF" |
如何使用@ font-face
首先，定義新的字型所提供的名稱和說明的字型。
@font-face {
font-family: DeliciousRoman;
src: url('http://******/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
- Opera：OTF，TTF
- Chrome：OTF，TTF
建議
字型渲染是一件棘手的事情 - 尤其是老移動瀏覽器。你應該總是測試，你可以儘可能多的設備支持。發現問題的速度越快越好。
最後，請記住，使用許多不同的字型可能會減慢你的網站需要時間來載入所有這些字型！
