在Rails 4中添加自定义字体的官方方法4

我正在研究如何将自定义字体添加到我的Rails应用程序中，例如通过在资产文件夹中添加fonts文件夹 - 我找不到有关如何执行此操作的"官方"导轨。

是的，这里有很多问题/答案，这似乎都带有自己的黑客。但是，这种普遍的做法不应该在铁轨的"著名的"构型"中进行？

，或者如果我错过了 - 关于如何在Rails App中组织字体的文档参考？

是的，给定的链接可以很好地解释它，但是如果您需要另一个详细说明，则在这里是

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

最受欢迎的字体文件格式中的几个主要是.otf（打开类型格式）.ttf（true Type Format）.WOFF（WEB OPEN FONT格式）
您可以在应用程序/资产/字体/

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

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

最后，您可以使用刚刚声明的字体家庭使用

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

希望这会有所帮助。

只是做了...

在您的资产/字体/目录
1. 在您的 config/application.rb 添加此行config.assets.paths＆lt;＆lt;rails.root.join（" app"，"资产"，"字体"）

这是什么像默认情况下一样，将您的字体文件夹预先编译您的字体文件夹图像，样式表等

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

在您的SASS/SCSS中，甚至与<script> TAG

内联

@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

我在上面列出的方法上遇到了一些麻烦，因为生产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;
}

这就是说，这样做的一种更干净的方法是将字体定义（在此示例中在此示例中）放在单独的站点上。

如果您使用的是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>标签内，添加：

对我有用的唯一方法是：

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

只是将字体放在app/assets/fonts下，然后将URL（'您的字体路径'）修改为font-url（'您的字体路径'）。ASLO Asset Pipeline将自动编译字体自动到public/assests文件夹。

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

相关内容

最新更新

热门标签：