微信小程序引入外部字体后编译包过大的问题解决

Bertha 。 2021-07-26 00:45 1199阅读 0赞

# 微信小程序引入外部字体 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
上图中的营业时间字体样式为：DIN-Medium

百度后下载的字体格式为：DIN-Medium.otf  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
此字体文件的大小为28kb  
引入格式如下：

@font-face { 
    	font-family: DIN;
    	font-weight: normal;
    	font-style: normal;
    	src: url('../static/DIN-Medium.otf') format('OpenType');
    }

由于微信小程序每个包要求不能超过2M，如果超过2M则打包会提示报错。

解决方法就是将本地文件改为网络地址。

# 本地字体文件转为网络地址 #

可以通过阿里OSS对象存储来进行转化，我这边后台管理系统中有用到过OSS存储，所以直接通过转化后得出网络地址为：https://58d.oss-cn-hangzhou.aliyuncs.com/goods/DIN-Medium\_1611280158000.otf

还有一点需要注意，不同后缀文件对应的format格式不同：

.otf后缀对应的format格式为Opentype  
.ttf后缀对应的format格式为Truetype  
.svg后缀对应的format格式为Svg

如下的写法

@font-face { 
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff') format('woff'), /* Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.otf')  format('opentype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/9a9a0160e1ab4aacbcdb7f7e23bed403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/83aa3d4e21074467b9306bf42989052d.png