如何使用Rails 4中的字体

发布时间：2020-12-14 01:19:27 所属栏目：百科来源：网络整理

导读：我有一个Rails 4应用程序，我试图使用自定义字体。我已经遵循了许多教程对此，不知何故，它只是不适合我的应用程序。我使用application.css.less并具有以下声明： @font-face { font-family: 'HDVPeace'; src: font-url('HDV_Peace.eot'); src: font-url('

我有一个Rails 4应用程序，我试图使用自定义字体。

我已经遵循了许多教程对此，不知何故，它只是不适合我的应用程序。

我使用application.css.less并具有以下声明：

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),font-url('HDV_Peace.woff') format('woff'),font-url('HDV_Peace.ttf') format('truetype'),font-url('HDV_Peace.svg#webfont') format('svg');
}

注意：我已经尝试使用url()而不是font-url()。前者在控制台上生成404错误，后者似乎根本没有做任何事情。在资源下的chrome开发工具中，字体文件不会显示在assets文件夹下或任何位置

在我的配置/ application.rb我有：

config.assets.paths << Rails.root.join('app','assets','fonts')

在我的配置/环境/ development.rb和配置/环境/ production.rb我有：

config.assets.paths << Rails.root.join('app','fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

我的字体文件位于app / assets / fonts，不包含在下面的文件夹中…

我缺少什么？

更新：

文件夹结构

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

你的@ font-face声明非常接近，你只是丢失了/ assets前缀在url声明。

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),url('/assets/HDV_Peace.woff') format('woff'),url('/assets/HDV_Peace.ttf') format('truetype'),url('/assets/HDV_Peace.svg#webfont') format('svg');
}

已添加到assets.paths的任何内容均可直接在开发和生产中的/ assets路径下使用。您只需要在application.rb中的资产路径修改行，在development.rb和production.rb中再次执行它只是多余的。

此外，所有的字体格式基本上都是二进制的。没有必要预先编译它们，所以你可以安全地删除assets.precompile添加。

这里是一个新鲜的Rails 4应用程序提供自定义字体。除了在css中的font-face import语句和添加一个页面以显示没有别的已经做了：

https://github.com/sorentwo/font-example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!