向 Rails 4 添加自定义字体的官方方式？
Posted
技术标签:
【中文标题】向 Rails 4 添加自定义字体的官方方式？【英文标题】：Official way of adding custom fonts to Rails 4? 【发布时间】：2014-02-10 14:02:33 【问题描述】：我正在研究如何将自定义字体添加到我的 Rails 应用程序中，例如通过在资产文件夹中添加fonts 文件夹 - 我找不到关于如何执行此操作的“官方”Rails 方式。
是的，这里有很多关于这个问题的问题/答案，似乎都有自己的技巧。但是这种常见的做法不应该在 Rails 著名的“约定优于配置”之下吗？
或者如果我错过了 - 关于如何在 Rails 应用程序中组织字体的文档参考在哪里？
【问题讨论】：
资产管道的官方文档中没有提到字体 - guides.rubyonrails.org/asset_pipeline.html 完整参考 - ***.com/questions/10905905/… 【参考方案1】：是的，给出的链接会很好地解释它，但是如果你需要另一个详细的解释，那么这里就是
首先要在您的应用中使用自定义字体您需要下载字体文件，您可以尝试https://www.1001freefonts.com/并查找字体
少数最流行的字体文件格式主要是 .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)
您可以将下载的字体移动到 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";
希望这会有所帮助。
【讨论】：
简单而精彩的解释。谢谢！ :) 出色的解释。以防有人对具体细节有任何疑问。在我的应用程序下，需要将 csssrc 行更改为 src: url(KaushanScript-Regular.otf) format("truetype");
只需要这些吗？添加配置路径并确保它可以在生产环境中运行怎么样？
您不需要使用asset-url() 以便在预编译并且哈希摘要附加到文件名时在生产环境中工作吗？
@Jwan622 - format() 是为浏览器提供关于字体资源格式的提示，以便它可以选择合适的格式。可用类型为：woff、woff2、truetype、opentype、embedded-opentype 和 svg。【参考方案2】：
刚刚做到了……
下载并保存字体文件（eot、woff、woff2...）到您的 assets/fonts/目录
- 在您的 config/application.rb 中添加这一行 config.assets.paths
这是做什么的 预编译你的字体文件夹，就像默认情况下一样 图片、样式表等
并确保此行设置为 true config.assets.enabled = 真的
在你的 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 在预编译资产时完成的指纹识别
最后，在 CSS 文件中设置字体系列
body
font-family: 'Bariol Regular', serif;
免费提示： 话虽如此，就性能而言，最好的方法是使用 JS 进行设置，以便异步加载这些字体。检查这个加载器：https://github.com/typekit/webfontloader
【讨论】：
使用 Rails 5，我能够将我的字体添加到 /app/assets/fonts 并在指定字体 src 时使用 font-url() 方法。这已经足够了，我不需要更改任何其他配置（没有执行上面的第 2 步或第 3 步） 对我来说，我添加了这个 config.assets.paths 【参考方案3】：上面列出的方法我遇到了一些麻烦，因为生产 css 没有指向编译的 ttf 字体，所以我成功地使用了这种从https://gist.github.com/anotheruiguy/7379570借来的替代方法：
将所有字体文件放在assets/stylesheets/fonts 中。例如assets/stylesheets/fonts/digital_7.ttf。
我在我们使用的 .scss 文件中定义：
@font-face
font-family: 'Digital-7';
src: asset-url('fonts/digital_7.ttf') format('truetype');
font-weight: normal;
font-style: normal;
我在其他 .scss 文件中使用了自定义字体：
.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> 标记内，添加：
【讨论】：
【参考方案4】：对我有用的唯一方法是：
@font-face
font-family: 'Vorname';
src: asset-url('Vorname.otf') format('truetype'),
asset-url('Vorname.ttf') format('truetype');
【讨论】：
【参考方案5】：只需将字体放在app/assets/fonts 下，然后在scss 中将url('Your Font Path') 修改为font-url('Your Font Path')。 Aslo Asset Pipeline 会自动将字体预编译到public/assests 文件夹中。
查看此处了解更多详情： https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass
【讨论】：
以上是关于向 Rails 4 添加自定义字体的官方方式？的主要内容，如果未能解决你的问题，请参考以下文章