Web前端自制精简版的思源黑体ttf（728kb） - 包含2630个常用汉字+字母+数字+常用符号

Posted 2022-07-11 Rudon滨海渔村

效果图

 

为什么要用思源黑体

好看、免费可商用；

思源黑体_百度百科思源黑体是Adobe与Google历时三年在2014年7月宣布推出的一款开源字体，这是一款新的供桌面使用的开源 Pan-CJK 字体家族， 有七种字体粗细（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），完全支持繁体中文、简体中文、日文和韩文，这些全部都包含在一种字体中。它还包括来自我们颇受欢迎的 Source Sans字体家族的拉丁文、希腊文和西里尔文字形。https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098

为什么要精简字体ttf

大，常规大小的一套完整字体的文件10mb+ 在web中传输很慢。

但我们的项目（app、网站等）往往用不上，精简后可以覆盖项目涉及的文字即可。

10MB >> 900KB

材料准备

• 完整的一套思源黑体字体（72MB左右）
  http://www.yx12345.com/pcpd/7027/3445.html
• 压缩工具Fontmin （好像只有Win版）
  http://ecomfe.github.io/fontmin/#app

压缩步骤

1. 打开Fontmin
2. 拖动“SourceHanSansCN-Regular.ttf”到Fontmin
   
3. 输入常用的文字，可以这里的常用文字大全
   2500个常用中文字符 + 130常用中英文字符_Rudon滨海渔村的博客-CSDN博客参考自 《现代汉语常用字表》常用字(2500字)常用字符常见中文字符：英文常用字符： 英文、数字符号： 封面https://rudon.blog.csdn.net/article/details/125621736
   
    
4. 点击”生成“
   
5. 完成后，系统自动弹出输出的文件夹，里面就有ttf文件。
    
6. 或者下载我制作的精简版
   SourceHanSansCN-Regular-2630-chars.ttf思源黑体-中文简体-精简版，含2630常见字符-javascript文档类资源-CSDN下载免费、开源、可商用的思源黑体精简版2630字符-728kb。一般而言，字体库很大是因为包含了很多更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq285744011/85910599

 

 

 

CSS的font-weight 和思源黑体名字的关系

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Regular (Normal、Book、Roman)
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

更优的方案

font-spider（字蛛）减少ttf字体文件大小

font-spider（字蛛）减少ttf字体文件大小 - 知乎前言:前端在开发过程中经常会遇到需要使用ttf文件加载特殊字体如最近比较火的苹方字体，由于字体文件比较大有几M大小，这样会导致刚进入页面需要加载的东西变多导致白屏时间过长，如果你已经知道使用该字体样式的…https://zhuanlan.zhihu.com/p/368968429

封面