文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS @字体-face不使用Firefox，而是使用Chrome和IE

问CSS @字体-face不使用Firefox，而是使用Chrome和IE
EN

Stack Overflow用户

提问于 2010-05-18 10:53:22

回答 30查看 227.1K关注 0票数 196

下面的代码适用于和IE7。然而，Firefox似乎对此有问题。我怀疑这是一个如何包含我的CSS文件的问题，因为我知道Firefox对跨域导入并不太友好。

但是这都是静态的HTML，没有跨域的问题。

在land-page.html上，我做了如下所示的CSS导入：

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

在main.css中，我有另一个类似于这样的导入：

@import url("reset.css");
@import url("style.css");
@import url("type.css");

在type.css中，我有以下声明：

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

我有一个名为“字体”的目录，位于与type.css相同的位置。此字体目录包含所有woff/ttf/svg文件等。

我在这件事上很为难。，它在Chrome和IE中工作，但在火狐上不起作用。这怎麽可能？我遗漏了什么？

css

firefox

font-face

file-uri

Stack Overflow用户

回答已采纳

发布于 2010-09-13 21:31:15

本地运行站点(file:///)

火狐默认有一个非常严格的“文件uri源”(file:///)策略:要让它像其他浏览器一样运行，转到about:config，fileuri筛选，然后切换以下首选项：

security.fileuri.strict_origin_policy

将其设置为false，您应该能够跨不同路径级别加载本地字体资源。

已发表网站

根据下面的注释，在部署站点之后，您会遇到这个问题，您可以尝试添加一个额外的标题，以查看您的问题是否将自己配置为跨域问题:它不应该，因为您指定了相对路径，但无论如何我还是要尝试一下:在.htaccess文件中，指定要为每个请求的..ttf/..otf/..eot文件发送额外的头：

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

坦率地说，我不指望它会产生任何不同，但它是如此简单，值得一试:否则尝试使用base64编码字体字体，丑陋，但它可能也能工作。

一个很好的概述是可用的这里

票数 238

查看全部 30 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2856502

复制

相似问题

问CSS @字体-face不使用Firefox，而是使用Chrome和IE
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS @字体-face不使用Firefox，而是使用Chrome和IEEN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS @字体-face不使用Firefox，而是使用Chrome和IE
EN