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

【问题标题】：How to add persian Fonts to Next.js?如何将波斯字体添加到 Next.js？
【发布时间】：2018-09-08 05:45:26
【问题描述】：

我无法在 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>
);

【问题讨论】：

我试过@font-face 并在mac os 中工作，但在ubuntu 中仍然无法工作。
您好，请问您可以编辑您的问题以显示您尝试过的内容吗？
@Clément Prévost 当然是的。
你把这段代码放在哪里了？ html 中呈现了什么？
另外，您的Fonts 文件夹在哪里？

标签： ubuntu fonts persian next.js

【解决方案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

【讨论】：

谢谢，但我应该使用网站字体（此字体已使用，无法更改）
如果您从其他地方复制响应，您应该引用它：github.com/zeit/next.js/issues/512#issuecomment-322026199

【解决方案2】：

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

1) Static folder 在 next.js 应用程序中被引用为绝对路径 /static/file.txt

2) 你可以使用在 next.js 中默认内置的style jsx 而不是使用style dangerouslySetInnerHTML

所以结果代码应该是这样的

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

希望这会有所帮助！

【讨论】：