移动端自定义字体font-face优化(替代方案)

提前声明:没有打广告!!

微信端要上个页面,使用到比较特殊的字体,所以只能用font-face来引入,但是,由于是个中文字体,所以体量特别大,如图:


移动端自定义字体font-face优化(替代方案)_第1张图片
竟然高达4.6mb

这样肯定不行啊,html、js总共不到几百k,而且字体加载完后,页面字体整体会duang的变一下。

一开始想用 字蛛(百度一下) 来压缩,但由于是中文字体,压缩完还是很大;

教程开始:

突然就在网上搜到了这个网站有字库,

注册>登录>找到你想要的字体,把js代码放到你的html里边


移动端自定义字体font-face优化(替代方案)_第2张图片
分为css、js调用两种方式。必须设置白名单

因为我用的Hbuild调试的,我把我本地的地址设置到白名单


移动端自定义字体font-face优化(替代方案)_第3张图片
设置好你网站域名

然后页面上线后发现,字体瞬间加载了。

原理不知道是怎么搞的,希望大神讲出来探讨下

只能说这只是一个临时解决方案,大家有没有更好的方法,希望大家分享一下

你可能感兴趣的:(移动端自定义字体font-face优化(替代方案))