买了@ font-face,不在Firefox和IE中工作

时间:2013-08-07 11:23:45

标签: css internet-explorer firefox fonts font-face

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

@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网址上添加http://。 (这也行不通。)

1 个答案:

答案 0 :(得分:1)

您的mimetypes设置不正确。

在Chrome开发工具中查看很多内容:

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文件。