Web应用引入中文字体问题

应用场景：在Web应用中使用非操作系统默认字体
问题：中文字体包一般都比较大，动辄10M左右，如果通过@font-face方式引入，会导致字体下载占用较多流量，影响web应用整体性能
解决思路：中文字体包一般包含大量不常用的复杂中文字体，一般使用不到，可以对中文字体包做精简处理，只保留常用字（3500常用字，包括繁体+字母+数字+标点符号）
具体方案：
1. 从现代汉语常用字表中整理出常用字2500个和次常用字1000个，以及数字、字母（大小写）、标点符号
2. 打开Fontmin软件，将整理的全部字符拷贝到左侧区域，将目标字体拖入指定位置，点击生成，稍等片刻即可生成精简后的目标字体文件（目前仅支持ttf字体格式）

参考资料：

《现代汉语常用字表》https://www.zdic.net/zd/zb/cc1/ https://www.zdic.net/zd/zb/cc2/
3500常用字+字母+数字+标点符号整理 https://blog.csdn.net/littlekard/article/details/116431928
在线繁体字转换器 https://www.aies.cn/
字体精简工具 http://ecomfe.github.io/fontmin/#banner
思源黑体下载 http://www.diyiziti.com/download/220/

Web应用引入中文字体问题相关推荐

字蛛（FontSpider，中文字体压缩器）网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
html 字体无效,解决css3引入中文字体无效问题（中文字体处理工具整合：字体转换、汉字去重复、字体剪裁）...
==============2017年12月04日更新=============== 之前内容中提到的字体剪裁文件:http://yun.baidu.com/share/link?shareid=41 ...
web网页引入自定义字体设置
新项目中设计用了一个自定义的字体,由于不熟悉,折腾了好大一圈,最终在同事的帮助下,顺利解决,记录一下,供有同样疑虑的小伙伴参考. 1.首先需要下载你需要的字体,此项目中用到的字体是思源黑体(lig ...
中文字体压缩器——字蛛
网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器字蛛通过分析本地 C ...
Font-Spider 一个神奇的网页中文字体工具，就是这么任性
文章摘要: 1>> font-spider 字体神奇由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf. 方正喵呜.ttf 我看 ...
css的中文名称是,CSS 中文字体的英文名称
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
html 中文字体文件太大,【字蛛】如何压缩体积大的中文字体包
FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压 ...
html如何调用特殊字体,怎样在页面中引入特殊字体呢？
让网页自由引入中文字体成为可能,可能有人会说直接引入字体包,在样式中设置font-family:"XXX"不就好了吗?超级简单呢.. 那我们一起看看字体包的大小(该实例中使用:喜鹊 ...
【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...

Web应用引入中文字体问题

Web应用引入中文字体问题相关推荐

最新文章

热门文章