下一个 js 和全局字体的问题

Question

我是 Tailwind 的新手，希望获得有关将全局字体应用到我的网站的一些帮助。我想添加一个新的字体系列（Roboto 和 Muli），而不是默认提供的字体系列。

目前，我已将 global.css 文件编辑为：

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

@layer base {
  body {
    font-family: "Roboto";
    letter-spacing: 2px;
  }
}

它在桌面上运行良好，但在移动设备上字体切换为不同的字体。如何确保字体保持不变？

我正在使用 Next.js。

如有任何帮助，我们将不胜感激！

Answer 1

如下所示创建一个 css 文件并将其导入 _app.txs 或 _app.js

body, html{
font-family: 'Roboto', sans-serif;
}

Answer 2

我也在使用 NextJs，我目前的做法是：

/styles/global.scss

body {
  font-family: 'Inter', sans-serif;
  @apply text-black;
}

/pages/_app.jsx

import 'styles/global.scss';

.
.
.
<Head>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap"
  rel="stylesheet"
/>
</Head>
.
.
.

Answer 3

另一种方法是在 Tailwind 配置中 override font。因此，每当您使用 font-sans class.

时，该字体都不会被覆盖

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  // other config ...
  theme: {
    extend: {
      fontFamily: { sans: ['Roboto', ...defaultTheme.fontFamily.sans] },
    },
  },
};

然后在global.css:

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

@layer base {
  html,
  body {
    @apply font-sans;
  }
}

确保您的（网络）字体 CSS 已正确加载（将 link 标签放入 _app.js/_document.js）。参考 this.

如果在某些组件中字体没有正确应用，则意味着某些东西设置了不同的字体。要解决此问题，请尝试 adding/applying font-sans class 组件。

下一个 js 和全局字体的问题

issues with next js and gobal fonts

fonts

next.js

tailwind-css

webfonts