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

Question

我无法在ubuntu中将波斯字体添加到我的Next.js中，并且字体URL为：static / Fonts / IRANSansWeb.eot。 我使用了危险的SetInnerHTML，但仍然无法在ubuntu中工作。我不明白为什么在Mac OS中可以正常工作

字体网址 -我在代码中尝试过此操作：

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

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

Answer 2

我可以看到以下几件事可能是问题的根源

1）在next.js应用程序中，静态文件夹被引用为绝对路径/static/file.txt

2）可以使用默认情况下内置在next.js中的样式jsx ，而不是style dangerouslySetInnerHTML地使用StyleSetInnerHTML样式

因此，结果代码应如下所示

<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>

希望这可以帮助！

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

问题描述

2 个解决方案

解决方案1
1 2018-09-10 13:20:59

解决方案2
1 2018-09-10 13:30:16

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

问题描述

2 个解决方案

解决方案1 1 2018-09-10 13:20:59

解决方案2 1 2018-09-10 13:30:16

解决方案1
1 2018-09-10 13:20:59

解决方案2
1 2018-09-10 13:30:16