鍍金池/ 問答/HTML/ CSS中使用@font-face指定Web字體時，鏈接本地字體文件成功，鏈接遠(yuǎn)程

CSS中使用@font-face指定Web字體時，鏈接本地字體文件成功，鏈接遠(yuǎn)程字體文件失敗？

【遇到的問題】

嘗試在CSS中使用@font-face指定Web字體，發(fā)現(xiàn)當(dāng)鏈接的字體文件在本地時，字體效果可以成功顯示，如：

@font-face{
  font-family:"Emblema One";
  src:url("WebFonts/EmblemaOne/EmblemaOne-Regular.woff"),
      url("WebFonts/EmblemaOne/EmblemaOne-Regular.ttf");
}
h1{
  font-family:"Emblema One", sans-serif;
}

但是當(dāng)鏈接的字體文件存放于服務(wù)器上時，卻無法成功生效，如：

@font-face{
  font-family:"Emblema One";
  src:url("http://www.XXX.com/WebFonts/EmblemaOne/EmblemaOne-Regular.woff"),
      url("http://www.XXX.com/WebFonts/EmblemaOne/EmblemaOne-Regular.ttf");
}
h1{
  font-family:"Emblema One", sans-serif;
}

【進(jìn)行過的嘗試】

1.首先遠(yuǎn)程文件的路徑肯定是反復(fù)確認(rèn)過了，沒有問題；
2.在網(wǎng)上搜尋答案時，看到有人說可能是字體文件MIME類型的問題，于是在服務(wù)器上的“.htaccess”文件中添加：

AddHandler application/x-font-woff .woff
AddHandler application/x-font-ttf .ttf

添加后，遠(yuǎn)程字體文件的鏈接可以直接用瀏覽器打開并下載，可問題未解決；
3.使用過360瀏覽器和IE，都是本地可以，遠(yuǎn)程不行。

【測試環(huán)境】

●服務(wù)器端（遠(yuǎn)程）
主機(jī)類型：阿里云虛擬主機(jī)
操作系統(tǒng)：CentOS 6.5 64位

●客戶端（本地）
操作系統(tǒng)：Windows 10 家庭中文版 1803

回答
編輯回答
筱饞貓

除了字體文件MIME類型，跨域的頭（Access-Control-Allow-Origin ）是不是也要加下？

2017年6月15日 21:41
編輯回答
薄荷綠

首先確定你的服務(wù)器可以訪問這個地址；
然后試一下后面加上format：


@font-face {
  font-family: 'iconfont';  /* project id 324840 */
  src: url('//at.alicdn.com/t/font_324840_79msj31s32.eot');
  src: url('//at.alicdn.com/t/font_324840_79msj31s32.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_324840_79msj31s32.woff') format('woff'),
  url('//at.alicdn.com/t/font_324840_79msj31s32.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_324840_79msj31s32.svg#iconfont') format('svg');
}
2017年9月4日 04:42