我无法在ubuntu中为我的Next.js添加波斯字体，我的字体url是：static / Fonts / IRANSansWeb.eot。我使用dangerouslySetInnerHTML但仍然没有在ubuntu中工作。我不明白为什么在mac os中工作
font URL - 我在我的代码中试过这个：
return (
<html lang="en" dir="rtl">
<Head>
<title>فراخوان نقد</title>
<meta charSet="utf-8" />
{/* Use minimum-scale=1 to enable GPU rasterization */}
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
{/* PWA primary color */}
<meta name="theme-color" content={pageContext.theme.palette.primary.main} />
{/* <link
rel="stylesheet"
href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500"
/> */}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.6/css/bootstrap.min.css"
/>
<style dangerouslySetInnerHTML={{__html: `
@font-face {
font-family:
'IranSans,tahoma';
font-style:
normal;
font-weight:
400;
src:
url("../static/Fonts/IRANSansWeb.eot");
src:
url("../static/Fonts/IRANSansWeb.eot?#iefix")
format('embedded-opentype'),
url("../static/Fonts/IRANSansWeb.woff2")
format('woff2'),
url("../static/Fonts/IRANSansWeb.woff")
format('woff'),
url("../static/Fonts/IRANSansWeb.ttf")
format('truetype');
}
body{
font-family:
'IranSans, tahoma' !important
}
`}}/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
以下是我可以看到的几件可能是问题根源的事情
1）Static folder在next.js应用程序中被引用为绝对路径/static/file.txt
2）您可以使用在next.js中默认内置的style dangerouslySetInnerHTML，而不是使用style jsx
因此，生成的代码应如下所示
<Head>
<style global jsx>{`
@font-face {
font-family: 'CustomIranSans';
font-style: normal;
font-weight: 400;
src: url("/static/Fonts/IRANSansWeb.eot");
src: url("/static/Fonts/IRANSansWeb.eot?#iefix") format('embedded-opentype'),
url("/static/Fonts/IRANSansWeb.woff2") format('woff2'),
url("/static/Fonts/IRANSansWeb.woff") format('woff'),
url("/static/Fonts/IRANSansWeb.ttf") format('truetype');
}
body {
font-family: 'CustomIranSans', Tahoma;
}
`}</style>
</Head>
希望这可以帮助！
一个需要ontfaceobserver的解决方案。根据您的选择更改字体
Fonts.js
const FontFaceObserver = require('fontfaceobserver')
const Fonts = () => {
const link = document.createElement('link')
link.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900'
link.rel = 'stylesheet'
document.head.appendChild(link)
const roboto = new FontFaceObserver('Roboto')
roboto.load().then(() => {
document.documentElement.classList.add('roboto')
})
}
export default Fonts
然后在我的index.js上
import React from 'react'
import Home from '@/Home'
import Fonts from '~/general/Fonts'
class Index extends React.Component {
componentDidMount () {
Fonts()
}
render () {
return <Home />
}
}
export default Index