如何在Rails 4中官方地添加自定义字体？

Question

如何在Rails 4中官方地添加自定义字体？

ruby-on-railsfontsruby-on-rails-4assetsdirectory-structure

32

我正在研究如何在我的Rails应用程序中添加自定义字体，例如通过在资产文件夹中添加一个fonts文件夹，但我无法找到官方的Rails方式来完成此操作。

是的，这里有很多关于这个问题的问题/答案，似乎都有自己的技巧。但是这种常见做法难道不应该遵循Rails著名的“约定优于配置”吗？

如果我错过了什么-在哪里可以找到关于如何组织Rails应用程序中的字体的文档参考？

- Fellow Stranger

4

官方文档中的资产管道指南 - http://guides.rubyonrails.org/asset_pipeline.html 中没有提到字体。 - Raj

1

完整参考资料 - https://dev59.com/zmgv5IYBdhLWcg3wBMOg - Raj

5个回答

20

刚刚做到了...

下载并保存字体文件（eot，woff，woff2...）到你的assets/fonts/目录中。
1. 在你的config/application.rb文件中添加以下代码config.assets.paths<< Rails.root.join("app", "assets", "fonts")

这样可以对你的字体文件夹进行预编译，就像默认情况下对图像、样式表等进行的一样。

确保此行设置为true config.assets.enabled = true

在你的sass/scss甚至是使用<script>标签内联

@font-face {   font-family: 'Bariol Regular';   src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg');   font-weight: normal;   font-style: normal; }

请使用font-url帮助程序来替代CSS里的url来解决Rails预编译资源时的指纹标记问题。

body {
   font-family: 'Bariol Regular', serif;
}

免费提示：话虽如此，就性能而言，最佳方式是使用JS进行设置，以便异步加载这些字体。请查看此加载器：https://github.com/typekit/webfontloader

- luigi7up

4

在Rails 5中，我可以将字体添加到/app/assets/fonts目录，并在指定字体源时使用font-url()方法。这已经足够让它正常工作了，我不需要改变任何其他配置（也没有执行上述的第2步或第3步）。 - Ryan

对于我来说，我添加了这个配置.assets.paths << "#{Rails.root}/app/assets/fonts"。 - nourza

5

我在尝试上述方法时遇到了一些问题，因为生成的css未指向编译后的ttf字体文件，所以我成功地使用了这个来源于https://gist.github.com/anotheruiguy/7379570的替代方法：

Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.

I defined in a .scss file that we use:

@font-face {
    font-family: 'Digital-7';
    src: asset-url('fonts/digital_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I leveraged the custom font in other .scss files:

.digital-font {
    font-family: 'Digital-7', sans-serif;
    font-size: 40px;
}

这样说来，一个更加清晰的方式就是将字体定义（例如 digital_7_mono.ttf）放在另一个网站上。

例如，如果您正在使用 Cloudfront，可以在名为 my_path 的 Cloudfront 目录中上传您的字体文件，然后定义一个 CSS 文件（例如 digital_fonts.css）。

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

在你的HTML文件中，在<head>标签内部添加以下内容：

- Julie

1

我唯一行之有效的方法是这样的：

@font-face {
  font-family: 'Vorname';
  src: asset-url('Vorname.otf') format('truetype'),
       asset-url('Vorname.ttf') format('truetype');
}

- rld

0

只需将字体放在app/assets/fonts下，并在您的scss中将url('Your Font Path')修改为font-url('Your Font Path')。同时，Asset Pipeline会自动将字体预编译到public/assests文件夹中。

更多详细信息请查看此处： https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

- Daniel Lin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikhil Nanjappa · Accepted Answer

是的，给出的链接会解释得很清楚，不过如果您需要另一个详细的说明，那么这里是：

首先，在应用程序中使用自定义字体，您需要下载字体文件，您可以尝试 https://www.1001freefonts.com/ 并查找字体。

最流行的字体文件格式之一是.otf（开放类型格式）.ttf（真正类型格式）.woff（Web开放字体格式）等几种。
您可以将下载的字体移动到应用程序文件夹下的app/assets/fonts/目录中。

下载文件后，您需要在CSS中 "声明" 您将要使用的字体，就像这样：

@font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}

最后，您可以像这样在任何地方使用刚刚声明的字体系列

#e-registration {
  font-family: "Kaushan Script Regular";
}

希望这有所帮助。