Rails 6 - @font_face 在生产中的其他计算机上不起作用答案

【问题标题】：Rails 6 - @font_face not working on other computers in productionRails 6 - @font_face 在生产中的其他计算机上不起作用
【发布时间】：2021-02-09 07:22:23
【问题描述】：

这里是初学者！

我刚刚将我的第一个项目实时推送到 Heroku，但在生产服务器上遇到了关于字体的问题。在我的电脑上，字体可以正常显示，但是在其他电脑上查看时，字体会变成浏览器的默认设置。

我发现其他几个帖子都面临这个问题，感觉我已经尝试了所有解决方案。

我尝试通过将字体直接添加到 public/assets/fonts/my-font.ttf 来提供字体。除了通过管道为它们提供服务之外，还在 application.rb 中添加以下行：

config.assets.paths << Rails.root.join("app","assets","fonts")
config.assets.precompile << ["*.svg", "*.eot", "*.woff", "*.ttf", "*.woff2"]

关于我的 SCSS，我尝试过使用：

    url('../fonts/my-font.otf') format('otf');
#or
    font-url('/my-font.otf') format('otf');
#or
    asset-url('/my-font.otf') format('otf');

我使用的字体是 Gilroy 和 Raleway，它们都是网络字体，应该通过@font_face 与所有浏览器兼容。

我将分享我当前文件的状态，并希望得到任何指导！！

应用程序.scss

    /*
     * This is a manifest file that'll be compiled into application.css, which will include all the files
     * listed below.
     *
     * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
     * vendor/assets/stylesheets directory can be referenced here using a relative path.
     *
     * You're free to add application-wide styles to this file and they'll appear at the bottom of the
     * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
     * files in this directory. Styles in this file should be added after the last require_* statement.
     * It is generally better to create a new file per style scope.
     *
     *= require_tree .
     *= require_self
     */
    
    // Stylesheet for NavBar & Universal Classes
    
     @import "bootstrap/scss/bootstrap";
     @import "a_base/*";
     @import "b_layout/*";
     @import "c_components/*";
     @import "d_responsive/*";

app/assets/stylesheets/a_base/01_font_family.scss

@font-face {
  font-family: 'gilroy-light';
  src: url('gilroy-light.otf') format('otf');
  src: url('gilroy-light.woff') format('woff'), url('gilroy-light.woff2') format('woff2');
  font-weight: normal;
  font-style: light;

  font-family: 'gilroy-extrabold';
  src: url('gilroy-extrabold.otf') format('otf');
  src: url('gilroy-extrabold.woff')  format('woff'), url('gilroy-extrabold.woff2') format('woff2');
  font-weight: normal;
  font-style: extrabold;

  font-family: 'raleway-bold';
  src: ('raleway-bold.ttf') format('ttf');
  font-weight: normal;
  font-style: bold;
}

public/assets 包括所有带有指纹的字体，例如gilroy-extrabold-59d834ebcb219368afb4b9ec2acbacf985877c30d87d1da47367a59ee99d511e.woff2

查看 Chrome 开发工具 -> 网络 -> application.css 时也应该添加我可以看到它正在像我想象的那样被送达，例如

src: url("/assets/gilroy-light-e9cb24bdf5f46693d31db8989bb279e2704c83170fe0fc1ab73c2f8be54a8af9.otf") format("otf");

但字体根本不起作用。

非常感谢任何帮助！

【问题讨论】：

标签： ruby-on-rails heroku sass font-face production-environment

【解决方案1】：

更新：

所以我想我解决了。这主要取决于我的 SCSS。我的@font-faces 应该写成。

@font-face {
  font-family: 'gilroy-light';
  src: font-url('gilroy-light.otf') format('otf');
  src: font-url('gilroy-light.woff') format('woff'),
  asset-url('gilroy-light.woff2') format('woff2');
  font-weight: normal;
  font-style: light;
}
@font-face {
  font-family: 'gilroy-extrabold';
  src: font-url('gilroy-extrabold.otf') format('otf');
  src: font-url('gilroy-extrabold.woff') format('woff'),
  asset-url('gilroy-extrabold.woff2') format('woff2');
  font-weight: normal;
  font-style: extrabold;
}
@font-face {
  font-family: 'raleway-bold';
  src: font-url('raleway-bold.ttf') format('ttf');
  font-weight: normal;
  font-style: bold;
}

只有当我在我的计算机上检查 Safari 时，我才注意到字体在生产和开发中都没有正确显示。这让我开始认为这个问题实际上与我的 SCSS 相关，而不是 Rails 的编译。

希望这可以帮助那些发现自己陷入困境的其他人！

【讨论】：