Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 規則.
但是, Internet Explorer 9 只支持 .eot 類型的字體, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體.
注意： Internet Explorer 8 及更早IE版本不支持@font-face 規則.
—— [ 菜鳥教程 ]
添加字體
語法：
@font-face {
font-family: 字體名稱;
src: 字體文件在服務器上的相對或絕對路徑;
}
使用字體
語法：
#d1{
/* 中間有空格用雙引號 */
font-family: 字體名稱;
}
以chiller字體爲例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'chiller';
src: url('CHILLER.TTF'); /* IE9 Compat Modes */
}
body{
background-color: #000;
}
#d1{
color: #f00;
font-size: 36px;
/* 中間有空格用雙引號 */
font-family: CHILLER;
}
</style>
</head>
<body>
<div id="d1">
I love you so much!!!! <br>
</div>
</body>
</html>
效果圖：
附chiller字體下載