我是波斯人，我们的语言字体非常非常像阿拉伯字体。对于我的项目，我创建了一个单独的文件，并将其命名为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 },
},
现在一切正常。希望我的配置对你有帮助。