将阿拉伯字体导入React Material Theme

我需要在我的React material UI主题中使用Noto Sans Arabic字体。这个主题工作得很好,覆盖也很好。

我已经尝试过 React Material UI文档 来导入我的字体,就像在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],
      },
    },

...

我希望字体能被导入,并能工作。

我有任何错误,并可以看到font-family.Noto Sans Arabic;在我的浏览器中。Noto Sans Arabic;在我的浏览器中。但它不工作

解决方案:

我是波斯人,我们的语言字体非常非常像阿拉伯字体。在我的项目中,我创建了一个单独的文件,我把它命名为 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 },
      },

现在一切都正常了 我希望我的配置能帮助你。

给TA打赏
共{{data.count}}人
人已打赏
未分类

需要一种方法来覆盖两个不同的pandas数据框中的列。

2022-9-13 14:40:23

未分类

在Expss表中使用用户定义的函数动态传递参数。

2022-9-13 14:40:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索