在带有 sass、css 和语义 ui 的 nextjs 中使用谷歌字体
Posted
技术标签:
【中文标题】在带有 sass、css 和语义 ui 的 nextjs 中使用谷歌字体【英文标题】：using google fonts in nextjs with sass, css and semantic ui react 【发布时间】：2019-04-06 06:27:18 【问题描述】：我有一个具有以下配置的 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 文件。
现在我有一个问题。我似乎无法成功导入任何谷歌字体网址。我尝试将 ttf 文件下载到我的文件路径中，并尝试使用 @import scss 函数引用它。但是我得到一个 GET http://localhost:3000/fonts/Cabin/Cabin-Regular.ttf net::ERR_ABORTED 404 (Not Found) 错误
这是我尝试用 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"
【问题讨论】：
【参考方案1】：如果您使用的是功能性自定义应用程序，那么您可以将 google 字体或任何 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 元素，以使字体在整个 webiste 中应用，如下所示。
body
font-family: 'Source Sans Pro', sans-serif;
【讨论】：
【参考方案2】：根据最新的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 中导入它们。
【讨论】：
【参考方案3】：我知道在 Next.js 9.3 中，您可以从 Google Fonts 复制 @import 语句：
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
并将其放在某个 css 文件中，比如 styles/fonts.css：
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
.jost
font-family: 'Jost', sans-serif;
然后将其导入到您的全局 _app.js 文件中，如下所示：
import `../styles/fonts.css`
现在您可以全局访问每个 next.js 页面中包含 Google 字体的类
【讨论】：
我认为这是最佳做法。【参考方案4】：这就是我当前非阻塞加载外部字体的方式。在 _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 中删除
source
【讨论】：
【参考方案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 Fonts 的字体 url 对我有用。
【讨论】：
【参考方案6】：我认为另一种解决方案是直接使用 Google 提供的字体。只需自定义_app.js file 并在<Head /> 中添加<link rel="stylesheet" />
示例 _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>
);
【讨论】：
您认为最佳做法是什么？将字体存放在本地文件夹中还是您刚刚建议的？ 当我使用来自 Google via API 的字体而不是在本地下载字体时，我会采用这种方法。我看到的一些好处： 1. 如果我需要从谷歌添加更多字体，我不需要下载任何东西，只需在 URL 中添加字体名称即可 2. 无需调整 next.js webpack 配置来加载字体 效果很好。不过我会把它放到 _document.js 中。 我会考虑本地复制最佳实践 - 连同 css 字体显示设置，您可以避免不必要的网络请求【参考方案7】：我必须将文件放入静态文件夹才能工作，一定是在 nextjs 中渲染图像和字体的特定设置
【讨论】：
以上是关于在带有 sass、css 和语义 ui 的 nextjs 中使用谷歌字体的主要内容，如果未能解决你的问题，请参考以下文章
带有 React 和 Vue 的语义 UI 和 jQuery
javascript 版本0.x的Material-UI排版（基于SASS和CSS模块）
带有 Angularjs ng 模型的语义 UI 日期选择器