15

在我的 Rails 项目中，我尝试使用自定义字体。有很多与这个问题相关的答案，比如这个没有帮助的答案，我编辑了development.rb：

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

它仍然显示No route matches [GET] "/assets/chalkduster-webfont.woff"

我让我url喜欢：

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

}

font_path('')我在源代码中尝试过，font-url()但它也从来没有用过。:(

4

2 回答 2

32

试试asset-url()。为我工作。

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

另外，我只在 config/environments/production.rb 中添加字体路径并预编译其他资产

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

不需要添加到 config/environments/development.rb 因为asset-url有点神奇。

于 2013-10-11T08:44:51.377 回答
1

我发现了一种更容易实现不需要导入的替代方法，这是：您可以将字体文件转换为 base 64 文本。确保选中 Base64 编码选项 在此处输入图像描述

然后单击转换并下载生成页面的 .zip 文件。在 .zip 文件中打开 de .css，您会看到所需的代码。 在此处输入图像描述

我尝试实施 jverban 的解决方案，但对我来说，不起作用。

然后我找到了一个tuto，解释了两种方法，点击打开tuto

我尝试了第二种解决方案（黑客的方式）。唯一要做的就是将字体文件夹移动到应用程序/资产/样式表中。（我想你把所有的字体都放在一个名为 fonts 的文件夹中）

然后在 css 文件 o scss 中，您可以使用此代码执行此操作。

@font-face {
    font-family: 'GoodDDC';
    src: url(asset_path("fonts/GOODDC.ttf"));
}

rails 文件夹上的asset_path 引用app/assets/stylesheets

树文件夹看起来像

app/assets/stylesheets/fonts/yourfont.ttf (wof, etc)
于 2017-03-03T18:43:55.963 回答