当前位置: 首页 > 面试题库 >

来自外部域的CSS @ font-face绝对URL:字体未在firefox中加载

仉伟兆
2023-03-14
问题内容

我将字体和CSS托管在pagodabox.com服务器上,并在shopify上开发商店部分。我想使用来自pagodabox托管网站的相同样式表作为shopify网站。但是我的字体没有加载到Firefox
13.0.1版中

FF或我的语法有问题吗?谢谢!!!

@font-face {
  font-family:'IcoMoon';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'square';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg');
  font-weight:normal;
  font-style:normal;
}

问题答案:

您不能在Firefox中使用@ font-face,而将字体托管在其他域中如果要使用绝对URL为@ font-
face指定字体,或在其他域中托管的字体,则需要提供该字体使用访问控制标头,特别是将Access-Control-Allow-Origin标头设置为“
*”或允许请求字体的域。这也适用于在其他子域上托管的字体。如果您使用的是Apache,则可以尝试将其放入.htaccess中并重新启动服务器

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


 类似资料:
  • 这是一个愚蠢的问题,我想有一个简单的解决办法。我在Wordpress主题中使用web字体--我正在工作的站点有两个域,可以用来访问同一个站点。 在我的CSS中,我使用了font-squirrel格式来声明字体: 当我转到其中一个域时,这工作很好,但是当我通过另一个域转到站点时,字体无法加载,因为它被认为是“跨站点”请求。基本上,当我访问domain1.com时,请求如下所示:http://www.

  • 问题内容: 是否可以在页面加载之前预加载或以其他方式缓存@ font-face字体(最有可能使用javascript),以便在页面最终加载时不会出现难看的跳转? 问题答案: 我目前尚无任何避免字体加载时出现闪烁的技术,但是您可以通过为字体发送适当的缓存头并确保该请求尽快通过来最大程度地减少闪烁。

  • @font-face跟其在CSS中作用表现一样,在后面简单地添加个块状属性即可,类似下面: @font-face font-family Geo font-style normal src url(fonts/geo_sans_light/GensansLight.ttf) .ingeo font-family Geo 生成为: @font-face { font-famil

  • 问题内容: 我正在尝试创建一种字体库以供在我的网站上使用,这样我就可以在CSS中调用库中的任何字体,而无需进行任何其他设置。为此,我创建了一个子域,在其中将每种字体的文件夹放置在存储库中,其中包含每种字体的各种文件类型。我还在子域的根目录上放置了一个名为font- face.css的css文件,并在其中填充了每种字体的声明,这些字体通过绝对链接进行链接,以便可以在任何地方使用它们。 我的问题是,似

  • 问题内容: 我正在尝试使用CSS文件加载字体,但是字体从未加载。这是我的目录结构。 然后在我有加载程序来获取字体。 在我的CSS文件中,我有以下内容: 最后,我使用以下命令调用我的CSS文件: 一切正常,但字体永远不会加载。 问题答案: 在尝试了很多东西之后,下一个装载机完成了工作。我使用url-loader代替了文件加载器。您需要安装url-loader。

  • 我试着为我的网站设置一个自定义字体,但它在火狐,Chrome或Edge/IE上都不起作用。Firefox开发者工具中的网络部分说没有找到字体,并列出了404,尽管URL应该是正确的。这是我的代码: null