Rails 7 资源管道和字体变量

Question

一个习惯是定义一组根变量来在应用程序中建立一致性，即

:root {
  --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --kbd-font-family: Consolas, "Liberation Mono", Courier, monospace;
  --main-font-color: #000;
  --secondary-font-color: #000;
  --cursive-font-color: rgba(0,0,0,0.93);
  --main_bg_color: #78903a;
}

然而，这种做法似乎需要一些认真的争论，因为 Rails 指南 甚至没有提到“字体”这个词......

尝试了各种尝试，但似乎从未注册，因为浏览器看到字体是由变量定义的，但仅引用变量的文字文本，并且不提供字体预览（表明未加载）

config.application.rb

设置为

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

服务器重新启动（尽管这在开发中不是必需的）

所以，假设一个家庭和

assets/fonts

下的文件，

@font-face {
 font-family: 'Gabarito';
 src: url('Gabarito-Regular.ttf'),
      url('Gabarito-Bold.ttf');
 font-display: fallback;
}

如何正确设置根变量？

Answer 1

解决方案是通过插入 config/assets.rb 文件

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

并通过 ruby 插值在 css 声明中声明路径

@font-face {
 font-family: 'Gabarito';
 src: url('<%= asset_path('fonts/Gabarito-Regular.ttf') %>')  format("ttf");
      url('<%= asset_path('fonts/Gabarito-Bold.ttf') %>')  format("ttf");
 font-display: fallback;
}

然后允许

:root {
  --main_font_family: Gabarito, sans-serif;
...