微信小程序中字体图标文件无法打包上传!

2019-08-20  本文已影响0人  Jure_joe

1、情况:引入IcoMoon App网站制作的图标在微信小程序中引入字体文件时,导致在编译器中能正常使用,但是上传后到正式环境后发现.woff格式的文件不能被打包上传,最终在真机环境中,字体图标不显示的情况,,如下图:

1566269167(1).jpg
字体图标文件:在fonts文件夹下····
image.png
代码示例:
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?f7lynr');
  src:  url('fonts/icomoon.eot?f7lynr#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?f7lynr') format('truetype'),
    url('fonts/icomoon.woff?f7lynr') format('woff'),
    url('fonts/icomoon.svg?f7lynr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mmmoon:before {
  content: "\e900";
}

2、解决方案:避免.woff、.ttf等格式的文件引用,使用简单的css @ font-face生成器https://transfonter.org/
转换该格式的文件。

用法:单击添加字体按钮,在计算机上选择TTF,OTF,WOFF,WOFF2或SVG字体,然后单击 转换。下载带有转换字体,css样式和演示页面的zip存档。就这样!然后打开css样式文件拷贝并替换原url中的地址引用。
如图:


1566271217(1).jpg

注意:该网站中的base64 encode选项要确保打开,想转哪个格式的文件导入即可!

原代码替换后的效果如下:

@font-face {
    font-family: 'icomoon';
    src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),
        url('icomoon.ttf') format('truetype'),
        url('icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mmmoon:before {
  content: "\e900";
}

如果文件经转换后内存占用较大的话还是采用将url的引用文件放在文件服务器上即可!

上一篇下一篇

猜你喜欢

热点阅读