Html 导入阿拉伯语字体以反映材质主题

我需要在我的界面主题中使用Noto Sans阿拉伯语字体。 主题运行良好，覆盖也运行良好

我已尝试导入我的字体，如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阿拉伯语；在我的浏览器中。但是它不起作用

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

从您提到的导入字体的相关URL推断出

静态

文件夹和上面的文件目录是同级。确保相关路径与每个

root

文件夹相同

此外，如果您正在使用

webpack

捆绑代码，请确保包含

ttf

文件扩展名，并添加

文件加载程序

模块，以便在打包过程中处理它

e、 g

---

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

---

另外，可能需要一个文件加载器或插件来呈现网页上显示的字体：

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

globalStyles.js

：

从'@material ui/core'导入{createStyles}；
从“../app/assets/font/iranyekanwebregular.ttf”导入yekanRegularTtf；
从“../app/assets/font/iranyekanwebregular.woff”导入yekanRegularWoff；
从“../app/assets/font/iranyekanwebregular.woff2”导入yekanRegularWoff2；
从“../app/assets/font/iranyekanwebbold.ttf”导入yekanBoldTtf；
从“../app/assets/font/iranyekanwebbold.woff”导入yekanBoldWoff；
从“../app/assets/font/iranyekanwebbold.woff2”导入yekanBoldWoff2；
const globalStyles=（{间距、排版、颜色}）=>
创建样式({
“@global”：{
“@font-face”：[
{
fontFamily：“伊朗人”，
fontStyle:'正常'，
体重：400，
src:`url（${yekanRegularWoff2}）格式（'woff2'）`，
回退：{
src:[
`url（${yekanRegularWoff}）`，
`url（${yekanRegularTtf}）格式（'truetype'）`，
],
},
},
{
fontFamily：“伊朗人”，
fontStyle:'正常'，
重量：700，
src:`url（${yekanBoldWoff2}）格式（'woff2'）`，
回退：{
src:[
`url（${yekanBoldWoff}）`，
`url（${yekanBoldTtf}）格式（'truetype'）`，
],
},
},
],
html:{
线宽：“1.5”，
WebKittextSizedJust:“100%”，
},
'*': {
过渡：“不透明度1s立方贝塞尔（0.4,0,0.2,1）”，
fontFamily:“'IRANYekan'，无衬线，Arial”，
框大小：“边框框”，
“&：之后，&：之前”：{
fontFamily:“'IRANYekan'，无衬线，Arial”，
框大小：“边框框”，
},
“&[type=“checkbox”]，&[type=“radio”]：{
框大小：“边框框”，
填充：“0”，
},
“&[type=“number”]”：{
“&:：-webkit内部旋转按钮，&:：-webkit外部旋转按钮”：{
高度：“自动”，
},
},
“&[type=“search”]”：{
WebkitAppearance:'textfield'，
大纲图偏移：-2，
“&:：-webkit搜索装饰”：{
WebKit外观：“无”，
},
},
“&[隐藏]”：{
显示：“无”，
},
“&:：-webkit文件上载按钮”：{
WebKit外观：“按钮”，
字体：“继承”，
},
},
正文：{
fontFamily:“'IRANYekan'，无衬线，Arial”，
线宽：“1.38”，
保证金：0，
},
“#反应视图”：{}，
‘h1、h2、h3、h4、h5、h6’：{
边距：[[0,0，间距.边距]]，
线宽：“1.3”，
字母间距：0，
textTransform:“无”，
颜色：颜色，黑色，
显示：“块”，
fontFamily:“'IRANYekan'，无衬线，Arial”，
},
h1：{
fontSize:Platography.fontSize*1.4，
},
h2:{
fontSize:Platography.fontSize*1.2，
},
h3：{
fontSize:Platography.fontSize，
},
h4：{
fontSize:Platography.fontSize，
},
h5：{
fontSize:Platography.fontSize，
},
h6：{
fontSize:Platography.fontSize，
},
p:{
显示：“块”，
边距：[[0,0，间距.边距]]，
},
主要内容：{
显示：“块”，
},
人力资源：{
框大小：“内容框”，
高度:0,，
溢出：“可见”，
},
前：{
fontSize:'1em'，
},
a:{
背景色：“透明”，
text装饰：“无”，
},
“b，斯特朗”{
fontWeight:'粗体'，
},
小型：{
fontSize:'80%'，
},
img：{
边框样式：“无”，
},
按钮：{
WebKit外观：“按钮”，
},
输入：{
溢出：“可见”，
},
'按钮，输入，选项组，选择，文本区域'：{
fontFamily:“继承”，
fontSize:“100%”，
线宽：“1.15”，
保证金：0，
},
'按钮，输入'：{
溢出：“可见”，
},
'按钮，选择'：{
textTransform:“无”，
},
文本区域：{
溢出：“自动”，
},
'按钮，[type=“button”]，[type=“reset”]，[type=“submit”]：{
WebKit外观：“按钮”，
“&:：-moz焦点内部”：{
边框样式：“无”，
填充：“0”，
},
“&：-moz focusring”：{
大纲：[[1，'点'，'按钮文字']]，
},
},
字段集：{
填充：“0.35em 0.75em 0.625em”，
},
传奇
{
  test: /\.(png|jpg|gif|svg|ttf|eot|woff)$/,
  loader: 'file-loader',
  query: {
    name: '[name].[ext]?[hash]'
  }
},