使用@font-face加載字型

使頁面顯示電腦沒有的字型：

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 規則。