如何在Ruby on Rails+Tailwind项目中安装自定义字体并兼容全浏览器

1. 补充@font-face字体声明 #

你目前只定义了字体调用类，没有给浏览器指定字体文件的加载路径，Chrome对ttf格式的容错性更高，Firefox和Safari需要明确的字体声明。在base.scss文件最顶部添加以下代码：

@font-face {
  font-family: "BarcelonyRegular";
  src: url("/fonts/Barcelony.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

注意路径用/fonts/开头的绝对路径，对应你存放在public/fonts下的文件，避免CSS编译后相对路径错乱。

2. 补充多格式字体兼容（推荐配置） #

ttf格式的兼容性存在局限，且Firefox、Safari对跨域/未授权ttf文件的加载校验更严格。建议你将原始ttf文件转换为woff2、woff两种现代浏览器通用的压缩格式，转换后同样放到/public/fonts/目录下，更新@font-face声明为多源加载：

@font-face {
  font-family: "BarcelonyRegular";
  src: url("/fonts/Barcelony.woff2") format("woff2"),
       url("/fonts/Barcelony.woff") format("woff"),
       url("/fonts/Barcelony.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

该配置会按顺序优先加载体积更小、兼容性更好的格式，加载速度和兼容性都优于单ttf配置。

3. 排查Rails静态资源和跨域配置 #

如果修改后仍不生效，检查以下两项配置：

• 开发/生产环境的配置文件config/environments/{对应环境}.rb中，确保config.public_file_server.enabled = true，允许访问public目录下的静态资源
• 生产环境如果使用CDN分发静态资源，确认CDN的CORS规则允许字体资源跨域访问，Firefox对跨域字体的校验规则远严格于Chrome、Opera。

4. 可选：将字体注册到Tailwind配置 #

你目前自定义的.font-barcelony类可以正常使用，如果需要集成到Tailwind的原生工具类体系中，可以在tailwind.config.js中添加以下配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        barcelony: ["BarcelonyRegular", "Helvetica", "Arial", "serif"],
      },
    },
  }
}

配置后可以直接使用font-barcelony作为Tailwind原生工具类，无需额外自定义CSS。

生效验证 #

修改后清空浏览器缓存，开发环境直接刷新页面即可生效；生产环境需要执行rails assets:precompile完成资源预编译后重启服务。

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