幾種常用的識(shí)別頁(yè)面字體方法

字體是各種信息類(lèi)畫(huà)面中至關(guān)重要的組成部分，日常工作中，設(shè)計(jì)師經(jīng)常被問(wèn)及到的一個(gè)問(wèn)題就是這是什么字體。

然而字體的種類(lèi)繁多，尤其是對(duì)國(guó)內(nèi)設(shè)計(jì)師們來(lái)說(shuō)不太熟悉的西文字體，體系更為龐雜，想一眼認(rèn)出所用字體是非常困難的。因此如何方便快速知道某個(gè)地方用的是什么字體就成為了設(shè)計(jì)師經(jīng)常需要做的事情。

下面就介紹幾種常用的識(shí)別方法或者是查詢思路，希望看過(guò)之后能有所啟發(fā)，以后就不用到處求人認(rèn)字了。

1. Web Font 網(wǎng)頁(yè)上的字體

網(wǎng)頁(yè)上的字體識(shí)別最為簡(jiǎn)單，我們只需要找到瀏覽器調(diào)用的字體文件的名稱就可以了，很多瀏覽器都提供了代碼檢查的模式來(lái)找到我們想要的字體信息，當(dāng)然這個(gè)功能一般來(lái)說(shuō)是提供給前端開(kāi)發(fā)使用，對(duì)于設(shè)計(jì)師們來(lái)說(shuō)不太友好。不過(guò)好在有各種 “哪里不會(huì)點(diǎn)哪里” 的瀏覽器插件，普通用戶也可以方便地知道網(wǎng)頁(yè)上使用的字體。

此類(lèi)瀏覽器插件很多，比如 WhatFont;FontFace Ninja;CSS Peeper。推薦挑剔的設(shè)計(jì)師們使用顏值更高的 CSS Peeper。

Csspeeper

△ 上圖為使用 WhatFont 檢索網(wǎng)頁(yè)頁(yè)面字體

簡(jiǎn)單介紹一下 CSS Peeper，它不僅能識(shí)別字體，還可以快速識(shí)別網(wǎng)頁(yè)中的各種元素的屬性，比如說(shuō)大小、色值甚至是圖片資源，強(qiáng)烈推薦網(wǎng)頁(yè)設(shè)計(jì)師們使用。

點(diǎn)擊 CSS Peeper 插件圖標(biāo)后可激活插件本體，之后就可以點(diǎn)擊網(wǎng)頁(yè)上的字體進(jìn)行識(shí)別。

需要注意的是，識(shí)別出來(lái)的字體名稱顯示在 FONT-FAMILY 內(nèi)，但是一般情況下這里顯示的是一大串字體的名稱，那么如何知道我們點(diǎn)擊的字體使用的是其中的哪一個(gè)呢?這里就需要介紹一下瀏覽器的字體調(diào)用規(guī)則。

瀏覽器調(diào)用字體文件的規(guī)則是根據(jù) FONT-FAMILY 部分字體名稱的排列順序來(lái)的，也就是說(shuō)優(yōu)先使用排在前面的字體。由于中文字體中包含了英文字母，因此通常情況下，瀏覽器會(huì)優(yōu)先使用中文字體中的字母來(lái)取代英文字體，而這往往是我們不希望看到的，所以一般都會(huì)把西文字體優(yōu)先排在 FONT-FAMILY 列表前面。

在了解了瀏覽器的字體調(diào)用規(guī)則后，再排除 FONT-FAMILY 列表中一些我們?nèi)粘Ｓ玫匠Ｒ?jiàn)字體，例如 “ PingFang SC(蘋(píng)方-簡(jiǎn))”、“ Helvetica Neue ”、“ STHeiti(華文黑體)”、“ Microsoft Yahei(微軟雅黑)”、“Simsun(宋體)”，最后得到你想要字體就非常簡(jiǎn)單了。

2. 圖片印刷物上的字體

