css - 买了一个@font-face，在 Firefox 和 IE 中无法使用

Question

我的客户购买了要使用的字体。这是为其生成的代码：

@import url("//hello.myfonts.net/count/27ec77");

@font-face {font-family: 'FranklinGothicURWCon-Boo';
    src: url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_0_0.eot');
    src: url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_0_0.eot?#iefix') format('embedded-opentype'),
    url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_0_0.woff') format('woff'),
    url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_0_0.ttf') format('truetype');}

@font-face {font-family: 'FranklinGothicURWCon-Dem';
    src: url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_1_0.eot');
        src: url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_1_0.eot?#iefix') format('embedded-opentype'),
        url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_1_0.woff') format('woff'),
        url('www.mybariatricsolutionsseminars.com/new/styles/webfonts/27EC77_1_0.ttf') format('truetype');}

这适用于 Chrome，但不适用于 Firefox 或 Internet Explorer。见这里： http ://www.mybariatricsolutionsseminars.com/new/

我尝试过的一些解决方案：

1. 将此代码添加到 .htaccess。（这不起作用。）

   AddType font/ttf .ttf
   AddType font/eot .eot
   AddType font/otf .otf
   AddType font/woff .woff
   
   <FilesMatch "\.(ttf|otf|eot|woff)$">
       <IfModule mod_headers.c>
           Header set Access-Control-Allow-Origin "*"
       </IfModule>
   </FilesMatch>
   

2. 添加http://src URL。（这也不起作用。）

Answer 1

您的 mimetype 设置不正确。

查看 Chrome 开发工具会显示很多内容：

Resource interpreted as Font but transferred with MIME type text/html

假设您将 apache 与 .htaccess 文件一起使用，请添加：

AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

到 .htaccess 文件。