網(wǎng)站建設(shè)/網(wǎng)頁(yè)設(shè)計(jì)的空間問(wèn)題

2022-05-27    分類: 網(wǎng)站建設(shè)

網(wǎng)站建設(shè)/網(wǎng)頁(yè)設(shè)計(jì)的空間問(wèn)題
這里的空間指的是 letter-spacing 和 line-height,也就是字間距和行間距。首先,良好的行間距是排版最重要的地方,你可能不能自由選擇字體,字號(hào)的選擇也受諸多限制,但至少行間距的選擇是可以完全由自己控制的。
所謂的 line-height,指的是兩行字基線 (base-line) 之間的距離,什么是基線?下面圖中的紅線便是,對(duì)于漢字,則應(yīng)該就是底部的水平線。
在印刷排版中,習(xí)慣用 pt 來(lái)指定行高,比如所謂采用 12/14pt 排版,就是字號(hào) 12pt,行高 14pt;而 Web  中似乎習(xí)慣用百分比來(lái)設(shè)置,這個(gè)見(jiàn)仁見(jiàn)智,只要自己看得順眼就行。但必須注意的是,瀏覽器默認(rèn)的行高一定是不夠的,尤其對(duì)于希望瀏覽者長(zhǎng)時(shí)間閱讀的內(nèi)容,行高 - 字號(hào)至少要有 2pt 以上。更苛刻的排版學(xué)家通常推薦 3pt 以上,但畢竟 Web  上可以隨意一點(diǎn)。
但 letter-spacing 又是另一回事,我沒(méi)學(xué)過(guò)書(shū)法,漢字的間距不好多說(shuō),但英文字母的間距卻不應(yīng)該隨便調(diào)整,尤其不宜統(tǒng)一調(diào)整。因?yàn)閷?shí)際上,Type1、TrueType、OpenType 這些字體格式中都包含了一個(gè)叫做 kerning table 的東西,也就是字母間距的微調(diào)。為什么要做這種微調(diào)??jī)蓚€(gè)簡(jiǎn)單的例子是 AV 和 We,如果不做微調(diào),“A”和“V”之間的距離就會(huì)過(guò)寬,“e”也不會(huì)像我們平常書(shū)寫(xiě)的那樣和“W”契合得那么自然,下圖顯示了 Adobe Reader 中,使用 Sabon Next 字體時(shí)的 kerning 效果:
      大部分的 User Agent,當(dāng)然也包括你的瀏覽器,都會(huì)根據(jù)字體的 kerning table 自動(dòng)做這個(gè)微調(diào)工作,但倘若你使用 CSS 來(lái)修改 letter-spacing,這個(gè)工作就白費(fèi)工夫了。所以我才建議不要隨便調(diào)整 letter-spacing。比如 WordPress 原來(lái)的 Classi c Theme (Dave Shea 設(shè)計(jì),Matt 修改),就犯了這個(gè)毛病。

當(dāng)前文章:網(wǎng)站建設(shè)/網(wǎng)頁(yè)設(shè)計(jì)的空間問(wèn)題
文章位置:http://muchs.cn/news3/159753.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)

廣告

聲明:本網(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)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司