黑马程序员技术交流社区

标题: 【上海校区】网页中添加特殊字体解决方案 [打印本页]
作者: ljhsnmbb    时间: 2018-9-14 07:58
标题: 【上海校区】网页中添加特殊字体解决方案
本帖最后由 ljhsnmbb 于 2018-9-14 08:07 编辑

天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大，少则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
感兴趣的可以下载下来，运行一下试一试。【只是一个工具源码，运行起来，上传字体转换一下试试】

作者: 不二晨    时间: 2018-9-20 17:34
奈斯



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2