這類(lèi)情況下除非是那些憑熟悉程度一眼可以認(rèn)出的字體，大部分的字體的識(shí)別都比較困難。雖然沒(méi)有一個(gè)好的解決辦法，但是這里也可以提供一些思路給大家。

2.1 使用字體搜索工具以圖辨字

設(shè)計(jì)師經(jīng)常碰到的一個(gè)場(chǎng)景是，搜集到一些很贊設(shè)計(jì)作品，進(jìn)而想知道圖片中所使用的字體。這種情況下我們就可以使用一些通過(guò)上傳圖片來(lái)進(jìn)行字體識(shí)別的服務(wù)。提供識(shí)別圖片中的西文字體的網(wǎng)站較多，有大名鼎鼎的在線商業(yè)字體銷(xiāo)售平臺(tái) MyFonts 旗下的 WhatTheFont;也有高質(zhì)量免費(fèi)西文字體下載網(wǎng)站 Font Squirrel 提供的Font Identifier 以及 WhatFontis 等。

WhatTheFont

識(shí)別中文字體可以使用求字體(最近老羅在堅(jiān)果 Pro 的發(fā)布會(huì)上也介紹到 Smartisan OS 增加了與求字體網(wǎng)合作的字體識(shí)別功能)。值得一提的是求字體宣稱不光可以識(shí)別中文還可以識(shí)別英、日韓、俄、書(shū)法等多種類(lèi)字體，大家有興趣可以都去嘗試看看。

這類(lèi)服務(wù)的使用方法以及一些小 Tips (例如在上傳圖片前對(duì)圖片進(jìn)行一定的處理以優(yōu)化識(shí)別效果)都大同小異，且在以上網(wǎng)站都有專門(mén)的介紹頁(yè)面，因此就不再贅述了。

當(dāng)然，這種方法因網(wǎng)站本身字體庫(kù)的大小以及識(shí)別技術(shù)上的限制，免不了會(huì)有識(shí)別結(jié)果不符的情況出現(xiàn)，但就現(xiàn)階段來(lái)看已是非常實(shí)用的工具了。

2.2 搜作者名字及出處

如果字體搜索工具不能提供滿意的結(jié)果，不妨試試以下補(bǔ)充方法。

首先要善用以圖搜圖(上傳圖片尋找相似圖片的功能)，推薦使用萬(wàn)能的 Google 圖片 或是老牌的 TinEye 。在搜索結(jié)果中尋找圖片的原始出處，如果是來(lái)自 Dribbble、Behance、Pinterest 等社區(qū)中的圖片，你就可以按圖索驥知道作者的一些簡(jiǎn)介信息、以及常用的樣式，哪怕直接留言私信詢問(wèn)也是可行的。

△ 上圖為以圖搜圖網(wǎng)站 TinEye

還有一個(gè)網(wǎng)站 Fonts In Use 專門(mén)收集各類(lèi)設(shè)計(jì)作品中的所使用的西文字體，不妨可以做為參考。

2.3 “人工智能”搜索法

如果嘗試完以上方法后仍然沒(méi)有找到你想要的結(jié)果，而恰好你又犯強(qiáng)迫癥了，那只有使出 “人工智能” 大法。當(dāng)然這里的 “人工智能” 的含義是指：動(dòng)手動(dòng)腦自己找!這種方法乍一看不太可行，然而只要你對(duì)各類(lèi)字體家族和概念足夠了解，還是可以辦到的。

因?yàn)樽煮w公司之間的并購(gòu)，獨(dú)立的小型字體工作室已所剩不多。各種字體大廠(例如方正、漢儀、造字工房)都提供了字體列表實(shí)時(shí)預(yù)覽你所自定義的文字的功能。在你知道了所查字體的大致分類(lèi)以及特性之后再使用這類(lèi)字體大廠提供的篩選條件來(lái)縮小尋找范圍，往往有時(shí)候會(huì)產(chǎn)生奇效。

△ 上圖為字體廠商漢儀所提供的字體檢索頁(yè)面

三、字體管理及推薦

1. 字體管理軟件 RightFont 及字體分類(lèi)

使用 Mac 的設(shè)計(jì)師們除了使用自帶的字體冊(cè)管理安裝字體以外，還可以使用各類(lèi)第三方廠商開(kāi)發(fā)的更好用的字體管理工具，例如這里要推薦的 RightFont。

RightFont 是一款輕量快速的字體管理工具，它可以做到快速預(yù)覽、同步、管理字體，甚至還自帶了多種開(kāi)源圖標(biāo)庫(kù)。軟件本身雖小，但可實(shí)現(xiàn)的功能卻很多，建議大家直接去官網(wǎng)訪問(wèn)了解更多的使用姿勢(shì)。

也可以看這兒：《設(shè)計(jì)師們!超好用的字體管理工具RightFont》

在對(duì)字體進(jìn)行管理的時(shí)候，最重要的是我們需要有一套自己的分類(lèi)規(guī)則，例如可以按“襯線類(lèi)(宋體等)”、“非襯線類(lèi)(黑體等)”來(lái)分，也可以按 “粗壯”、“纖細(xì)” 來(lái)分。分類(lèi)規(guī)則沒(méi)有優(yōu)劣之分，也沒(méi)有一個(gè)統(tǒng)一的的準(zhǔn)則，只要是能讓你加速工作流程就是合適的。

個(gè)人建議按照字體的 “性格” 特性來(lái)分類(lèi)。每種字體都有各自的 “性格” 特性，例如西文襯線體線條尾巴上的裝飾和柔滑的曲線，讓它看起來(lái)就像一位典雅端莊的英國(guó)淑女。因而西文襯線體很適合用在古典、優(yōu)雅、復(fù)古、女性等場(chǎng)景中。還例如非襯線體線條筆畫(huà)粗細(xì)統(tǒng)一且毫無(wú)任何修飾，它們可以低調(diào)自然得融入到畫(huà)面中，因此非襯線體有著現(xiàn)代、未來(lái)、簡(jiǎn)約的特性，適用于大部分尤其是在表達(dá)極簡(jiǎn)風(fēng)格的場(chǎng)景之中。

下圖中所展示的 Didot 字體就是一款現(xiàn)代襯線體，發(fā)絲襯線。特點(diǎn)是強(qiáng)烈的筆畫(huà)粗細(xì)對(duì)比和水平襯線，時(shí)尚，現(xiàn)代，優(yōu)美。

根據(jù)字體的 “性格” 和使用場(chǎng)景，可將電腦上的中文字體大致分為 “襯線類(lèi)(宋體等)”、“非襯線類(lèi)(黑體等)”、“綜藝美術(shù)”、“現(xiàn)代手寫(xiě)”、“古風(fēng)書(shū)法”、“趣味個(gè)性” 以及根據(jù)字體設(shè)計(jì)廠商來(lái)歸類(lèi)的 “造字工房” 、“文悅字型” 、“白舟書(shū)體” 等。 注意這些分類(lèi)是可以互相交叉的，例如有些字體既是 “現(xiàn)代手寫(xiě)” 又可以是 “趣味個(gè)性” 的。

每當(dāng)獲得一個(gè)新字體的時(shí)候，就可以根據(jù)這套規(guī)則進(jìn)行分類(lèi)處理，方便今后在每項(xiàng)設(shè)計(jì)的過(guò)程中，只需根據(jù)項(xiàng)目的情景需求尋找對(duì)應(yīng)分類(lèi)里的字體即可。

例如設(shè)計(jì)一個(gè)情感向的閃屏頁(yè)面，其中的字體就可以在 “襯線類(lèi)” 和 “現(xiàn)代手寫(xiě)” 這幾個(gè)列表面去尋找對(duì)比。再例如為具有未來(lái)感的科技項(xiàng)目設(shè)計(jì)標(biāo)題的時(shí)候，可以在 “非襯線類(lèi)” 和 “綜藝美術(shù)” 的列表里面尋找參考和想法。

2. 常用中文字體推薦

這里主要對(duì)字體分類(lèi)的使用場(chǎng)景做進(jìn)一步的說(shuō)明，以及推薦各分類(lèi)下常用的中文字體。

襯線類(lèi)(宋體)

主要以宋體和仿宋為主，這類(lèi)字體適用面廣泛，常用于書(shū)籍、雜志、海報(bào)印刷排版之中。宋體歷史悠久，字型方正且粗細(xì)有致，小字重清秀古典，大字重穩(wěn)重又不失優(yōu)雅。在表現(xiàn)年代、古典、傳統(tǒng)、復(fù)古、莊重、優(yōu)雅、女性、美食、質(zhì)感、情感化等許多情景需求下都適合使用。

推薦字體：思源宋體 Source Han Serif(開(kāi)源可商用)、方正新書(shū)宋簡(jiǎn)體(適用于正文)、方正清刻本悅宋。

非襯線類(lèi)(黑體)

主要以黑體為主，它是在現(xiàn)代印刷術(shù)傳入東方后依據(jù)西文無(wú)襯線體所創(chuàng)造的，最開(kāi)始只作為標(biāo)題使用，到今天成為用途最廣泛的基本字體。適用于幾乎所有的場(chǎng)景，尤其在各類(lèi) UI 界面中更是無(wú)處不在。

推薦字體：思源黑體 Source Han Sans(開(kāi)源可商用)、冬青黑體 Hiragino Sans GB、方正蘭亭黑。

綜藝美術(shù)

這一類(lèi)以綜藝體(新藝體)為主，字重基本偏大，字型多樣，因此常作為大標(biāo)題使用。主要適用于海報(bào)、電商、專題、活動(dòng)等場(chǎng)景中。

推薦字體：造字工房勁黑、造字工房版黑、造字工房力黑、造字工房凌黑。

現(xiàn)代手寫(xiě)

顧名思義，看起來(lái)像用鉛筆、水筆、圓珠筆等現(xiàn)代書(shū)寫(xiě)工具所寫(xiě)出來(lái)的字一樣。和另一類(lèi) “古風(fēng)書(shū)法” 所使用的鋼筆、毛筆的書(shū)法字體作為區(qū)分。主要適用于情感化、生活化、溝通交流、趣味、信件等場(chǎng)景中。

推薦字體：漢儀小麥體、漢儀喵魂體、造字工房丁丁、造字工房情書(shū)、851手寫(xiě)雜體(免費(fèi)可商用)、新蒂下午茶體(免費(fèi)非商用)。

古風(fēng)書(shū)法

篆書(shū)、隸書(shū)、草書(shū)、行書(shū)、楷書(shū)等各種古代書(shū)法字體都?xì)w類(lèi)于此。主要適用于中國(guó)風(fēng)、傳統(tǒng)、古典、文化等。在各類(lèi)電商、游戲場(chǎng)景中也常常出鏡，往往能夠吸引眼球。

推薦字體：白舟書(shū)體系列(日本)、康熙字典體、禹衛(wèi)書(shū)法行書(shū)、葉根友特愷、蘇新詩(shī)毛糙體簡(jiǎn)。

趣味個(gè)性

這一類(lèi)型比較雜，有童趣的、有浮夸的、有手寫(xiě)的、甚至有些不太好定義又覺(jué)得有點(diǎn)意思的字體也歸在里面。

推薦字體：漢儀柏京體、文悅新青年體、造字工房摩登、懐訪體 id-kaihou。

字體是設(shè)計(jì)中不可或缺的一部分，平時(shí)可以多看多搜集多分類(lèi)，養(yǎng)成管理字體的好習(xí)慣，以后看到喜歡的字體就不用到處問(wèn)人啦。

網(wǎng)站名稱：幾種常用的識(shí)別頁(yè)面字體方法
分享URL：http://bm7419.com/news/166879.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)