關於字體的一點研究
緣起
github上有個progress bar的小工具挺好用的，就是文字顯示有點小問題。
x 
因爲原作沒有計算字體寬度，所以title的顯示總是不能居中。另外中文顯示也會溢出，看著很是難受，於是就改了改，並記錄下研究過程，留作將來。
嘗試過的兩種方法
方法1 使用等寬字體
這是個偷懶的方法，不用計算每個字體的寬度。
我打算用DejaVu Sans Mono，但瀏覽器(Chrome)默認不支持這個字體，所以要讓Chrome顯示這個字體的話，需要在服務端添加然後客戶端下載引用。(後來經過測試，Windows上直接安裝某個字體後，Chrome字體列表裏也會出現這個字體。)
其实用Chrome默認支持的等寬字體，比如Consolas就可以了，但我就是想用DejaVu Sans Mono，下面是實現步驟。
服務端代碼提供字體下載接口
@app.route("/fonts/<filename>")
def download(filename):
return send_from_directory(directory="fonts", filename=filename)在svg文件里引用字體
<!-- 用css定義一個字體 -->
<style type="text/css">
@font-face {
font-family: "DejaVu Sans Mono";
src: local("DejaVu Sans Mono"),
url("../fonts/DejaVuSansMono.ttf");
}
</style>
<!-- 引用之前定義的字體 -->
<g fill="#fff" text-anchor="left" font-family="DejaVu Sans Mono" font-size="11">測試效果
方法2 計算每個字符寬度從而得出總寬度
這個方法雖然麻煩一點，但是更加通用。
導入字體文件，獲得字符集
上面的信息也可以從FontDrop的Data頁獲得。
獲得每個字符的寬度得出總長
這裏涉及兩個名詞，design width和design unit(units_per_em)。
design width就是每個字符的設計寬度，對於等寬字體來説，每個字符的設計寬度都是一樣的。
design unit可以理解為一個字符框(em square)，需要用多少個單位來表示，就是代碼裏units_per_em的數值。
最終定稿效果
o 
以上參考
使用哪種繁體字體
有些繁體字在編輯器裏，會顯示成簡體。比如益 和 益 字，雖然編碼不同，但是在有些字體下會顯示成同一個字 -> 益，這時候就需要用專業的繁體字體將其區分開來。
後來發現一款叫ヒラギノ的字體，可以完美滿足需求。翻譯過來叫柊野，日本京都的一個地名。國內商標叫做冬青，同時也是MacOS内置字體。
ヒラギノ明朝在綫測試
通過修改字體文件來實現反爬
有些網站內容，複製出來是亂碼，比如 -> 古籍整理发布平台
這就是通過修改字體文件實現的，前端代碼中嵌入了動態生成的字體文件。
用FontDrop打開其中一個字體文件，就能看到其中字體跟unicode(亂碼)的映射關係。
比如乾字，字體裡設置的unicode是U+9133，也就是鄳字。
然而乾字真正的unicode卻是U+4E7E，相當於通過篡改字符與unicode的對應關係，從而實現反爬。
附 通過禁用js破解禁止複製
除了上述通過修改字體文件從而禁止用戶複製文本内容之外，還有些網站是通過js實現的，比如下面兩個網站：
https://www.uta-net.com/song/272129/
http://fate-point.com/index.php/baziarticle-001
有個討巧的破解方法，Chrome Developer Tools -> Settings -> Preferences -> Debugger -> Disable JavaScript
附 關於字體的一些小常識
碰巧看到一篇講字體的文章 -> 字体、排版简明入门，原文的圖片不見了，只好看這個轉載的。
附 測試字體下載
辛丑秋分於上海
最后更新于