下面的代码可以在Google Chrome测试版和IE7中运行.然而,Firefox似乎在这方面有问题.我怀疑这是一个如何包含CSS文件的问题,因为我知道Firefox对跨域导入不太友好.

但这些都只是静电的超文本标记语言,不存在跨域的问题.

在我的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");

而且在类型内.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; }

我有一个名为"font"的目录,它和type位于同一个位置.css.此字体目录包含所有woff/ttf/svg文件等.

我在这件事上被难住了.It works in Chrome and IE but not on Firefox美元.这怎麽可能?我遗漏了什么?

推荐答案

LOCALLY RUNNING THE SITE (file:///)

默认情况下, firefox 有一个非常严格的"文件uri来源"(file:///)策略:要让它的行为和其他浏览器一样,请转到about:config,过滤fileuri,并切换以下首选项:

security.fileuri.strict_origin_policy

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

发布的站点

根据我下面的 comments ,如果你在部署网站后遇到了这个问题,你可以try 添加一个额外的标题,看看你的问题是否会将自身配置为跨域问题:不应该,因为你正在指定相对路径,但我还是会try 一下:在你的网站中.htaccess文件,指定要 for each 文件发送附加头.ttf/.otf/.正在请求的eot文件:

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

坦率地说,我不指望它会有什么不同,但它是如此简单,值得一试:否则,试着使用base64 encoding作为你的字体,虽然很难看,但它也可能会起作用.

有一篇精美的摘要可供 Select here

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时,如何隐藏它

相对于现有的转换3D应用关键帧动画

为什么我的CSS关键帧动画在循环之间稍微暂停?

防止在添加更多项目时扩展CSS网格行

如果中间元素的内容不适合 CSS,如何将其分隔到新行?

CSS中元素的重叠

在 css 中使用 first-of-type 效果太好了吗?

对 CSS 容器查询使用多个条件

为什么 em 不将定义的字体大小加倍?

有没有办法让它比它更敏感?

使用border-radius CSS时平滑边框

是否可以对 CSS 网格中重复和可包装的列使用固定的最小和最大宽度?

控制表格单元格之间的间距

表格的边框半径没有按预期工作

单击时 HTML 输入字段未获得焦点

CSS:固定到底部并居中

输入/按钮元素不会在 flex 容器中缩小

悬停时如何在图像上显示文字?

模拟显示:React Native 中的内联

CSS显示:表格列应该如何工作?