在Rails 3.1应用程序中使用@ font-face？

LGil2020-03-20

我在使用以下@font-face声明与Rails 3.1应用程序一起使用时遇到麻烦。我将字体放在Asset Pipeline中的资产文件夹中images，stylesheets并在其旁边的文件夹中命名为“ Fonts”。javascripts

这是我使用的声明（由Font Squirrel生成）。

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('Chunkfive-webfont.eot');
  src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     url('Chunkfive-webfont.woff') format('woff'),
     url('Chunkfive-webfont.ttf') format('truetype'),
     url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

任何人都可以在其Rails 3.1应用程序上成功使用@ font-face吗？

更新资料

我刚刚阅读了该线程http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/，该声明在声明中更改url为font-url。不幸的是，这似乎也不起作用。

斯丁2020/03/20 13:58:16

虽然这很晚，但您可以使用Compass的+font-face混入来避免所有这些麻烦。mixin通过以下方式使您的生活更轻松

不记得传统字体脸部剔除的可怕警告
它在内部为您处理url_helper和格式声明
记住起来容易得多

女士和先生们，以下声明如下：

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);

Sam猪猪2020/03/20 13:58:16

我刚刚在Atomic Object的Spin博客上更新了该文章。这是转换后的CSS（您正在查看Sass语法）

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer