将阿拉伯字体导入 React Material 主题

Question

我需要在我的 React material UI 主题中使用 Noto Sans Arabic 字体。主题运行良好，覆盖也运行良好。

我已经尝试 React Material UI docs 像 react-material 文档中那样导入我的字体，但它不起作用：

import notoArabic from '../static/fonts/NotoSansArabic-Regular.ttf'

....


const arabic = {
  fontFamily: 'Noto Sans Arabic',
  fontStyle: 'regular',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Noto Sans Arabic'),
    local('Noto Sans Arabic-Regular'),
    url(${notoArabic}) format('ttf')
  `,
  unicodeRange:
    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
};

...

overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [arabic],
      },
    },

...

我希望字体能够导入并正常工作。

我有任何错误，可以看到字体系列：Noto Sans Arabic；在我的浏览器中。但是不行

Answer 1

您可以尝试下面提到的一些方法来检查您是否正确编译代码。

从您提到导入字体的相关URL推断static文件夹和above file目录是兄弟。确保相关路径与每个 root 文件夹相同。
此外，如果您使用 webpack 来捆绑您的代码，请确保您包含 ttf 文件扩展名并添加 file-loader 模块来处理它compiling.

例如

{
  test: /\.(png|jpg|gif|svg|ttf|eot|woff)$/,
  loader: 'file-loader',
  query: {
    name: '[name].[ext]?[hash]'
  }
},

Answer 2

有几种可能性，但我建议尝试通过您的 index.css 文件加载相同的字体并检查结果，可能是您引用的位置不正确或字体不存在.

还可能需要文件加载器或插件来使用 webpack 读取字体：https://chriscourses.com/blog/loading-fonts-webpack

Answer 3

我是波斯人，我们的语言字体非常非常像阿拉伯语字体。对于我的项目，我创建了一个单独的文件，并将其命名为 globalStyles.js:

import { createStyles } from '@material-ui/core';
import yekanRegularTtf from '../app/assets/font/iranyekanwebregular.ttf';
import yekanRegularWoff from '../app/assets/font/iranyekanwebregular.woff';
import yekanRegularWoff2 from '../app/assets/font/iranyekanwebregular.woff2';
import yekanBoldTtf from '../app/assets/font/iranyekanwebbold.ttf';
import yekanBoldWoff from '../app/assets/font/iranyekanwebbold.woff';
import yekanBoldWoff2 from '../app/assets/font/iranyekanwebbold.woff2';

const globalStyles = ({ spacing, typography, colors }) =>
  createStyles({
    '@global': {
      '@font-face': [
        {
          fontFamily: 'IRANYekan',
          fontStyle: 'normal',
          fontWeight: 400,
          src: `url(${yekanRegularWoff2}) format('woff2')`,
          fallbacks: {
            src: [
              `url(${yekanRegularWoff})`,
              `url(${yekanRegularTtf}) format('truetype')`,
            ],
          },
        },
        {
          fontFamily: 'IRANYekan',
          fontStyle: 'normal',
          fontWeight: 700,
          src: `url(${yekanBoldWoff2}) format('woff2')`,
          fallbacks: {
            src: [
              `url(${yekanBoldWoff})`,
              `url(${yekanBoldTtf}) format('truetype')`,
            ],
          },
        },
      ],
      html: {
        lineHeight: '1.5',
        WebkitTextSizeAdjust: '100%',
      },
      '*': {
        transition: 'opacity 1s cubic-bezier(0.4, 0, 0.2, 1)',
        fontFamily: "'IRANYekan', sans-serif, Arial",
        boxSizing: 'border-box',

        '&:after, &:before': {
          fontFamily: "'IRANYekan', sans-serif, Arial",
          boxSizing: 'border-box',
        },
        '&[type="checkbox"], &[type="radio"]': {
          boxSizing: 'border-box',
          padding: '0',
        },
        '&[type="number"]': {
          '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
            height: 'auto',
          },
        },
        '&[type="search"]': {
          WebkitAppearance: 'textfield',
          outlineOffset: -2,

          '&::-webkit-search-decoration': {
            WebkitAppearance: 'none',
          },
        },
        '&[hidden]': {
          display: 'none',
        },
        '&::-webkit-file-upload-button': {
          WebkitAppearance: 'button',
          font: 'inherit',
        },
      },
      body: {
        fontFamily: "'IRANYekan', sans-serif, Arial",
        lineHeight: '1.38',
        margin: 0,
      },
      '#react-view': {},
      'h1, h2, h3, h4, h5, h6': {
        margin: [[0, 0, spacing.margin]],
        lineHeight: '1.3',
        letterSpacing: 0,
        textTransform: 'none',
        color: colors.black,
        display: 'block',
        fontFamily: "'IRANYekan', sans-serif, Arial",
      },
      h1: {
        fontSize: typography.fontSize * 1.4,
      },
      h2: {
        fontSize: typography.fontSize * 1.2,
      },
      h3: {
        fontSize: typography.fontSize,
      },
      h4: {
        fontSize: typography.fontSize,
      },
      h5: {
        fontSize: typography.fontSize,
      },
      h6: {
        fontSize: typography.fontSize,
      },
      p: {
        display: 'block',
        margin: [[0, 0, spacing.margin]],
      },
      main: {
        display: 'block',
      },
      hr: {
        boxSizing: 'content-box',
        height: 0,
        overflow: 'visible',
      },
      pre: {
        fontSize: '1em',
      },
      a: {
        backgroundColor: 'transparent',
        textDecoration: 'none',
      },
      'b, strong': {
        fontWeight: 'bold',
      },
      small: {
        fontSize: '80%',
      },
      img: {
        borderStyle: 'none',
      },
      button: {
        WebkitAppearance: 'button',
      },
      input: {
        overflow: 'visible',
      },
      'button, input, optgroup, select, textarea': {
        fontFamily: 'inherit',
        fontSize: '100%',
        lineHeight: '1.15',
        margin: 0,
      },
      'button, input': {
        overflow: 'visible',
      },
      'button, select': {
        textTransform: 'none',
      },
      textarea: {
        overflow: 'auto',
      },
      'button, [type="button"], [type="reset"], [type="submit"]': {
        WebkitAppearance: 'button',

        '&::-moz-focus-inner': {
          borderStyle: 'none',
          padding: '0',
        },
        '&:-moz-focusring': {
          outline: [[1, 'dotted', 'ButtonText']],
        },
      },
      fieldset: {
        padding: '0.35em 0.75em 0.625em',
      },
      legend: {
        boxSizing: 'border-box',
        color: 'inherit',
        display: 'table',
        maxWidth: '100%',
        padding: '0',
        whiteSpace: 'normal',
      },
      progress: {
        verticalAlign: 'baseline',
      },
      details: {
        display: 'block',
      },
      summary: {
        display: 'list-item',
      },
      template: {
        display: 'none',
      },
    },
  });

export default globalStyles;

在我的组件的顶层，我注入了项目根组件：

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { CssBaseline, withStyles } from '@material-ui/core';
import { Helmet } from 'react-helmet';
import SnackBarProvider from './SnackBar';
import globalStyles from '../utils/globalStyles';
import { generalHelmet } from '../utils/helmetConfig';

type AppProviderProps = {
  children: any,
  store: any,
};

const AppProvider = ({ children, store }: AppProviderProps) => (
  <>
    <Helmet {...generalHelmet} />
    <CssBaseline />
    <ReduxProvider store={store}>
      <SnackBarProvider>{children}</SnackBarProvider>
    </ReduxProvider>
  </>
);

export default withStyles(globalStyles)(AppProvider);

此外，我在 Webpack 配置文件中编写了如下字体加载器：

~~~

const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv === 'development';
const exclude = [/node_modules/, /public/];
const name = isDev ? '[name].[ext]' : '[hash:5].[ext]';
const publicPath = '/assets/';

~~~

module.exports = {

  ~~~

  module: {
    rules: [

      ~~~

      {
        test: /\.(woff2?|ttf|eot|svg)$/,
        exclude,
        loader: 'url',
        options: { limit: 10240, name, publicPath },
      },

现在一切正常。希望我的配置对你有帮助。

将阿拉伯字体导入 React Material 主题

Import Arabic font to React Material Theme

html

css

reactjs

react-material