网页中添加特殊字体解决方案

前言

今天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大,少则1-2M,一般是4-6M,大的字体十几兆的都有。加载在网页中会导致速度变得很慢,因此,你在网页中很少看到有用特殊字体的原因。今天主要总结一下网页中运用特殊字体的一些解决方案。

方案一:(针对有针对性的展示,死的文字)

目前市面上有很多字体压缩的方案,但是都是提供了具体的字体库,也就是你网页中用的文字,都在字体库里面,不在里面则网页中就不会展示。

Fontmin :http://ecomfe.github.io/fontmin/#banner

文蜘:http://font-spider.org/

这种方案有明显的缺点,只适合死的文字展示,不适合动态添加。

方案二:运用woff2网页字体

这个可以参考张鑫旭的一篇文章:https://www.zhangxinxu.com/wordpress/2018/07/known-woff2-mime-convert/

看了张鑫旭的文章之后,我用https://www.fontsquirrel.com/tools/webfont-generator 将我的ttf转换为woff2和woff

但是坑爹的问题来了,转换后的字体体积变得异常的小,我原来6m的字体,转换后才十几kb。我在网页中引用了转换后的字体,发现对中文无效,转换后只剩下英文了。

方案三:这是个传说

传说可以将字体转为js,然后通过加载js的方案来加载字体,该方式线上已经停止维护,地址是:http://cufon.shoqolate.com/generate/

但是他的github中还保留源代码https://github.com/sorccu/cufon

感兴趣的可以下载下来,运行一下试一试。【只是一个工具源码,运行起来,上传字体转换一下试试】

方案四:我的解决方案

上面的三种方案都不适合我,我要在类似一个编辑器的页面,不停的切换字体。字体是用户输入的,我不知道用户会输入什么,因此,上面的方案对我来说全部都不适合。

我的方案思路:

字体虽然比较大,但是我可以异步加载,就是初始化的时候不加载字体,等用户用到了再加载,加载时按需加载,不是全部加载,用到哪个字体,就加载哪个字体。然后先判断用户电脑里面安装了这个字体没有,安装了就用本机的,没有安装再用线上的。

下面上一下我的代码【vue版本】

html如下:

然后监听字体的变化:

修改字体的函数如下:

判断数组中有没有重复元素的函数(用正则):

增加到头部样式中的函数:

核心代码就在上面,另外附上判断用户电脑里面是否安装了某个字体的函数库:

语法:

小结

以上就是我总结的实现网页中添加特殊字体的集中方案,假如你有更好的方案,欢迎留言给我!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181008A0H77100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券