如何使用 tailwind 和 ruby​​ 安装自定义字体

Posted 2023-03-07

【中文标题】如何使用 tailwind 和 ruby​​ 安装自定义字体

【英文标题】：How to install custom fonts with tailwind and ruby

【发布时间】：2021-10-13 10:50:35

【问题描述】：

我正在使用 Ruby on Rails 和 Tailwind，我想安装自定义字体，我下载并放入文件夹 /public/fonts/Barcelony.ttf

我看到该字体在 Chrome 和 Opera 中有效，但在 Firefox 和 Safari 中无效。

我将 base.scss 导入到我的 application.scss 文件中：@import "components/base";

将以下代码添加到 base.scss：

.font-barcelony 
  font-family: "BarcelonyRegular", Helvetica, Arial, serif;

如何让它适用于所有浏览器？

谢谢，

【参考方案1】：

我不确定这是否是最好的方法，但这应该可行：

main.scss：

@layer base 
    @font-face 
        font-family: 'barcelony';
        src: url('/public/fonts/Barcelony.ttf') format('ttf'),
        font-weight: 400;
        font-style: normal;
    

tailwind.config.js：

module.exports = 
  theme: 
    extend: 
      fontFamily: 
        'barcelony': ['barcelony', 'serif'],
      ,