首先，要在应用程序中使用自定义字体，您需要下载字体文件，您可以尝试https://www.1001freefonts.com/并查找字体。很少有最流行的字体文件格式主要是.otf(开放类型格式)、.ttf(真类型格式)、.woff()
您可以将下载的字体移到app/assets/ fonts /下面的app文件夹中。
下载完文件后，您需要“声明”您将在css中使用的字体，如下所示 @字体-face{字体-系列："Kaushan脚本规则“；src: url(/assets/KaushanScript-Regular.otf)格式(”truetype“)；
最后，您可以像这样在任何地方声明字体系列。 #e-注册{字体-家族："Kaushan脚本规则“；}

希望这能有所帮助。

票数 67

Stack Overflow用户

发布于 2016-06-08 08:23:45

就这么做了..。

下载并保存字体文件(eot，woff，woff2.)在资产/字体/目录中

1. In your **config/application.rb** add this line  config.assets.paths << Rails.root.join("app", "assets", "fonts")

它所做的就是预编译字体文件夹，就像默认情况下对图像、样式表等所做的一样。

并确保该行设置为 true config.assets.enabled =true
在sass/scss中，甚至与<script>标记内联。 @字体-face{字体-家族：'Bariol正则‘；src: font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot')；src: font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')格式(‘eot’)，font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')格式(‘woff’)，font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')格式(‘truetype’)，font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')格式(‘svg’)；字体大小:普通；字体样式:正常；}

请注意，您应该使用font-url助手而不是css的url来解决Rails在预编译资产时所做的指纹操作。

最后，在CSS文件中设置字体系列。

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

免费提示:可以这么说，性能方面最好的方法是用JS设置这些字体，以便异步加载这些字体。检查这个加载程序：https://github.com/typekit/webfontloader

票数 20

Stack Overflow用户

发布于 2017-07-20 17:20:33

我在上面列出的方法上遇到了一些问题，因为产品css没有指向已编译的ttf字体，所以我成功地使用了从https://gist.github.com/anotheruiguy/7379570借用的替代方法。

将所有字体文件放置在assets/stylesheets/fonts中。例如assets/stylesheets/fonts/digital_7.ttf。
我在我们使用的.scss文件中定义了以下内容： @字体-face{字体-系列：'Digital-7'；src:资产-url(‘字体/数字_7.ttf’)格式(‘truetype’)；字体-重量:普通；字体样式:普通}；
我利用了其他.scss文件中的自定义字体： .数字字体{字体系列：'Digital-7'，sans-serif；字体大小:40；}

这就是说，一个更干净的方法是将字体定义(本例中的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>标记中添加：

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21250303

复制

相似问题

问向Rails 4添加自定义字体的官方方法？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向Rails 4添加自定义字体的官方方法？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向Rails 4添加自定义字体的官方方法？
EN