在Rails 7 Asset Pipeline中如何正确设置字体根变量？

问题核心 #

你的问题出在Rails资产管道对字体文件路径的解析逻辑上——直接用相对路径的url()无法让Rails正确定位字体文件，导致字体加载失败，根变量自然无法生效。

解决步骤 #

1. 修正@font-face的资源路径

Rails资产管道需要用专门的辅助方法生成字体文件的正确URL，替换你原有的@font-face规则：

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

• font_url是Rails为字体资产设计的辅助方法，会自动适配开发/生产环境的路径差异；也可以用asset_path替代，效果一致。
• 添加format('truetype')能帮助浏览器更高效识别字体类型。

2. 正确配置CSS根变量

确保根变量中引用的字体名称和@font-face定义的完全一致，然后正常声明：

:root {
  --main-font-family: 'Gabarito', "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;
}

把自定义字体'Gabarito'放在字体栈最前面，浏览器会优先加载它，找不到时自动回退到后续系统字体。

3. 加固资产管道配置（可选）

如果开发环境仍有问题，或需要确保生产环境正常运行，在config/application.rb中补充：

config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .ttf .otf .woff .woff2 )

这一步确保字体文件被纳入资产预编译列表，避免部署后字体丢失。

4. 引用根变量

在页面样式中正常使用变量即可：

body {
  font-family: var(--main-font-family);
  color: var(--main-font-color);
}

内容的提问来源于stack exchange，提问作者Jerome