自定义主题字体问题

[sgmcumt]

软件版本:

ant design of angular :1.0
angular: 6.0.3

问题描述:

在使用自定义主题时，根据官方文档，在初始化项目时使用 ng add ng-zorro-antd --theme 配置了自定义主题的相关文件，最新的 iconfont下载放在了项目中的src/assets/fonts文件夹中，下载的压缩包名称为iconfont-3.x.zip，解压后的文件有：

demo.css
demo_fontclass.html
demo_symbol.html
demo_unicode.html
iconfont.css
iconfont.eot
iconfont.js
iconfont.js
iconfont.ttf
iconfont.woff

在 ssrc/theme.less 文件中修改为:

@import "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less";
@icon-url               :  "src/assets/fonts/iconfont";

项目启动后：

错误提示

WARNING in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) postcss-url: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:7:2: Can't read file 'E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\src\assets\fonts\iconfont.eot', ignoring

WARNING in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) postcss-url: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:8:2: Can't read file 'E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\src\assets\fonts\iconfont.ttf', ignoring

WARNING in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) postcss-url: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:8:2: Can't read file 'E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\src\assets\fonts\iconfont.woff', ignoring

ERROR in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) CssSyntaxError: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:10:6: Can't resolve '../node_modules/ng-zorro-antd/src/style/core/src/assets/fonts/iconfont.woff' in 'E:\Test\PROJECT-NAME\src'

   8 |   src:
   9 |   /* chrome、firefox */
> 10 |   url('@{icon-url}.woff') format('woff'),
     |      ^
  11 |   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  12 |   url('@{icon-url}.ttf') format('truetype'),

ERROR in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) CssSyntaxError: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:12:6: Can't resolve '../node_modules/ng-zorro-antd/src/style/core/src/assets/fonts/iconfont.ttf' in 'E:\Test\PROJECT-NAME\src'

  10 |   url('@{icon-url}.woff') format('woff'),
  11 |   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
> 12 |   url('@{icon-url}.ttf') format('truetype'),
     |      ^
  13 |   /* iOS 4.1- */
  14 |   url('@{icon-url}.svg#iconfont') format('svg');

ERROR in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) CssSyntaxError: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:14:6: Can't resolve '../node_modules/ng-zorro-antd/src/style/core/src/assets/fonts/iconfont.svg' in 'E:\Test\PROJECT-NAME\src'

  12 |   url('@{icon-url}.ttf') format('truetype'),
  13 |   /* iOS 4.1- */
> 14 |   url('@{icon-url}.svg#iconfont') format('svg');
     |      ^
  15 | }
  16 |

ERROR in ./src/theme.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/theme.less)
(Emitted value instead of an instance of Error) CssSyntaxError: E:\Test\PROJECT-NAME\node_modules\ng-zorro-antd\src\style\core\iconfont.less:7:11: Can't resolve '../node_modules/ng-zorro-antd/src/style/core/src/assets/fonts/iconfont.eot' in 'E:\Test\PROJECT-NAME\src'

  5 | @font-face {
  6 |   font-family: 'anticon';
> 7 |   src: url('@{icon-url}.eot'); /* IE9*/
    |           ^
  8 |   src:
  9 |   /* chrome、firefox */

i ?wdm?: Failed to compile.

[ng-zorro-bot]

Hello @sgmcumt, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

[vthinkxie]

报错已经很明显了，你的相对路径写的有问题

[dyh333]

@sgmcumt 按照你放置font的路径，@icon-url应该写什么呢？ 请教下

[sgmcumt]

@sgmcumt 按照你放置font的路径，@icon-url应该写什么呢？ 请教下

在theme.less中写入@icon-url: "/assets/fonts/iconfont"；
如果还是报错的话，就改为@icon-url: "src/assets/fonts/iconfont"；这个是相对路径，和angular.json中的sourceroot路径相关。不建议更改mode_modules里面的东西。