摘要:參考代碼地址四制作字體模板把自己最常接觸的漢字找出來之后,需要制作一套字體模板,這套字體模板的用處是讓手寫漢字后,順利的找到對(duì)應(yīng)的漢字,這里需要依靠第三方網(wǎng)站提供的一些功能。
一、背景
筆者以前在網(wǎng)上看到有民間高手制作字體的相關(guān)事跡,覺得把自己的手寫字用鍵盤敲出來是一件很有意思的事情,所以一直有時(shí)間想制作一套自己的手寫體,前幾天在網(wǎng)上搜索了一下制作字體的方法,發(fā)現(xiàn)技術(shù)上并不是太難,結(jié)合了自己PHP方面的開發(fā)經(jīng)驗(yàn),很快的做出了一套自己的手寫字體。
制作字體的流程大致是這樣,首先我們需要確定那些字體需要自己寫,確定了字體之后將這一批字利用工具做成一個(gè)模板,不過漢字的總量非常的多,搜索了一下大概在10萬字左右,這個(gè)工程量太大,因此我們需要找出一批屬于自己常用的字體(大概1700字左右),或者自己所常見到的字體,這個(gè)過程就需要用PHP來分析,分析出來之后再將其提取出來,做成模板。
在這篇文章當(dāng)中筆者將完整的記錄制作字體過程,其中會(huì)將用到的PHP代碼公布出來,方便其他讀者使用,也給自己留個(gè)備份。
二、操作概要提取常用漢字
制作字體模板
生成字體文件
三、提取常用漢字做一套字體的工作量是比較大的,因?yàn)闈h字?jǐn)?shù)量比較多,不過我們可以將我們常用的漢字提取出來,優(yōu)先將這寫漢字的做出來,后面不常用的字體空閑時(shí)再去累加,這里我們用到了PHP來輔助我們提取常用的漢字。
3.1 收集數(shù)據(jù)在網(wǎng)絡(luò)中有各種2000個(gè)常用漢字之類的doc文檔,但是每個(gè)人所用到的卻不一樣;因此我們需要收集一批自己經(jīng)常接觸的字體數(shù)據(jù),比如可以從自己的筆記、博客、聊天數(shù)據(jù)、通訊錄中提取;比如筆者便將以往的筆記、文章、通訊錄收集了起來,如下圖則是筆者過往的文章列表
我們將文章內(nèi)容復(fù)制到txt文件當(dāng)中,然后保存到某一個(gè)文件夾當(dāng)中,如下圖所示
3.2 去除雜項(xiàng)收集了文章之后,里面有很多雜項(xiàng),比如空格和換行,這些內(nèi)容我們并不需要,如下圖所示
此時(shí)可以通過正則表達(dá)式將不需要的內(nèi)容刪除,筆者使用的匹配非中文的正則表達(dá)式如下:
[^u4e00-u9fa5]
筆者平時(shí)開發(fā)習(xí)慣使用phpstorm這款I(lǐng)DE,因此這里教大家使用此IDE來刪除非中文字符;按住鍵盤 ctrl+r,替換文本內(nèi)容,然后將正則表達(dá)式放入查找項(xiàng)當(dāng)中,并且勾選regex,此時(shí)所有非漢字內(nèi)容會(huì)被選中,如下圖所示:
當(dāng)筆者點(diǎn)擊Replace all按鈕時(shí),變刪除了所有非中文字符,此時(shí)我們的內(nèi)容應(yīng)該只有一行內(nèi)容,如下圖所示
3.3 字體去重在整理好文字之后,我們現(xiàn)在需要對(duì)里面的內(nèi)容進(jìn)行去重,保證每一個(gè)漢字只保留一個(gè),因?yàn)槲覀冏煮w模板每個(gè)字只需要寫一次就可以;因此可以使用PHP對(duì)漢字進(jìn)行去重,代碼如下所示
當(dāng)這段代碼被執(zhí)行之后,會(huì)返回去重后的結(jié)果,筆者執(zhí)行結(jié)果如下圖:
從圖中可以看出,筆者已經(jīng)得到了一批去重后的文字
3.4 統(tǒng)計(jì)并排序去重之后已經(jīng)得到了一批獨(dú)一無二的漢字,但是字?jǐn)?shù)實(shí)在太多,達(dá)到了1730個(gè)漢字,可能一下寫不完,不過作為開發(fā)者當(dāng)然是要講究高效率的;所以可以通過PHP來進(jìn)行優(yōu)先級(jí)的計(jì)算,把最常用到字體排在前面,因此筆者需要寫一段PHP代碼。
3.4.1 漢字拆分?jǐn)?shù)組首先筆者將去重后的字符串拆分成數(shù)組,因?yàn)闈h字比較特殊,所以需要自定義一段代碼,參考代碼如下:
//把漢字拆分為數(shù)組 function ch2arr(string $str) { $length = mb_strlen($str, "utf-8"); $array = []; for ($i = 0; $i < $length; $i++) { $array[] = mb_substr($str, $i, 1, "utf-8"); } return $array; }3.4.1 排序后篩選下載筆者需要通過foreach來遍歷統(tǒng)計(jì)每個(gè)字出現(xiàn)的次數(shù),并且安裝倒序排序,如果limit大于0,還可以篩選重復(fù)次數(shù)大于0的漢字,代碼如下
function strSelect(string $string, string $word, $limit = 0) { //把字符串分割為數(shù)組 $cnList = ch2arr($string); foreach ($cnList as $val) { $result[$val] = substr_count($word, $val); } //重復(fù)高的出現(xiàn)在最前 arsort($result); //篩選字符串 $ret = ""; foreach ($result as $key => $val) { if ($val > $limit) { // $ret .= "$key:$val".PHP_EOL; //查看每個(gè)字重復(fù)的次數(shù) $ret .= $key; } } return $ret; }在前面兩個(gè)方法寫完之后,筆者只需要調(diào)用一行代碼即可得出最常用的一些字符,也可以篩選結(jié)果,調(diào)用代碼如下:
echo strSelect($str, $allStr, 1);代碼執(zhí)行之后,筆者將會(huì)安裝漢字出現(xiàn)的次數(shù)進(jìn)行排序,把最常見的字符排在前面,并且篩選出現(xiàn)次數(shù)大于1的才返回,返回結(jié)果如下圖所示:
從圖中可以看到字體順序已經(jīng)發(fā)生了很大變化,數(shù)量明顯少了很多。
參考代碼地址:
http://tuchuang.songboy.net/ziti/code.txt四、制作字體模板把自己最常接觸的漢字找出來之后,需要制作一套字體模板,這套字體模板的用處是讓手寫漢字后,順利的找到對(duì)應(yīng)的漢字,這里需要依靠第三方網(wǎng)站提供的一些功能。
4.1 字體文件編碼現(xiàn)在筆者將PHP計(jì)算的字符寫入到一個(gè)txt文件當(dāng)中,參考命令如下
php quchong.php > result.txt保存之后,還需要將它的編碼設(shè)置為UTF-8;操作步驟為:首先用windows的記事本打開,然后將文件另存為UTF-8編碼的文件,筆者用mac系統(tǒng)怎么也不行,使用windows很順利的就完成了,建議使用windows,如下圖所示
4.2 生成字體模板現(xiàn)在筆者需要將之前保存的漢字,用固定格式的模板展現(xiàn)出來,后期需要用此模板生成字體文件,這里需要用到一個(gè)網(wǎng)站來輔助,網(wǎng)站地址如下
http://www.flexifont.com/網(wǎng)站需要注冊(cè),注冊(cè)過程筆者這里將不做描述;在登陸之后點(diǎn)擊我的字體,可以看到當(dāng)前的字體模板,選擇自定義,參考下圖
點(diǎn)擊自定義之后,筆者能看到一個(gè)上傳txt文件的表單,如下圖所示
上傳完成之后,筆者回到列表當(dāng)中,就可以看到剛才創(chuàng)建的字體模板,如下圖所示
4.3 手寫字體筆者將剛才創(chuàng)建的模板下載到電腦當(dāng)中,并解壓該文件,解壓后的結(jié)果如下圖所示
這里一定要打開這些圖片確認(rèn)無誤,確認(rèn)這些字和上傳的字能對(duì)應(yīng)的上,如果里面的字明顯不是剛才上傳的,很有可能是你上傳文件的編碼不正確,筆者生成的字體模板如下圖所示
確認(rèn)無誤后需要將這幾張圖片打印下來,最好自己有打印機(jī),筆者之前買過一款惠普的1121打印機(jī),總價(jià)格不到200塊錢,建議各位讀者也買一個(gè),有打印機(jī)有時(shí)候真的很方便;
打印出來之后,就需要筆者將對(duì)應(yīng)文字意義手寫。
五、生成字體文件手寫字體是一個(gè)比較辛苦的過程,手寫完成之后還有一些步驟,如果讀者比較熟悉用手機(jī)編輯圖片,那么這一步很快就能完成,如果不熟悉,就詳細(xì)的看一下筆者的處理方法吧。
5.1 拍照首先需要將剛才手寫的文字進(jìn)行拍照,拍照的時(shí)候注意盡量平著拍,需要把4個(gè)黑邊拍進(jìn)去;筆者使用的是iPhone手機(jī),因此非常建議使用iPhone的讀者將相機(jī)的網(wǎng)格線功能打開,因?yàn)檫@樣就可以看出手機(jī)是否是平著拍的,在設(shè)置->相機(jī)->網(wǎng)格線,參考如下圖
設(shè)置好之后,筆者再次打開相機(jī),就能看到網(wǎng)格線,如下圖所示
中間的十字架如果是黃顏色的,說明筆者當(dāng)前是平著拍攝的,這樣拍照的時(shí)候圖片就不會(huì)那么斜了。
5.2 處理圖片雖然在拍照的時(shí)候已經(jīng)很用心的去拍攝,但拍的過程當(dāng)中難免有一些不滿意,這個(gè)時(shí)候可以用手機(jī)簡(jiǎn)單處理一下,筆者這里依然以iPhone手機(jī)為例
打開相冊(cè)查看圖片的右上方有一個(gè)編輯功能,如下圖所示
點(diǎn)擊編輯之后,在左下角有一個(gè)方塊按鈕,點(diǎn)擊之后可以對(duì)圖片進(jìn)行放大縮小的跳轉(zhuǎn),以及旋轉(zhuǎn),對(duì)齊等功能,讀者可以自己去操作一番,將圖片盡量調(diào)整到理想的狀態(tài)。
筆者處理后的效果如下圖所示
5.3 上傳并生成字體現(xiàn)在打開字體上傳頁面,把筆者已經(jīng)處理過的圖片上傳到手寫體網(wǎng)站當(dāng)中了,URL地址如下
http://www.flexifont.com/flexifont-chn/add_font/如下圖所示,手寫體站點(diǎn)的一些規(guī)則
需要記住別選擇錯(cuò)模板(筆者一開始沒選擇對(duì),還以為系統(tǒng)出問題了),然后把字體上傳,上傳完成之后,可以點(diǎn)擊查看隊(duì)列,看看當(dāng)前的字體處理狀態(tài),URL地址如下
http://www.flexifont.com/flexifont-chn/queuers/筆者上傳字體后,不到1分鐘便已經(jīng)處理完成,處理完成之后,可以在我的字體下方看到字體列表,如下圖所示
六、使用字體當(dāng)字體生成完成之后,筆者安裝字體文件即可
6.1 安裝字體安裝字體在mac下和widnows下都非常簡(jiǎn)單,首先看看mac下安裝方法,下載字體之后,可以直接雙擊字體文件,會(huì)看到如下圖
筆者直接點(diǎn)擊安裝字體就可以了
再說說windows下安裝,其實(shí)也只需要雙擊字體文件即可,然后點(diǎn)擊安裝,如下圖所示
不過筆者在電腦在安裝字體的時(shí)候出現(xiàn)了錯(cuò)誤,提示字體無效,于是我換了一種方式;右擊鼠標(biāo)->為所有用戶安裝 又好了,原因未知,如果讀者出現(xiàn)這種情況也可以試試。
6.2 在WPS中使用筆者很多時(shí)候都會(huì)使用到word文件,讀者喜歡用wps,那么如何在WPS中使用“輕松體”呢,其實(shí)非常簡(jiǎn)單,在隨便輸入一些文字之后,在上方選擇“輕松體”即可,效果如下圖所示
如果發(fā)現(xiàn)某個(gè)字體不是你手寫的風(fēng)格,那應(yīng)該是這個(gè)字體不再你的字體模板當(dāng)中,你可以生成一個(gè)新的模板,然后合并之前的字體即可。
6.3 補(bǔ)充在手寫體當(dāng)中默認(rèn)的模板也不錯(cuò),讀者也可以去嘗試一下,另外不僅僅漢字可以做手寫體,符號(hào)也可以。
作者:湯青松
微信:songboy8888
日期:2018年8月20號(hào)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/29271.html
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答,但會(huì)議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答,但會(huì)議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答,但會(huì)議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存,自定義圖標(biāo)字體為什么比較耗時(shí),且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請(qǐng)往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文,...
摘要:本項(xiàng)目發(fā)布在實(shí)驗(yàn)樓,分為四部分內(nèi)容前端頁面制作,驗(yàn)證碼制作,實(shí)現(xiàn)注冊(cè)登陸,功能完善。全部章節(jié)及代碼詳解可以在實(shí)驗(yàn)樓中在線完成實(shí)現(xiàn)用戶注冊(cè)登錄功能驗(yàn)證碼制作一實(shí)驗(yàn)簡(jiǎn)介本次實(shí)驗(yàn)將會(huì)帶領(lǐng)大家使用面向?qū)ο蟮乃枷敕庋b一個(gè)驗(yàn)證碼類。 項(xiàng)目簡(jiǎn)介:本課程通過使用 PHP 及 Web 前端技術(shù)實(shí)現(xiàn)一個(gè)網(wǎng)站注冊(cè)登錄入口頁面,學(xué)習(xí)并實(shí)踐 PHP 編程,GD庫,MySQL 擴(kuò)展,Bootstrap 響應(yīng)式布局...
閱讀 1272·2021-09-23 11:51
閱讀 1391·2021-09-04 16:45
閱讀 633·2019-08-30 15:54
閱讀 2085·2019-08-30 15:52
閱讀 1604·2019-08-30 11:17
閱讀 3107·2019-08-29 13:59
閱讀 2022·2019-08-28 18:09
閱讀 388·2019-08-26 12:15