Rails中public目录下字体文件引入及路径问题排查

数据老陈

2026-7-21

Rails项目public目录下字体文件路径修复方案

问题原因

Rails的public目录是静态资源的根目录，浏览器请求静态资源时会从网站根路径开始解析。你当前使用的相对路径可能因CSS文件的加载上下文（比如通过嵌套路由引用CSS）导致浏览器无法正确定位到字体文件。

解决方法

方法一：使用绝对路径（最直接可靠）

在url()中添加开头的斜杠，让浏览器直接从网站根目录（对应Rails的public目录）请求字体文件：

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

方法二：用Rails asset辅助方法（适配多环境）

如果你的CSS文件是通过ERB渲染的（重命名为font.css.erb），可以使用Rails内置的asset_path方法生成适配不同环境的路径：

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(<%= asset_path('ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2') %>) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}