概述
之前我寫過一篇關于電子書生僻字處理的帖子參見這里,其中講了最為高大上的外掛字庫方法。這段時間有很多同好詢問制作生僻字外掛的方法,因此花點時間詳細講述一番。
預備知識
字庫調用順序
首先要了解電子書調取字庫的基本原理,我在之前的帖子參見這里已經講過fallback的一個機制,這里不再重復。對于閱讀器來說,css中設定的字體族決定了正文字體的顯示順序,例如:
p {
text-align: justify;
text-indent: 2em;
line-height:130%;
font-family: "DK-SONGTI", "方正宋三簡體", "方正書宋", "宋體", 明朝;
}
這里的字體族會首先調取多看閱讀自帶的方正書宋(DK-SONTI),如果遇到書宋顯示不了的字符,再依次查找local名稱為“方正宋三簡體”、“方正書宋”、“宋體”和明朝體,如果這些字體找不到或者都不包括此字符,則該處顯示為空白。
定義外掛字庫
同樣,css中可以定義外掛字庫,或稱第三方字體。多看中默認只有6中文2西文字體,如果想在電子書中嵌入你喜歡的字體,讓其在所有手機上顯示效果都一致,可以編寫下面的代碼:
@font-face {
font-family:"name1";
src:
local("localname1"),
url(../Fonts/xxx.ttf);
}
上述代碼中,font-family和src/url屬性是必須有的,font-family定義了該字體的定義名稱,一般用英文(如宋體的定義名稱是songti),調用時,只需css中為屬性聲明font-family即可。url是調用字體的路徑,多看支持ttf、otf格式的字體文件,不支持fon這種點陣格式,需要特別注意的是,字體名稱和后綴名都是大小寫敏感的,大小寫不一致會導致無法調用,建議全部改為小寫。
前面一段說了local名稱,這一段不是必須的,主要是增加可讀性,它是字體定義名稱的本地化譯名(比如songti的本地化譯名是“宋體”),調用時,聲明引號+本地化名稱也可以成功調用該字體。
預備的工具軟件
本教程牽扯的知識比較廣,先將需要的工具列舉在下面,大家自行百度,不提供破解或下載什么的。
- sigil 0.9.9 不用多說的基礎軟件;
- fontstudio 5.2.2 用來修改字體,也有mac版;
- 漢字寶典 3.4 查找生僻字,也可以直接在guoxuedashi.com上在線搜索,對于奇葩生僻字在線可搜索圖片字、手寫字,比app效率好些。
小試牛刀
首先打開fontstudio,界面是全英文,不過這個不影響我們使用,因為我們不打算造字去賣(商業造字我估計都不是用這個軟件),用的功能其實不多。
上一篇字體的帖子我們講過了多看中西文字體在混用時,人名分隔符的尷尬情況,全用書宋的話,顯示非英文的西文字母寬度不一,非常難看,而使用DK-SERIF(實際上是palatino字體)然后fallback到書宋的話,人名分隔符非常的窄,看著很不舒服。多看官方的解決辦法是遇到西文人名就用span標簽顯示DK-SERIF(可能是因為不能修改購買的字體),這樣顯示非常完美,只不過代碼頁面就非常臃腫,一堆的span,可讀性很差。我們現在通過修改字體的方式來完成下面三個目標:
- 人名分隔符全寬顯示;
- 西文全部用DK-SERIF顯示;
- 不用額外設置span,導致代碼頁面臃腫。
提取palatino字體
首先DK-SERIF就是Palatino字體,這個字體是win7系統自帶的(當然你愿意也可以用別的西文字體,只要顯示舒服就可以了):
在字體列表里面可以找到Palatino字體,這是個字體族,包括正常、斜體、粗體、粗斜體四個ttf。將其拖到桌面上就可以提取出來。
一般我們只使用正常字體一個ttf(名稱為pala.ttf)就可以了,因為另外三種可以用strong和em標簽畫出來。當然標簽是軟件繪制的,不如真正做出來的ttf。如果有完美主義可以把四個ttf都嵌入,反正每個ttf也就400k左右。
用fontstudio打開pala.ttf,界面如下:
注意,選中了一個字符,會顯示為藍色。這里選擇的00B7就是西文的人名間隔符(該字符屬于Opentype字符表必須的字符,所以它的name和unicode都不一樣,與中文字符不同)
選中了00B7之后,按下delete鍵,會彈出警告,確認刪除之后,可以看到該字符背景變灰了(并不刪除該字符,也說明了必須字符的特殊性,與中文字符不一樣)
點擊菜單的file-generate font,覆蓋現有字體即可。現在這個字體就是缺失間隔符的字體了。
在sigil中新建一個epub文件,在css中寫如下代碼:
@font-face {
font-family:"pala";
src:
local("pala"),
url(../Fonts/pala.ttf);
}
p {
text-align: justify;
text-indent: 2em;
line-height:130%;
margin: 0.6em 0em;
font-family: "pala", "DK-SONGTI", "方正宋三簡體", "方正書宋", "宋體", 明朝;
}
代碼會先從修改的palatino去調用西文字符,然后遇到間隔符會fallback到書宋。
這里注意,local("pala")這一行可以不寫,但是絕對不能寫成local("palatino"),因為palatino這個本地化名稱已經被多看定義到DK-SERIF了,如果你這樣寫,會導致多看優先使用內置的DK-SERIF來顯示,而不是用這個外掛的改版pala.ttf。
現在在html中寫一段西文字體看一下效果:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/main.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>法國漢學家埃德溫·沙畹(édouard Chavannes)</p>
</body>
</html>
多看中顯示效果如下:
上圖為書宋+palatino的顯示效果,下圖為更換為仿宋的效果。如果要讓仿宋也有完美效果,可以按上述流程再定義一個字體,也可以用仿宋+palatino的方式增加定義。
關于造生僻字的教程,留在下一貼再詳細闡述。