使用@font-face載入字型
阿新 • • 發佈:2019-01-10
使頁面顯示電腦沒有的字型:
1.下載字型原始檔,常用字型格式(.ttf,.eot,.otf,.woff);
注:如果找不到這麼多格式的檔案,可以使用線上字型格式轉換器
2.定義字型
@font-face {
font-family: myFont;
src: url("../font/MNXLS.ttf"),
url("../font/MNXLS.eot"),
url("../font/MNXLS.otf"),
url("../font/MNXLS.woff");
}
3.引用字型
.div_wenzi{ font-family: myFont; font-size: 60px; text-align: center; }
瀏覽器支援:
Firefox、Chrome、Safari 以及 Opera 支援 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 型別的字型。
Internet Explorer 9+ 支援新的 @font-face 規則,但是僅支援 .eot 型別的字型 (Embedded OpenType)。
註釋:Internet Explorer 8 以及更早的版本不支援新的 @font-face 規則。