Как добавить персидские шрифты в Next.js? - PullRequest
Новая
       40

Как добавить персидские шрифты в Next.js?

0 голосов
/ 08 сентября 2018

Я не могу добавить персидские шрифты в мои Next.js в ubuntu, а URL-адрес моих шрифтов: static / Fonts / IRANSansWeb.eot. Я использовал опасно SetInnerHTML, но все еще не работает в Ubuntu. Я не понимаю, почему работает в Mac OS

шрифт 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>
);

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вот несколько вещей, которые, как я вижу, могут быть корнем проблемы

1) Статическая папка указывается как абсолютный путь /static/file.txt внутри приложения next.js

2) Вместо использования style dangerouslySetInnerHTML вы можете использовать стиль jsx , который по умолчанию встроен в next.js

Таким образом, полученный код должен выглядеть следующим образом 

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

Надеюсь, это поможет!

0 голосов
/ 10 сентября 2018

Одно решение, требующее 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
...