CSS中使用@font-face指定Web字体时，链接本地字体文件成功，链接远程字体文件失败？

Question

【遇到的问题】

尝试在CSS中使用@font-face指定Web字体，发现当链接的字体文件在本地时，字体效果可以成功显示，如：

@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;
}

但是当链接的字体文件存放于服务器上时，却无法成功生效，如：

@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;
}

【进行过的尝试】

1.首先远程文件的路径肯定是反复确认过了，没有问题；
2.在网上搜寻答案时，看到有人说可能是字体文件MIME类型的问题，于是在服务器上的“.htaccess”文件中添加：

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

添加后，远程字体文件的链接可以直接用浏览器打开并下载，可问题未解决；
3.使用过360浏览器和IE，都是本地可以，远程不行。

【测试环境】

●服务器端（远程）
主机类型：阿里云虚拟主机
操作系统：CentOS 6.5 64位

●客户端（本地）
操作系统：Windows 10 家庭中文版 1803

Answer 1

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

Answer 2

首先确定你的服务器可以访问这个地址；
然后试一下后面加上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');
}