在nextjs应用程序中使用可变字体粗细和inter

0qx6xfy6 于 2023-03-29 发布在其他

关注(0)|答案(2)|浏览(171)

我刚刚设置了一个nextjs应用程序，想使用变量Inter字体，但我不能设置字体粗细。

import Head from "next/head";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Inter } from "next/font/google";
import Layout from "@/components/Layout/Layout";
import styles from "@/styles/Main.module.css";

const inter = Inter({
  subsets: ["latin"],
});

export default function App({ Component, pageProps }: AppProps) {
  const title = "App title";

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content="description" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout>
        <style jsx global>{`
          html {
            font-family: ${inter.style.fontFamily};
          }
        `}</style>

        <main className={`${styles.main}`}>
          <Component {...pageProps} />
        </main>
      </Layout>
    </>
  );
}

但是在我的应用程序中，我想设置不同的字体粗细的任何地方，字体粗细都不会改变。
如果我检查呈现的文本，它使用'__Inter_Fallback_44d352'，所以看起来它可能根本没有使用可变字体？
我错过了什么？

next.js

来源：https://stackoverflow.com/questions/75847780/use-variable-font-weight-with-inter-in-nextjs-app

2条答案

按热度按时间

kx5bkwkv1#

在文档中，他们指定了这样的内容
_app.js

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { Inter, Roboto } from 'next/font/google'

const inter = Inter({
  weight: ['400', '900'],
  subsets: ['latin'],
})
export default function App({ Component, pageProps }: AppProps) {
  
  return (
    <>
     <style jsx global>{`
    html {
      font-family: ${inter.style.fontFamily};
    }
  `}</style>
  <Component {...pageProps} />
    </>
   )
}

然后在你的造型上你可以

font-weight: 400 !important

它似乎像下一个不断覆盖的重量设置为重要似乎修复它虽然

赞(0）回复(0）举报 2023-03-29

kx5bkwkv2#

我在一个稍旧的项目上测试了这个问题，它使用的是next v13.2.1，我通过将下一个版本从13.2.4调回到13.2.1来修复它

赞(0）回复(0）举报 2023-03-29

我来回答

在nextjs应用程序中使用可变字体粗细和inter

2条答案

相关问题

热门标签

最新问答