Question

我无法在ubuntu中将波斯字体添加到我的Next.js中，并且我的字体网址是：static / Fonts / IRANSansWeb.eot。我危险地使用了SetInnerHTML，但仍无法在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>
);

Answer 1

有几件事可能是问题的根源

1）Static folder被称为next.js应用程序内的绝对路径/static/file.txt

2）除了使用style dangerouslySetInnerHTML之外，您还可以使用next.js中默认内置的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>

希望这会有所帮助！

Answer 2

一种需要 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

如何将波斯字体添加到Next.js？

2 个答案: