crg*_*g63 14 javascript fonts reactjs next.js
我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题。
我做的[ wait ] compiling ...时候得到的：
@font-face {
font-family: 'montserrat';
src: url('./mypath/Montserrat-Medium.woff2') format('woff2'),
url('./mypath/Montserrat-Medium.woff') format('woff'),
url('./mypath/Montserrat-Medium.ttf') format('truetype'),
url('./mypath/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
}
没有错误，或者只是编译......我读过（stackoverflow/57590195）它说我们应该使用像这样的静态路径
@font-face {
font-family: 'font';
src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2');
}
但该解决方案根本不起作用。它几乎似乎工作正常，因为错误（或令人信服的等待）停止了。但是如果你仔细看，你的字体没有加载。
然后我尝试了 fontfaceobserver，我很快就明白问题是一样的。因为你必须font-face使用它，你不能和 NextJS 一起使用它。
下载 next-font 后，我阅读了文档并查看了 github 示例。
这是我next.config.js对他们的启发。
const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
const withFonts = require('next-fonts');
module.exports = withFonts(
withCSS(
withSass({
enableSvg: true,
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/static/fonts。
这是我尝试使用它的方式。
...
function MainIndex() {
...
return (
<>
...
<style jsx>{`
@font-face {
font-family: 'Montserrat';
src: url('./static/fonts/Montserrat-Medium.ttf');
}
h1 {
font-family: 'Montserrat';
}
`}</style>
</>
)
}
...
我找到的解决方案
dangerouslySetInnerHTML会工作，但它不是最好的解决方案，我猜测。（我没试过）编辑：
我已经创建/public/static/fonts/fonts.css，/public/fonts/allMyfont.ttf然后在 _var.scss 中导入以将其与 sass 变量 @import "/public/static/fonts/fonts.css" 一起使用；导入 style.scss my var $font 并将“my/path/style.scss”导入到我的 index.js（永远编译）
在我尝试更接近的方法后/public/static/fonts/fonts.css，我的字体仍在同一文件夹中。然后在我的 index.js 中。但那个什么都不做。
这里是实时CodeSandBox 中的代码
Jes*_* We 20
这是我通常的做法：
将字体放在 public/static 某处
在与字体相同的文件夹中放置一个声明字体的 CSS 文件
CSS 文件示例/public/fonts/style.css：
@font-face {
font-family: 'Italian No1';
src: url('ItalianNo1-Black.eot');
src: url('ItalianNo1-Black.eot?#iefix') format('embedded-opentype'), url('ItalianNo1-Black.woff2') format('woff2'), url('ItalianNo1-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
在_document.js( docs ) 中导入此 css ：
render() {
return (
<Html>
<Head>
<link href="/fonts/style.css" rel="stylesheet"/>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}
Jer*_*yal 19
神圣提示：如今，您不需要提供多个字体文件，因为仅使用一个文件就可以广泛支持可变字体。此外，较新的字体格式具有更好的压缩比，并再次得到广泛支持。woff2
将字体文件放入/public/fonts/文件夹中
将其添加到_document.tsx文件中，以便为所有页面获取它：
export default class MyDocument extends Document {
render(): JSX.Element {
return (
<Html>
<Head>
<link
rel="preload"
href="/fonts/inter-var-latin.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
...
export default class MyDocument extends Document {
render(): JSX.Element {
return (
<Html>
<Head>
<link
rel="preload"
href="/fonts/inter-var-latin.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
...
next.config.json：@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url(/fonts/inter-var-latin.woff2) format("woff2");
}
参考： https: //gourav.io/blog/nextjs-cheatsheet#add-custom-fonts
我已经尝试过最新版本的 next.js "next": "10.0.8"
将所有字体添加到 public/fonts 文件夹并globals.css与字体一起使用。
我认为您在字体中使用的路径可能不正确，但我不确定代码的结构。
@font-face {
font-family: 'Open Sans';
src: url('../public/fonts/OpenSans-Light.eot');
src: url('../public/fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('../public/fonts/OpenSans-Light.woff2') format('woff2'),
url('../public/fonts/OpenSans-Light.woff') format('woff'),
url('../public/fonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
之后就可以使用了 font-family: 'Open Sans'
这里有一个相关的博客文章，如果你想了解更多关于
| 归档时间： |
|
| 查看次数： |
22866 次 |
| 最近记录： |