電子書外掛生僻字教程 #1

概述

之前我寫過一篇關于電子書生僻字處理的帖子參見這里,其中講了最為高大上的外掛字庫方法。這段時間有很多同好詢問制作生僻字外掛的方法,因此花點時間詳細講述一番。

預備知識

字庫調用順序

首先要了解電子書調取字庫的基本原理,我在之前的帖子參見這里已經講過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,界面是全英文,不過這個不影響我們使用,因為我們不打算造字去賣(商業造字我估計都不是用這個軟件),用的功能其實不多。


fontstudio的界面

上一篇字體的帖子我們講過了多看中西文字體在混用時,人名分隔符的尷尬情況,全用書宋的話,顯示非英文的西文字母寬度不一,非常難看,而使用DK-SERIF(實際上是palatino字體)然后fallback到書宋的話,人名分隔符非常的窄,看著很不舒服。多看官方的解決辦法是遇到西文人名就用span標簽顯示DK-SERIF(可能是因為不能修改購買的字體),這樣顯示非常完美,只不過代碼頁面就非常臃腫,一堆的span,可讀性很差。我們現在通過修改字體的方式來完成下面三個目標:

  1. 人名分隔符全寬顯示;
  2. 西文全部用DK-SERIF顯示;
  3. 不用額外設置span,導致代碼頁面臃腫。

提取palatino字體

首先DK-SERIF就是Palatino字體,這個字體是win7系統自帶的(當然你愿意也可以用別的西文字體,只要顯示舒服就可以了):


win7的字體預覽

在字體列表里面可以找到Palatino字體,這是個字體族,包括正常、斜體、粗體、粗斜體四個ttf。將其拖到桌面上就可以提取出來。


Palatino字體族

一般我們只使用正常字體一個ttf(名稱為pala.ttf)就可以了,因為另外三種可以用strong和em標簽畫出來。當然標簽是軟件繪制的,不如真正做出來的ttf。如果有完美主義可以把四個ttf都嵌入,反正每個ttf也就400k左右。
用fontstudio打開pala.ttf,界面如下:
打開palatino字體

注意,選中了一個字符,會顯示為藍色。這里選擇的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的方式增加定義。
關于造生僻字的教程,留在下一貼再詳細闡述。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,527評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內容

  • 概述 關于電子書的字體選擇,其實是一個很龐大的命題,講深了涉及字體設計,這里不扯那么遠,主要是從電子書觀感的角度來...
    hyx108閱讀 10,061評論 10 9
  • 一、概念 參考網頁字體Serif和Sans-serif的區別及瀏覽器字體的設置CSS Font知識整理總結 1.F...
    合肥黑閱讀 6,339評論 0 12
  • 大家都知道,在不同操作系統、不同游覽器里面默認顯示的字體是不一樣的,并且相同字體在不同操作系統里面渲染的效果也不盡...
    陳_宣閱讀 1,955評論 0 7
  • [轉] 如何優雅的選擇字體(font-family) 大家都知道,在不同操作系統、不同游覽器里面默認顯示的字體是不...
    Michaud閱讀 20,325評論 0 19
  • 先說一下我的視頻錄制的思路: 1.首先創建一個VC專門用來渲染和顯示視頻的控制器 2.在viewWillAppea...
    劉書亞的天堂之路閱讀 4,572評論 1 10