个人中心
gpt4 book ai didi

javascript - 使用 NextJS 的自托管字体

转载 作者：行者123 更新时间：2023-12-04 11:36:44 25 4
gpt4 key购买 nike

我正在尝试使用我的 NextJS 应用程序自托管 webfonts，但遇到了麻烦。
这是 URL 浏览器尝试访问这些字体:

localhost:3000/_next/static/css/fonts/Avenir.woff2
实际路径是: 
_project_dir/static/fonts/Avenir.woff2
我尝试在 _app.js 中包含链接，它确实下载了字体，但文本仍然没有样式。 
<link rel="preload" as="font" href="/static/fonts/Avenir.woff2" type="font/woff2" crossorigin />
这是我的 _app.js : 

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <link href="https://fonts.googleapis.com/css?family=Poppins:500,500i,600&display=swap" rel="stylesheet" />
        <link rel="preload" as="font" href="/static/fonts/Avenir.woff2" type="font/woff2" crossorigin />
        <link rel="preload" as="font" href="/static/fonts/AvenirHeavy.woff2" type="font/woff2" crossorigin />
        <Head>
          <title>Project</title>
        </Head>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <Component pageContext={this.pageContext} {...pageProps} />
          </PersistGate>
        </Provider>
      </Container>
    );
  }
}
我的 main.css 
@font-face {
  font-family: 'Avenir';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Avenir.eot');
  src: url('fonts/Avenir.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir.woff2') format('woff2'),
    url('fonts/Avenir.woff') format('woff'), url('fonts/Avenir.ttf') format('truetype');
}

@font-face {
  font-family: 'Avenir';
  font-weight: 500;
  src: url('fonts/Avenir.eot');
  src: url('fonts/Avenir.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir.woff2') format('woff2'),
    url('fonts/Avenir.woff') format('woff'), url('fonts/Avenir.ttf') format('truetype');
}

@font-face {
  font-family: 'Avenir';
  font-weight: 900;
  src: url('fonts/AvenirHeavy.eot');
  src: url('fonts/AvenirHeavy.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirHeavy.woff2') format('woff2'),
    url('fonts/AvenirHeavy.woff') format('woff'), url('fonts/AvenirHeavy.ttf') format('truetype');
}

还有我的 next.config.js : 
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
        },
      },
    });
    return config;
  },

最佳答案

你不需要任何额外的依赖来使用字体。只需将您的字体移至 public/fonts而不是 static/fonts .
然后预加载:

<link rel="preload" href="/fonts/Avenir.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
记得保留开头的斜线，否则将不起作用。根据 official docs :

Files inside public can then be referenced by your code starting from the base URL (/).


此外，在 JSX 中，它是 crossOrigin不是 crossorigin , 它期望 string ，而不是 Boolean .
在 CSS/SCSS 中(在每个 src-url 中添加斜杠): 
@font-face {
  /* ... */
  src: url('/fonts/Avenir.woff2') format('woff2');
  /* ... */
}
然后删除字体文件的自定义 webpack 配置。这种方法的缺点是字体不会像 url-loader 那样被内联。 .但是我相信无论如何内联所有字体都是非常低效的。 (您设置了 100000 的限制。几乎所有 woff/woff2 字体都会被内联。)

关于javascript - 使用 NextJS 的自托管字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57590195/

25 4 0
文章推荐： r - 在ggplot数字的.eps和.pdf中编码希腊符号
文章推荐： node.js - 为什么我的 AWS Lambda 函数返回 "Invalid JSON"错误？
文章推荐： android - Visual Studio 认为我没有安装 Hyperv。为什么？
文章推荐： visual-studio-code - VS代码自动补全定制
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com