css中自定義字體的使用以及注意事項

css中自定義字體的使用以及注意事項

之前看到過很多自定義字體的樣式的寫法，但是從來沒有自己去寫過，這次因爲項目需求接觸到了自定義字體，就進行了簡單的瞭解，初看覺得及其簡單，網上的注意事項炒雞多，原以爲萬無一失，結果還是入坑不斷，所以準備和小夥伴們分享一下自己入的坑以及解決方法。

1、如何定義自定義字體？

@font-face {
  font-family: '自定義字體名稱';
  src: url('字體文件名.eot'); /* IE9 Compat Modes */
  src: url('字體文件名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('字體文件名.woff') format('woff'), /* Modern Browsers */
       url('字體文件名.ttf') format('truetype'), /* Safari, Android, iOS */
       url('字體文件名.svg#字體文件名') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
}

上述代碼自定義了一個字體，字體名爲“自定義字體名稱”，並且每個url的作用已經在註釋中進行了標註，當在相應的場合下，會加載相應的字體文件。

注意： IE9 下和 IE6-IE8 的加載 url 是不一樣的，一定要分開寫，不然你定義的字體將無法加載。

擴展：
想給已定義的自定義字體設置不同的font-weight，應該如何設置呢？
方法：再定義一個相同的字體文件，改變字體文件和font-weight的值就可以使用了，看以下代碼片段，就可以理解了。

@font-face {
  font-family: '自定義字體名稱';
  src: url('字體文件名-bold.eot'); /* IE9 Compat Modes */
  src: url('字體文件名-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('字體文件名-bold.woff') format('woff'), /* Modern Browsers */
       url('字體文件名-bold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('字體文件名-bold.svg#字體文件名') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: bold;
}

2、如何使用？

body{
  font-family:  "自定義字體名稱";
}

給相應的標籤（例如p、span、div、a…）指定font-family，就可以使用你的自定義字體啦！
如果自定義了多種font-weight值的字體，只要使用的時候加上font-weight的值就OK了喲（看下面的代碼）！

body{
  font-family:  "自定義字體名稱";
  font-weight: bold;/* 值爲自定義的font-weight的值 */
}

3、容易踩進的坑！

number1：

一個文件夾裏面只允許有一種自定義字體的文件，如果有第二種自定義字體的文件，則第二種字體不加載！

這個文件夾裏面有兩種自定義的字體，第二種字體就沒有被加載出來。

number2：
如果自定義字體爲中文字體，並且發現在加載的時候英文字體亂碼並且錯亂，則應在font-family中把英文字體也加上，並且放在中文的自定義字體之前，就可以解決這個問題了。

font-family:  Verdana, Arial,"自定義字體名稱";

希望總結的這幾點對小夥伴們有用！