文章/答案/技术大牛

发布

社区首页 >问答首页 >关于下一个js和gobal字体的问题

问关于下一个js和gobal字体的问题
EN

Stack Overflow用户

提问于 2021-07-13 23:11:20

回答 3查看 1.3K关注 0票数 0

我是相当新的尾风，并希望一些援助应用全球字体到我的网站。我想添加一个新的字体系列(Roboto和Muli)，而不是默认提供的字体系列。

目前，我已经编辑了global.css文件如下：

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

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

它在桌面上工作得很好，但是在移动设备上，字体切换到另一种字体。如何确保字体保持不变？

我在用Next.js。

任何帮助都将不胜感激！

fonts

next.js

tailwind-css

webfonts

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-07-14 15:12:13

另一种方法是在尾风配置本身中使用覆盖字体。因此，无论何时使用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;
  }
}

确保您的(Web)字体CSS正确加载(将链接标记放在_app.js/_document.js中)。请参考这。

如果在某些组件中没有正确地应用字体，那么它就意味着某些东西设置了不同的字体。要解决这个问题，请尝试向组件中添加/应用font-sans类。

票数 0

Stack Overflow用户

发布于 2021-07-14 05:36:02

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

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

票数 0

Stack Overflow用户

发布于 2021-07-14 08:49:35

我也在使用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>
.
.
.

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68370219

复制

相似问题

问关于下一个js和gobal字体的问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于下一个js和gobal字体的问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于下一个js和gobal字体的问题
EN