效果圖

?

為什么要用思源黑體

好看、免費可商用；

思源黑體_百度百科思源黑體是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个常用汉字+字母+数字+常用符号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。