Question

我有以下CSS（由SASS生成）：

@font-face {
  font-family: "locust";
  src: url(/assets/LOCUST.TTF) format("truetype");
  src: url(/assets/LOCUST.svg) format("svg"); }

路径似乎可以访问 - 我在localhost:3000，如果我可以通过键入localhost:3000/assets/LOCUST.TTF来下载/查看字体。

然而Firefox不会渲染字体：

<h1 style="font-family: locust;">Test</h1>

我正在使用Rails，但我不认为问题是相关的，因为生成的HTML和CSS对我来说似乎是正确的，并且字体是可访问的。如果我知道我需要生成什么，我很可能知道如何修复。

Answer 1

资产网址

以下是我们使用的代码：

#app/assets/stylesheets/fonts.css.scss
@font-face {
    font-family: 'Lato';
    src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot');
    src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('layout/fonts/lato/lato-hairline-webfont.woff') format('woff'),
         asset_url('layout/fonts/lato/lato-hairline-webfont.ttf') format('truetype'),
         asset_url('layout/fonts/lato/lato-hairline-webfont.svg#latohairline') format('svg');
    font-weight: 100;
    font-style: normal;
}

使用注意asset_url - 这提供了与网址相关的CSS兼容路径（因此您无法访问路径）

<强>网络字体

如果您拥有使用该字体的完全权利，那么最好在此处使用WebFont生成器：http://www.fontsquirrel.com/tools/webfont-generator

这会以.tff，.woff，.svg和.eot格式创建跨浏览器的webfont文件

字体无法渲染？

1 个答案: