下一个 js 和全局字体的问题
Posted
技术标签:
【中文标题】下一个 js 和全局字体的问题【英文标题】：issues with next js and gobal fonts 【发布时间】：2021-09-22 23:15:25 【问题描述】：我是 Tailwind 的新手，在将全局字体应用到我的网站方面需要一些帮助。我想添加一个新的字体系列（Roboto 和 Muli），而不是默认提供的字体系列。
目前，我已将 global.css 文件编辑为：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base
body
font-family: "Roboto";
letter-spacing: 2px;
它在桌面上运行良好，但在移动设备上字体切换到不同的字体。如何确保字体保持不变？
我正在使用 Next.js。
任何帮助将不胜感激！
【问题讨论】：
【参考方案1】：另一种方法是在 Tailwind 配置中使用 override font。因此，每当您使用 font-sans 类时，该字体都不会被覆盖。
// 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 已正确加载（将链接标签放入 _app.js/_document.js）。参考this。
如果某些组件字体没有被正确应用，那么这意味着某些东西设置了不同的字体。要解决此问题，请尝试向组件添加/应用 font-sans 类。
【讨论】：
【参考方案2】：如下创建一个 css 文件并将其导入到 _app.txs 或 _app.js 中
body, html
font-family: 'Roboto', sans-serif;
【讨论】：
【参考方案3】：我也在使用 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>
.
.
.
【讨论】：
以上是关于下一个 js 和全局字体的问题的主要内容，如果未能解决你的问题，请参考以下文章