我有一个具有以下配置的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"
答案 0 :(得分:7)
我知道在 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字体的类
答案 1 :(得分: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>
);
}
}
答案 2 :(得分:1)
根据最新的docs,您现在可以通过更新_app.js
文件并导入CSS样式来添加全局CSS。请按照以下步骤
_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
内。
答案 3 :(得分:0)
我必须将文件放到静态文件夹中才能正常工作,必须是在nextjs中渲染图像和字体的特定设置
答案 4 :(得分:0)
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字体中的字体网址对我来说很有效。
答案 5 :(得分:0)
现在,这就是我目前正在无障碍地加载外部字体的方式。在_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>' }} />
onload
,否则将从_document.js until this is resolved中删除答案 6 :(得分:0)
如果您使用的是功能强大的自定义应用程序,则可以按如下所示将谷歌字体或任何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;
}