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

【遇到的問(wèn)題】

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

@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ù)器上時(shí)，卻無(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)行過(guò)的嘗試】

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

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

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

【測(cè)試環(huán)境】

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

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

回答

編輯回答

筱饞貓

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

2017年6月15日 21:41

編輯回答

薄荷綠

首先確定你的服務(wù)器可以訪問(wèn)這個(gè)地址；
然后試一下后面加上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