【问题标题】:Font-Face Not loaded字体未加载
【发布时间】:2012-12-26 14:01:19
【问题描述】:

我在我的网站上使用了一些服装字体,但我遇到了一个问题,它没有加载,我无法弄清楚问题,这是代码:

@font-face { 
    font-family: OuachitaWayWbw; 
    src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    font-family: 'ChromeYellowNF'; 
    src: url('fonts/Chrome Yellow NF.ttf');
}

#name { 
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}

ChromeYellowNF 作品。我也尝试将每个都放在不同的Font-face 中,但没有奏效。

【问题讨论】:

    标签: html css font-face


    【解决方案1】:

    您必须为每种字体声明一个@font-face:

    @font-face { 
      font-family: OuachitaWayWbw; 
      src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    }
    @font-face { 
      font-family: ChromeYellowNF; 
      src: url('fonts/Chrome Yellow NF.ttf');
    }
    

    单引号不是必需的。

    如果您想为 IE9 使用自定义字体,您还需要提供“.eot”字体文件。 http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

    编辑:好的,不同的浏览器有不同的字体实现方式:

    @font-face {
       font-family: OuachitaWayWbw; 
       src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"),
            url('fonts/Ouachita Way Wbw.woff') format("woff");
       src: url('fonts/Ouachita Way Wbw.eot');
    }
    

    您可能还需要将以下类型添加到 .htaccess/IIS:

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

    取自这里:font-face with wrong MIME type in Chrome

    【讨论】:

    • 我做了一些测试,看看我得到了什么:Resource interpreted as Font but transferred with MIME type application/octet-stream
    • 我已经编辑了我上面的帖子 - 我认为您需要为您正在使用的浏览器设置正确的字体格式,并且还需要 .htaccess 或 IIS 中的 MIME 类型的类型。
    【解决方案2】:

    对此不确定,但看起来您的字体系列名称可能应该用引号引起来。您也可以尝试将每种字体放在自己的 @font-face 声明中。那应该可以解决您的问题。我认为它采用了@font-face 声明中指定的最后一个字体系列。

    @font-face { 
      font-family: 'OuachitaWayWbw'; 
      src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    }
    @font-face { 
      font-family: 'ChromeYellowNF'; 
      src: url('fonts/Chrome Yellow NF.ttf');
    }
    
    #name {
        font-size:26px; 
        font-family: 'OuachitaWayWbw'; 
        padding-top:30px; 
        color:#000000; 
        margin-bottom:20px; 
    }
    

    【讨论】:

    • 我已经这样做了,但没有结果。以及引号,因为我做了很多更改,所以我忘记了重写它们。
    • 我做了一些测试,看看我得到了什么:Resource interpreted as Font but transferred with MIME type application/octet-stream
    猜你喜欢
    • 2014-09-07
    • 1970-01-01
    • 1970-01-01
    • 2017-12-10
    • 2016-06-05
    • 2013-10-16
    • 2013-11-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多