以下代码可在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文件等。
我对此很困惑。 它适用于Chrome和IE,但不适用于Firefox 。这怎么可能?我想念什么?
file:///
Firefox file:///默认具有非常严格的“文件uri起源”()文件策略:要使其具有与其他浏览器一样的性能,请转到about:config,筛选依据fileuri并切换以下首选项:
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编码 用于您的字体,这很丑陋,但它也可能起作用。