以下代码适用于 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:///
file:///默认情况下,about:configFirefox带有非常严格的“文件 uri 来源” 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 编码,虽然丑陋但它也可能有效。
这里有一个很好的回顾