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

2024-04-07 00:18:29

效果图

为什么要用思源黑体

好看、免费可商用；

思源黑体_百度百科思源黑体是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

压缩步骤

打开Fontmin
拖动“SourceHanSansCN-Regular.ttf”到Fontmin
输入常用的文字，可以这里的常用文字大全
2500个常用中文字符 + 130常用中英文字符_Rudon滨海渔村的博客-CSDN博客参考自《现代汉语常用字表》常用字(2500字)常用字符常见中文字符：英文常用字符：英文、数字符号：封面https://rudon.blog.csdn.net/article/details/125621736
点击”生成“
完成后，系统自动弹出输出的文件夹，里面就有ttf文件。
或者下载我制作的精简版
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

封面

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

Web前端—— JQuery迷你版实现以及使用
JQuery迷你版实现以及使用 tiny_jquery.js var $ = function (selector) {var ele = document.querySelector(selecto ...
html页面包含头文件,Web前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签...
1.Head标签中包含的头文件标签的作用: (1)title标签:定义网页的标题. (2)meta标签:一般用于定义页面的特殊信息,例如页面的关键字.页面描述等 (3)link标签:用于引入外部样式 ...
数字开头的正则表达式_初学Web前端要注意什么正则表达式是怎么回事
初学Web前端要注意什么?正则表达式是怎么回事?很多初学Web前端的同学对于正则表达式的印象就是难学,全是各种各样的特殊符号,完全没有规律可循,根本不知道怎么下手.不过真正了解正则表达式之后,你会发现 ...
常用的Web前端技术有哪些？如何入门？
转自:微点阅读 https://www.weidianyuedu.com 随着互联网的高速发展以及技术的不断革新,Web前端工程师需要掌握的技术也有所变更.很多人想知道当前常用的Web前端技术有哪些 ...
web前端技术有哪些，小白必看
随着互联网的高速发展以及技术的不断革新,Web前端工程师需要掌握的技术也有所变更.很多人想知道当前常用的Web前端技术有哪些?如何快速掌握这些技术?接下来千锋重庆Web前端的小编就给大家介绍下.常用的 ...
自学和参加web前端培训班需要什么基础
web前端是目前IT行业中比较热门的一个分支.因为web前端入门相对比较简单,所以经常有学员想要了解能不能自学.自学和参加web前端培训班,都是可以考虑的学习方法,但是要结合自身的情况来看.接下来,w ...
【前端面试题】web前端面试全流程模拟（一面技术面）
根据自身面试经历以及网上资料,整理出了一套面试流程模拟适用于二线城市中小厂,应届生,以vue为主的web前端岗位以下题目查阅自网络,包含一些个人理解,理性阅读,有问题欢迎指出! 正文第一部分:自 ...
常用的Web前端技术有哪些？如何快速掌握？
随着互联网的高速发展以及技术的不断革新,Web前端工程师需要掌握的技术也有所变更.很多人想知道当前常用的Web前端技术有哪些?如何快速掌握这些技术?接下来我就给大家介绍下. 1.常用的Web前端技术有 ...
常用的Web前端技术有哪些，小白必看
随着互联网的高速发展以及技术的不断革新,Web前端工程师需要掌握的技术也有所变更.很多人想知道当前常用的Web前端技术有哪些?如何快速掌握这些技术?接下来千锋哈尔滨Web前端小编就给大家介绍下.常用的 ...
《Web前端工程师修炼之道（原书第4版）》——我该从哪里开始呢
本节书摘来自华章社区<Web前端工程师修炼之道(原书第4版)>一书中的我该从哪里开始呢,作者Jennifer Niederst Robbins,更多章节内容可以访问云栖社区"华章 ...

最新文章

热门文章