CSS @ font-face不适用于Firefox，但适用于Chrome和IE

  • Z时代
  • 2024-01-10
  • 分类：问答

以下代码可在Google Chrome beta和IE

7中运行。但是，Firefox似乎对此有问题。我怀疑这是我的CSS文件如何包含的问题，因为我知道Firefox对跨域导入不太友好。

但这仅仅是静态HTML，而没有跨域问题。

在我的landing-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相同的位置有一个名为“ font”的目录。该字体目录包含所有woff / ttf / svg文件等。

我对此很困惑。 。这怎么可能？我想念什么？

回答：

本地运行网站（file:///）

Firefox

file:///默认具有非常严格的“文件uri起源”（）文件策略：要使其具有与其他浏览器一样的性能，请转到about:config，筛选依据fileuri并切换以下首选项：

security.fileuri.strict_origin_policy

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

出版网站

根据我在下面的评论，在部署站点后遇到此问题，您可以尝试添加其他标头，以查看您的问题是否将自己配置为跨域问题：由于您要指定相对路径，因此不应该这样做，但是我还是尝试一下：在您的.htaccess文件中，指定您要为每个请求的.ttf

/ .otf / .eot文件发送一个附加标头：

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

坦率地说，我不希望它有什么用，但它是如此简单，值得一试：否则，请尝试将 base64编码 用于您的字体，这很丑陋，但它也可能起作用。

以上是 CSS @ font-face不适用于Firefox，但适用于Chrome和IE 的全部内容， 来源链接： utcz.com/qa/406342.html

回到顶部