@font-face語法規則

  @font-face {
      font-family: <WebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

瀏覽器的相容性

不同的瀏覽器對字型格式支援是不一致的

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我們至少需要.eot,.woff兩種格式字型，如果需要支援更多瀏覽器版本還需要使用.svg等字型。

字型轉換網址

http://www.font2web.com//?error=no_file_uploaded https://www.fontsquirrel.com/tools/webfont-generator

轉換需要上傳字型，轉換完成後會自動下載安裝包，解壓安裝包，將font資料夾下邊.eot .woff .ttf .svg四個檔案（這是我們自定義字型時需要的）引用到專案目錄中，為更好的相容性，我們採用以下程式碼：

@font-face {
font-family: 'PingFangSCRegular';
src: url('../../fonts/PingFang SC Regular_0.eot');
src: url('../../fonts/PingFang SC Regular_0.eot?#iefix') format('embedded-opentype'),
url('../../fonts/PingFang SC Regular_0.woff') format('woff'),
url('../../fonts/PingFang SC Regular_0.ttf') format('truetype'),
url('../../fonts/PingFang SC Regular_0.svg#PingFangSCRegular') format('svg');
font-weight: normal;
font-style: normal;
}

然後再用font-family引用字型就可以了

body{
font-family: 'PingFangSCRegular'
}