在CSS入門教程的“字體類型font-family”這一節我們提到過，服務器中的字體跟本地電腦字體是不一致的。舉個例子：
font-family:Verdana,Arial,Times New Roman;
每個人的電腦裝的字體都不一樣，我們定義“p{font-family:微軟雅黑,Arial,Times New Roman;}”這句的意思是，p元素優先用“Verdana”字體來顯示，如果你的電腦沒有裝“Verdana”這個字體，那接著就用“Arial”字體來顯示，如果也沒有裝“Arial”字體，接著就用“Times New Roman”字體來顯示，以此類推。
假如我要使得“所有用戶”的電腦上都能正常顯示“Verdana字體”，那怎麼辦呢？這個時候就用到了嵌入字體。
所謂的嵌入字體，就是加載服務器端的字體文件，讓浏覽器端可以顯示用戶電腦裡沒有安裝的字體。
在CSS3之前，web設計師必須使用已在用戶計算機安裝好的字體，所以在設計中會有諸多限制。通過CSS3，web設計師可以使用他們喜歡的任意字體。當你找到或者購買希望使用的字體時，可以將該字體文件存放到web服務器上，它會在需要時被自動下載到用戶的計算機上。
在CSS3中，我們可以使用@font-face方法來使得所有客戶端加載服務器端的字體文件，從而使得所有用戶的浏覽器都能正常顯示該字體。
沒有了解服務器端和客戶端的同學，如果理不清上面的邏輯的話，得去了解一下後端知識才會有深刻認知。
語法：
@font-face
{
font-family : 字體名稱;
src :url("字體文件路徑");
}
說明：
src可以是相對地址，也可以是絕對地址。如果你引用第三方網站的字體文件，那就用絕對路徑；如果使用的是你網站目錄下的字體，那就使用相對路徑。這個跟引用圖片是類似的。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>嵌入字體@font-face</title>
<style type="text/css">
/*定義字體*/
@font-face
{
font-family: myfont; /*定義字體名稱為myfont*/
src: url("../font/Horst-Blackletter.ttf");
}
div
{
font-family:myfont; /*使用自定義的myfont字體作為p元素的字體類型*/
font-size:60px;
background-color:#ECE2D6;
color:#626C3D;
padding:20px;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用@font-face方法，定義了名為myfont的字體（名字可以隨便取），然後在div元素中使用font-family屬性來使用這個字體。從上面我們可以知道，如果想要定義字體，需要以下2步：
通過@font-face這種方式就很好地使得所有用戶都能展示相同字體效果。
注意：@font-face規則使用服務器字體這種方法，不建議應用於中文網站。因為中文的字體文件都是幾MB到十幾MB，這麼大的字體文件，會嚴重影響網頁的加載速度。如果是少量的特殊字體，還是建議使用圖片來代替。而英文的字體文件只有幾十KB，非常適合使用@font-face規則。之所以中文字體文件大而英文的小，原因很簡單：中文漢字多，而英文只有26個英文字母。