[TOC]
# web中文字體的幾個解決方案
用到了字體就必須了解:你所需的文字越多,字體文件的體積就越大。如果字體文件已經超過1M,幾乎就可以放棄了。
## 一. 收費云平臺
1. [有字庫](http://www.youziku.com/)
2. [http://yun.foundertype.com/](https://link.jianshu.com?t=http://yun.foundertype.com/) 方正字體云服務,根據官方網站的介紹:
網頁、APP因高質量字體而卓越,提供極致閱讀體驗。突破中文高質量字體需轉化為圖片的限制,兼顧體驗與SEO,提升關鍵字搜索排名。方正字體云服務的官方平臺方正是最大、最專業的中文字體提供商。
方正字體云服務大概提供有一百多種在線字體,但并沒有提供公開報價。
3. [https://www.justfont.com/](https://link.jianshu.com?t=https://www.justfont.com/) justfont,來自臺灣的線上中文字體服務,有明確的報價(新臺幣)。也有一百種字體左右提供選擇,注意要找那些簡繁字體均有的。
其實兩家服務都差不多,justfont在報價上比較透明,但支付方面恐怕比較麻煩。
那么,有沒有辦法讓字體運行在自己的服務器端,然后文件又比較小的方案呢?答案是有的。
## 二. 中文webfont的解決方案:字體子集化
中文三大家網絡公司都有提供字體子集化的服務。所謂字體子集化就是簡化字體,將不需要的字從字庫剔除,提取僅需要的文字另存為新的字體文件,字體當然就小了。
騰訊:[font-spider](https://link.jianshu.com?t=http://font-spider.org/)
百度:[font-min](https://link.jianshu.com?t=http://ecomfe.github.io/fontmin)
阿里巴巴:[icon-font](https://link.jianshu.com?t=http://iconfont.cn/webfont/#!/webfont/index) [font-carrier](https://link.jianshu.com?t=http://purplebamboo.github.io/font-carrier/)
## 三.打包成web 圖標字體
### 導入到IcoMoon
IcoMoon是一款免費的WEB APP,通過使用不同的設置,讓我們能夠創建出自定義的ICON字體。
**網站地址:** [http://icomoon.io/app/](https://link.jianshu.com?t=http://icomoon.io/app/)
IcoMoon本身也有海量的圖標,當然也包括Font Awesome。我非常喜歡Font Awesome的原因是:中文社區LOGO也包括其中,如QQ、微信、微博等。
點擊IcoMoon的左上角Import Icons,選擇剛剛保存的svg格式文件導入。
點擊左下角的Add Icons From Library... ,選擇Font Awesome,將需要的圖標單擊一下。選擇完成后,點擊Generate Font,生成字體后點擊Download。
# 使用sfntly中的sfnttool.jar提取中文字體
很給力的字體抽取工具
下載 [Font Converter](https://github.com/Jijun/font-converter-gui/)
運行:
```
java -jar C:\Users\USERNAME\Documents\font-converter-gui-***-jfx.jar
```
# 番外
[fonteditor 在線ttf字體編輯器](https://github.com/ecomfe/fonteditor)
# 轉為Base64
**將字體轉化為Base64編碼**
https://everythingfonts.com/
https://transfonter.org/
https://www.base64encode.org/
打開[https://transfonter.org/](https://transfonter.org/)網站,上傳成功后打開Base64 encode選項,點擊Convert,然后點擊Download便可以導出轉化后的字體。
# 總結
缺點是操作繁瑣,還有一個SEO的問題。對于小范圍的固定文案改動還是能適用的,但對于大篇幅文本字符改動或動態生成的文本內容,就比較雞肋了。
# Refs
[網頁特殊字體包壓縮與精簡(fontmini)](https://blog.csdn.net/bowen11233/article/details/82115043)
[Web 中文字體應用指南](https://ruby-china.org/topics/14005)
https://www.jianshu.com/p/6cf02ae8e190
- 前言
- 中文字體
- 移動Web適配方案
- !移動Web基礎!
- 詳解適配相關概念
- 移動開發之設計稿
- 移動適配方案(一)
- 移動適配方案(二)
- vw+rem 實現移動端布局
- 移動端適配之雪碧圖(sprite)背景圖片定位
- 適配 iPhoneX
- 前端開發實戰
- 打造自己的前端開發流程(Gulp)
- flexible.js案例講解
- viewport 與 flexible.js解讀
- 圖片與字體
- 踩過的坑
- 瀏覽器默認樣式
- 300ms點擊延遲和點擊穿透
- ios css
- CSS 常見問題
- Ionic v1混合開發
- Native App、Web App 、Hybrid App?
- ionic項目結構
- 混淆加密
- 解決問題
- cordova
- 環境配置
- 打包發布
- 問題
- 移動前端開發優化
- Web開發之抓包
- ===web移動開發資源===
- H5組件框架
- 調試集合
- 簡單h5調試
- whistle
- devtools-pro