使用 tailwindcss-rails 自定义字体

Question

在带有

tailwindcss-rails

gem 的 Rails 7 应用程序中，我尝试添加一些自定义字体。

1. 我已经创建了

   app/assets/fonts

   文件夹并添加了

   .woff

   文件。
2. 我已更新

   config/tailwind.config.js

   指定要使用的字体

...
theme: {
    extend: {
      fontFamily: {
        sans: ['font', ...defaultTheme.fontFamily.sans],
      },
    },
  },
...

3. 我已经更新了

   app/assets/stylesheets/application.tailwind.css

   ，正在导入字体

@font-face {
    font-family: "font";
    font-weight: bold;
    src: font-url("font.woff") format("woff");
}

@tailwind base;
@tailwind components;
@tailwind utilities;

检查渲染的代码，我的

tailwind-460c48e21c34697f1c9465bed5b183862eaf86c6.css

看起来像

@font-face{font-family:font;font-weight:400;src:font-url("/assets/font-bd33e45d79892555cff5f0452e65999105a249c9.woff") 

/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,... html{...font-family:font,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; ...

但是，当渲染页面时，会使用

system-ui

。

我正在通过以下方式运行应用程序

Procfile.dev

web: bin/rails server -b 0.0.0.0 -p 3000 --early-hints
css: bin/rails tailwindcss:watch

启动后，日志如下所示

css | Running...
web | Running...
web | => Booting Puma
web | => Rails 7.0.7.2 application starting in development
web | => Run `bin/rails server --help` for more startup options
web | Puma starting in single mode...
web | * Puma version: 6.3.1 (ruby 3.2.2-p53) ("Mugi No Toki Itaru")
web | *  Min threads: 5
web | *  Max threads: 5
web | *  Environment: development
web | *          PID: 18675
web | * Listening on http://0.0.0.0:3000
web | Use Ctrl-C to stop
css |
css | Rebuilding...
css |
css | Done in 498ms.

我在这里缺少什么？

Answer 1

我认为问题出在加载顺序：

在

app/assets/stylesheets/application.tailwind.css

中将其更改为：

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "font";
    font-weight: bold;
    src: font-url("font.woff") format("woff");
}

希望有帮助:)

Answer 2

您应该使用

url

，而不是

font-url

，例如：

@font-face {
  font-family: "font";
  font-weight: bold;
  src: url('font.woff') format('woff');
}

我不确定它是如何工作的，因为文件扩展名是

*.css

，但无论如何字体文件路径都会替换为指纹路径，所以不需要

font-url

。