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＆gt; = 3.1使用资产来存储各种静态文件），我建议你应该更换：

带有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');
}

希望会好起来的。

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

2 个答案: