設(shè)計(jì)字體時(shí)的一此小技巧

2024-01-17 17:43:00 來(lái)源/作者: / 己有:1人學(xué)習(xí)過(guò)

影響文字外觀的因素?zé)o外乎是字體,字號(hào),對(duì)齊方式,樣式,字間距,行高,行寬。

 

(一)字體 font-family

字體有:字庫(kù)字體和創(chuàng)意字。

字庫(kù)字體分:襯線(xiàn)字體和無(wú)襯線(xiàn)字體。

襯線(xiàn)字體有設(shè)計(jì)感和裝飾感,一般用于正文,對(duì)于英文字母筆畫(huà)末端的裝飾線(xiàn)有助于引導(dǎo)讀者的視線(xiàn)。

無(wú)襯線(xiàn)字體簡(jiǎn)約時(shí)尚,不帶感情色彩,一般用于標(biāo)題。

最受歡迎的字體:Georgia Arial Verdana Lucida Helvetica Times New Roman

網(wǎng)頁(yè)常用中文字體:微軟雅黑 黑體 宋體 <h1 style="font-family:Microsoft YaHei,SimHei,SimSun";>

IOS7系統(tǒng)的默認(rèn)字體:helvetica neue LT Heiti SC(中文字體)

安卓系統(tǒng)的默認(rèn)字體:DroidSansFallback ,效果類(lèi)似微軟雅黑

注:1我們只能控制輸入端,不能控制輸出,對(duì)于window系統(tǒng)下的IE6瀏覽器一般用戶(hù)只有宋體,且渲染出來(lái)很屎,樓主不知如何解決。

2字體抗鋸齒技術(shù):目前較實(shí)用的是CSS3中的font-smooth和@font-face新特性。

 

創(chuàng)意字:是在原有字庫(kù)字體的基礎(chǔ)上做變化,一般用于logo和海報(bào),在界面上以圖片的方式呈現(xiàn)。

方式:ps:在字體圖層上右鍵選擇“轉(zhuǎn)化為圖形”—點(diǎn)擊“轉(zhuǎn)換點(diǎn)工具”更改文字錨點(diǎn)。如下圖

讀書(shū)筆記之字體篇(原創(chuàng))

AI:點(diǎn)擊字體右鍵“創(chuàng)建輪廓”-更改錨點(diǎn),如下圖

讀書(shū)筆記之字體篇(原創(chuàng))

(二)字號(hào) font-size

利用字體大小制造對(duì)比是文字排版中常見(jiàn)的手法。表現(xiàn)視覺(jué)沖擊力,表現(xiàn)層級(jí)關(guān)系。

標(biāo)題字號(hào):一般為18~29px

正文字號(hào):一般為12~14px,13px最佳

標(biāo)題B和正文Z的最佳比例為:B=2Z

 

(三)對(duì)齊方式 text-align

原則:確保字行邊緣保持平整,不要擾亂讀者視線(xiàn)。

一般在CSS中無(wú)法自動(dòng)控制,需要手動(dòng)調(diào)整。