@font-family 在 rails 中的 CSS 规范，不显示正确的字体

Question

我目前拥有的是以下路径中的字体文件夹：app/assets/fonts。

存储各种@font-face、'font-format-files'（eot、woff、ttf）。另外，我有一个mystyle.scss.erb 文件，代码如下：

    @font-face {
  font-family: 'ProximaNovaRegular';
  src: font-url("<%= font_path('proximanova-regular-webfont.eot') %>");
  src: font-url("<%= font_path('proximanova-regular-webfont.eot') %>") format('embedded-opentype'),
  font-url("<%= font_path('proximanova-regular-webfont.woff') %>") format('woff'),
  font-url("<%= font_path('proximanova-regular-webfont.ttf') %>") format('truetype'),
  font-url("<%= font_path('proximanova-regular-webfont.svg#ProximaNovaRegular') %>") format('svg');
}

@font-face {
  font-family: 'ProximaNovaBold';
  src: url("<%= font_path('proximanova-bold-webfont.eot') %>");
  src: url('<%= font_path('proximanova-bold-webfont.eot') %>") format('embedded-opentype'),
  url("<%= font_path('proximanova-bold-webfont.woff') %>") format('woff'),
  url("<%= font_path('proximanova-bold-webfont.ttf') %>") format('truetype'),
  url("<%= font_path('proximanova-bold-webfont.svg#ProximaNovaBold') %>") format('svg');
}

@font-face {
  font-family: 'boxyfont';
  src: url("<%= font_path('04b_19__-webfont.eot') %>");
  src: url("<%= font_path('04b_19__-webfont.eot?#iefix') %>") format('embedded-opentype'),
    url("<%= font_path('04b_19__-webfont.svg#04B_19__') %>") format('svg'),
    url("<%= font_path('04b_19__-webfont.woff') %>") format('woff'),
    url("<%= font_path('04b_19__-webfont.ttf') %>') format('truetype");
}

我正在尝试在包含 h2 的类 (.mid) 上使用“boxy-font” - 请参阅它的代码：

.mid {
  padding-bottom: 50px;
  font-family: 'boxyfont';
}

这不起作用，它只显示标准的默认字体。我做错了什么？

Answer 1

可能是因为字体声明的 url 部分与命名字体不同。

查看类似问题的答案。 https://stackoverflow.com/a/10907276/3261328

Answer 2

假设您应该将这些字体存储在'/app/assets/fonts/' 下（Rails >= 3.1 使用资产存储各种静态文件），我建议您应该替换： p>

font_path 与 asset_path

即，

@font-face {
  font-family: 'ProximaNovaRegular';
  src: url("<%= asset_path('proximanova-regular-webfont.eot') %>");
  src: url("<%= asset_path('proximanova-regular-webfont.eot') %>") format('embedded-opentype'),
  url("<%= asset_path('proximanova-regular-webfont.woff') %>") format('woff'),
  url("<%= asset_path('proximanova-regular-webfont.ttf') %>") format('truetype'),
  url("<%= asset_path('proximanova-regular-webfont.svg#ProximaNovaRegular') %>") format('svg');
}

@font-face {
  font-family: 'ProximaNovaBold';
  src: url('<%= asset_path('proximanova-bold-webfont.eot') %>');
  src: url('<%= asset_path('proximanova-bold-webfont.eot') %>t') format('embedded-opentype'),
  url('<%= asset_path('proximanova-bold-webfont.woff') %>') format('woff'),
  url('<%= asset_path('proximanova-bold-webfont.ttf') %>') format('truetype'),
  url('<%= asset_path('proximanova-bold-webfont.svg#ProximaNovaBold') %>') format('svg');
}

@font-face {
  font-family: 'boxy-font';
  src: url('<%= asset_path('04b_19__-webfont.eot') %>');
  src: url('<%= asset_path('04b_19__-webfont.eot') %>t') format('embedded-opentype'),
  url('<%= asset_path('04b_19__-webfont.woff') %>') format('woff'),
  url('<%= asset_path('04b_19__-webfont.ttf') %>') format('truetype'),
  url('<%= asset_path('04b_19__-webfont.svg#04B_19__') %>') format('svg');
}

希望一切顺利..