• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

添加自定义字体打包不显示的问题

互联网 diligentman 2周前 (01-12) 11次浏览

添加自定义字体打包后 不显示的问题

1、目录如下:

添加自定义字体打包不显示的问题

2、iconfont.css代码片段如下:

.fontFamily{
  font-family: "fontFamily" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="el-icon-align"], [class*="el-icon-align"] {
  font-family:"fontFamily" !important;
  font-size: 12px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-align-center:before {
  content: "e654";
}

3、通过yarn打包后,效果如下:

添加自定义字体打包不显示的问题

 

这个问题找了好久,最后同事分析出来的结论是 css中的class名称与element-ui中的样式有冲突导致的。解决方法如下:

1、修改css中class命名,修改后的代码片段如下:

.iconFontFamily {
  font-family: "iconFontFamily" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-font-align"], [class*="icon-font-align"] {
  font-family:"iconFontFamily" !important;
  font-size: 12px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-font-align-center:before {
  content: "e654";
}

2、重新打包,效果如下:

添加自定义字体打包不显示的问题

最后还是要谢谢wujae!!

{{o.name}}


{{m.name}}


喜欢 (0)