關於字體的一點研究

緣起

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 計算每個字符寬度從而得出總寬度

這個方法雖然麻煩一點，但是更加通用。

• 導入字體文件，獲得字符集

font = TTFont('./fonts/Verdana.ttf')
cmap = font['cmap']
t = cmap.getcmap(3, 1).cmap
s = font.getGlyphSet()
units_per_em = font['head'].unitsPerEm

上面的信息也可以從FontDrop的Data頁獲得。

• 獲得每個字符的寬度得出總長

def title_width(text, pointSize):
    total = 0
    for c in text:
        if ord(c) in t and t[ord(c)] in s:
            total += s[t[ord(c)]].width
        else:
            total += s['.notdef'].width
    total = total * float(pointSize) / units_per_em
    return total + padding

這裏涉及兩個名詞，design width和design unit(units_per_em)。

design width就是每個字符的設計寬度，對於等寬字體來説，每個字符的設計寬度都是一樣的。

等寬字體的i和m

非等寬字體的i和m

design unit可以理解為一個字符框(em square)，需要用多少個單位來表示，就是代碼裏units_per_em的數值。

• 最終定稿效果

o

以上參考

• Stackoverflow
• MDN
• Microsoft Typography

使用哪種繁體字體

有些繁體字在編輯器裏，會顯示成簡體。比如益 和 益 字，雖然編碼不同，但是在有些字體下會顯示成同一個字 -> 益，這時候就需要用專業的繁體字體將其區分開來。

後來發現一款叫ヒラギノ的字體，可以完美滿足需求。翻譯過來叫柊野，日本京都的一個地名。國內商標叫做冬青，同時也是MacOS内置字體。

"editor.fontFamily": "Hiragino Mincho ProN",

ヒラギノ明朝在綫測試

通過修改字體文件來實現反爬

有些網站內容，複製出來是亂碼，比如 -> 古籍整理发布平台

這就是通過修改字體文件實現的，前端代碼中嵌入了動態生成的字體文件。

用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

附 關於字體的一些小常識

碰巧看到一篇講字體的文章 -> 字体、排版简明入门，原文的圖片不見了，只好看這個轉載的。

附 測試字體下載

333KB

DejaVuSansMono.ttf

DejaVu Sans Mono

238KB

Verdana.ttf

Verdana

44KB

font.woff

古籍整理发布平台字體文件

辛丑秋分於上海