Question

我有一个具有以下配置的next.config.js文件：

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withSass(withCss({
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          publicPath: './',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    })

    return config
  }
}));

这很棒，因为它运行我的语义ui css文件。

现在我有问题。我似乎无法成功导入任何Google字体网址。我尝试将ttf文件下载到我的文件路径中，并尝试使用@import scss函数引用它。但是我收到GET http://localhost:3000/fonts/Cabin/Cabin-Regular.ttf net :: ERR_ABORTED 404（未找到）错误

这是我要使用Google字体进行的操作：

@font-face {
  font-family: 'Cabin';
  src: url('/fonts/Cabin/Cabin-Regular.ttf')  format('truetype');
}

$font-size: 100px;
.example {
  font-size: $font-size;
  font-family: 'Cabin', sans-serif;
}

我还下载了相关的npm依赖项：

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"file-loader": "^2.0.0",
"next": "^7.0.2",
"node-sass": "^4.9.4",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0",
"url-loader": "^1.1.2"

Answer 1

我知道在 Next.js 9.3 中，您可以从Google字体中复制 @import 语句：

var http = require('http');

var myAgent = new http.Agent({keepAlive:true, timeout:5000});

var client = http.get({host:'localhost', agent:myAgent}, function(incMsg){
    incMsg.on('data', function(chunk){ console.log(chunk.toString()) });
    incMsg.on('end', function(){ console.log('-- END OF MESSAGE --') });    
});

并将其放置在某些CSS文件中，像这样说@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');：

styles/fonts.css

然后将其导入到全局@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap'); .jost { font-family: 'Jost', sans-serif; }文件中，如下所示：

_app.js

现在，您可以全局访问每个next.js页面中包含Google字体的类

Answer 2

我认为另一种解决方案是直接从Google使用字体。只需自定义_app.js file并在<link rel="stylesheet" />

中添加<Head />

示例_app.js

import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head';

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Cabin"
            rel="stylesheet"
            key="google-font-cabin"
          />
        </Head>

        <Component {...pageProps} />

        <style global jsx>{`
          body {
            font-family: 'Cabin', sans-serif;
          }
        `}</style>
      </Container>
    );
  }
}

Answer 3

根据最新的docs，您现在可以通过更新_app.js文件并导入CSS样式来添加全局CSS。请按照以下步骤

按照docs在pages目录中创建自定义_app.js文件。
将您的styles.css文件添加到pages目录。
包括以下样式

// _app.js

// Import styles
import './styles.css'

// Function to create custom app
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Export app
export default MyApp

完成。这些样式styles.css将适用于应用程序中的所有页面和组件。由于样式表具有全局性，并且为了避免冲突，您只能将其导入_app.js内。

Answer 4

我必须将文件放到静态文件夹中才能正常工作，必须是在nextjs中渲染图像和字体的特定设置

Answer 5

 class NextApp extends App {
  render() {
    const { Component } = this.props
    return (
          <React.Fragment>
            <Component {...pageProps} />

            <style jsx="true" global>{`

              @import url('https://fonts.googleapis.com/css?family=Roboto');

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

            `}</style>

          </React.Fragment>
        </Provider>
      </Container>
    )
  }
}

在styled-jsx中包含Google字体中的字体网址对我来说很有效。

Answer 6

现在，这就是我目前正在无障碍地加载外部字体的方式。在_document.js头中：

<script dangerouslySetInnerHTML={{__html: '</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" media="print" onload="this.media=\'all\'" /><script>' }} />

dangerouslySetInnerHTML和一些脚本黑客可以解决onload，否则将从_document.js until this is resolved中删除

source

Answer 7

如果您使用的是功能强大的自定义应用程序，则可以按如下所示将谷歌字体或任何CDN链接字体添加到整个应用程序的开头：

import Head from 'next/head';

// Custom app as a functional component
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet"/>
      </Head>
      <Component {...pageProps}/>
    </>
  )
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
};

// Export app
export default MyApp

现在，您可以使用css将字体系列应用于body元素，以获取整个Webist应用的字体，如下所示。

body {
  font-family: 'Source Sans Pro', sans-serif;
}

在具有sass，css和语义ui的nextjs中使用Google字体

7 个答案: