Umi: 如何加载自定义字体

[shirleyYing]

需要添加自定义字体。

@font-face {
  font-family: 'Dinpro';
  src: url('./assets/fonteditor/fonteditor.eot');
  src: url('./assets/fonteditor/fonteditor.eot?#iefix') format('embedded-opentype'), url('./assets/fonteditor/fonteditor.woff') format('woff'), url('./assets/fonteditor/fonteditor.ttf') format('truetype'), url('./assets/fonteditor/fonteditor.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

:global {
  body {
    font-family: "Dinpro", "Microsoft YaHei";
    font-size: @font-size-base;
    color: @font-color-base;
  }
}

报错

ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/fonteditor/fonteditor.eot'

路径没有问题， 像是缺少对应webpackloader。请问如何解决

[sorrycc]

Module not found 说明是找不到路径，不是 loader 问题。排查下，搞不定可以给复现仓库。

[sorrycc]

提供复现后再 reopen 。

[shuyancang]

引入方式如上，

文件路径如图。

提示路径无法引入。

[shirleyYing]

@shuyancang 确实是路径问题。字体文件要放在public文件夹下。比如 public/font,引用中要使用 /font/iconfont.eot

[lisf]

我这里项目启动就报错，引入了自定义字体

[lisf]

[lisf]

[lisf]

这里的global.less和index.less都引用了定义的自定义字体，是不是这个解析器有问题？

[lavamint]

这里的global.less和index.less都引用了定义的自定义字体，是不是这个解析器有问题？

遇到了一样的问题 在.umiirc.ts配置里修改webpack配置即可。

export default defineConfig({
  chainWebpack(config) {
    config.module
      .rule('otf')
      .test(/.otf$/)
      .use('file-loader')
      .loader('file-loader');
  },
});

@font-face {
  font-family: 'DinPro';
  src: url("../public/fonts/DINPro-Bold.otf");
}

[stelalae]

这里的global.less和index.less都引用了定义的自定义字体，是不是这个解析器有问题？

请问后面是如何解决的呢？我按照 @lavamint 的配置还是报错

[stelalae]

放入public里通过外部能引入otf，但是内部chainWebpack方式则不行。感觉是mini-css-extract-plugin/dist/loader.js是对otf文件没有识别到

[stelalae]

解决了，config/config.ts 文件的后缀名写错为tsx了，然后导致没有被umi自动识别到

[sophieChenyx]

解决了，config/config.ts 文件的后缀名写错为tsx了，然后导致没有被umi自动识别到

umirc 里面直接这么配置么 为什么我的还是不行

[stelalae]

@sophieChenyx 看@lavamint 的代码

[LeoWang1991]

chainWebpack(config) {
    config.module
      .rule('woff')
      .test(/.(woff|eot|woff2|ttf)$/)
      .use('file-loader')
      .loader('file-loader');
  }

在.umirc.js里配置的 好像还是不行 和字体格式有关么？请教下 谢谢

[LeoWang1991]

我这边是umijs2.x版本 后面解决方法是把 字体文件放在public根目录下（之前放在public/fonts 失效）就可以，比较奇怪。但确实生效了

[Verahuan]

如果以上都不行，可能是umi的缓存问题，删除.umi文件下的cache文件夹，重新运行