下一个 js 和全局字体的问题
issues with next js and gobal fonts
我是 Tailwind 的新手,希望获得有关将全局字体应用到我的网站的一些帮助。我想添加一个新的字体系列(Roboto 和 Muli),而不是默认提供的字体系列。
目前,我已将 global.css 文件编辑为:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
font-family: "Roboto";
letter-spacing: 2px;
}
}
它在桌面上运行良好,但在移动设备上字体切换为不同的字体。如何确保字体保持不变?
我正在使用 Next.js。
如有任何帮助,我们将不胜感激!
如下所示创建一个 css 文件并将其导入 _app.txs 或 _app.js
body, html{
font-family: 'Roboto', sans-serif;
}
我也在使用 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>
.
.
.
另一种方法是在 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 组件。
我是 Tailwind 的新手,希望获得有关将全局字体应用到我的网站的一些帮助。我想添加一个新的字体系列(Roboto 和 Muli),而不是默认提供的字体系列。
目前,我已将 global.css 文件编辑为:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
font-family: "Roboto";
letter-spacing: 2px;
}
}
它在桌面上运行良好,但在移动设备上字体切换为不同的字体。如何确保字体保持不变?
我正在使用 Next.js。
如有任何帮助,我们将不胜感激!
如下所示创建一个 css 文件并将其导入 _app.txs 或 _app.js
body, html{
font-family: 'Roboto', sans-serif;
}
我也在使用 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>
.
.
.
另一种方法是在 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 组件。