我需要在我的React材質(zhì)UI主題中使用Noto Sans阿拉伯字體。 主題運行良好，覆蓋也運行良好。
我嘗試過像在react-material文檔中一樣用React Material UI文檔來導(dǎo)入我的字體，但是不起作用:
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],
},
},
...我期望字體將被導(dǎo)入和工作。
我有任何錯誤，可以看到字體系列:沒有阿拉伯語；在我的瀏覽器中。但是它不起作用
我是波斯人，我們的語言字體非常非常像阿拉伯字體。對于我的項目，我創(chuàng)建了一個單獨的文件，并將其命名為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 },
},現(xiàn)在一切都很好。希望我的配置對你有幫助。
您可以嘗試下面提到的一些方法來檢查您是否正確地編譯了代碼。
從你提到的導(dǎo)入字體的相關(guān)URL推斷，靜態(tài)文件夾和上面的文件目錄是兄弟。確保相關(guān)路徑與每個根文件夾相同。
此外，如果您使用webpack來捆綁您的代碼，請確保您包括ttf文件擴展名，并添加文件加載器模塊來在編譯期間處理它。
例如
{
test: /\.(png|jpg|gif|svg|ttf|eot|woff)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
},有幾個可能性，但我建議嘗試通過你的index.css文件加載相同的字體，并檢查結(jié)果，可能是你提到的位置不正確或字體不存在。
此外，一個文件加載器或插件可能需要用網(wǎng)絡(luò)包閱讀:https://chriscourses.com/blog/loading-fonts-webpack渲染字體