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. 在 src URL 上添加 http://。 (这也没有用。)

Answer 1

您的 mimetypes 设置不正确。

在 Chrome Dev Tools 中查看显示了很多:

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

假设您使用带有 .htaccess 文件的 apache，添加:

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

到 .htaccess 文件。