無標題文件
網頁設計網頁設計之字體和頁面排版技巧 |
發佈者:SEO香港優化專家 - Web Design
|
|
網站設計
我們每天設計都在與字體打交道。但是我們一直沒有認真在意他們的存在。我們沒有很好地使用過他們,甚至濫用他們。這一切是因為我們不瞭解他們。字體作為排版的重要元素之一;在設計裡也是最深奧的一門學問之一。本文中,就與大家來一起探討一下這門深奧的學問。 字體的類型 英文字體(Typeface),分為幾種大類,這是在使用英文字體的時候必須知道的基本知識: 一、襯線體(Serif) 襯線(serif)就是筆畫邊緣的裝飾部分。下圖中紅色標注的地方就是襯線。
襯線設計的初衷是為了更清楚地標明筆觸的末端,提高辨識率,提高閱讀速度。另外,使用襯線字體會讓人感覺更加的正統。所以我們常見的英文書籍,特別是論文、小說,很多都是使用襯線體來完成正文的。 網頁設計中常用的襯線體有Times New Roman和Georgia。下圖左邊是12px的Times New Roman字體,右邊是12px的Georgia。
在中文裡,我們使用的細明體就是對應的襯線字體。 二、非襯線體/無襯線體(Sans-serif) 字體如果不帶襯線的話,那麼就稱為非襯線體或者無襯線體。下圖就是非襯線體。
網頁設計中常用的非襯線體相對就比較多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下圖從左到右依次是Arial、Verdana、Tahoma:
值得注意的是,雖然在書籍中,襯線字體被廣泛地應用,但是在互聯網上,襯線字體很少被使用。由於電腦屏幕分辨率與書籍不具可比性,所以正文10~12px的 襯線字體在電腦屏幕上是很難辨認的。下圖是沒有Cleartype時,10px的Verdana和10px的Times New Roman的對比。大家可以發現,左側的Verdana可以被很好的辨識。右側的Times New Roman辨認相當困難。
三、等寬字體(Monospace) 等寬字體事實上只針對西文字體。因為英文字母的寬度各不相同。例如i就要比m窄很多。編程時顯示代碼,如果字母不等寬那麼排版將很難看。我們在DOS命令行中,可以看到使用的是等寬字體。 編程要求的等寬字體有如下要求: 1、所有字符等寬; 2、簡潔、清晰、規範的字符形體; 3、支持ASCII碼為128以上的擴展字符集; 4、空白字符(ASCII: 0×20)與其他字符等寬; 5、“1”、“l”和“i”等三個字符易於區分; 6、“0”、“o”和“O”等三個字符易於區分; 7、雙引號、單引號的前後部分易於區分,最好是鏡像對稱的; 8、清晰的標點符號外形,尤其是大括符、圓括符和方括符。 常見的等寬字體有Courier,Courier New 四、手寫體(Calligraphy) 顧名思義,手寫體就是手寫風格的字體。有時我們也叫它書法字體。中文的書法字體大多都比較生硬。個人更推薦使用日文的書法字體。日文書法字體跟加柔美,更人性。但時使用日文書法字體缺點就是大都都是繁體,另外很多漢字會缺少。 五、符號體(Symbol) Windows裡最著名的符號體就是Webdings(記得以前還在Windows 95的時候蠻愛用的……)。下面是Webdings字體的幾個:
字體的樣式 常見的字體的樣式分為:正常Normal、粗體Bold、斜體Italic。 簡單來說,粗體就是字體會更加黑,更加“粗”。斜體就是將字軸微微傾斜。他們都是用於在篇幅內強調某段文字上。 在說到粗體的時候,我們很容易聯想到CSS裡的font-weight(字重)屬性。我們知道font-weight(字重)屬性值除了我們平常使用的 normal,bold外,還有bolder,lighter,100~900等屬性。那麼這個100~900的值是什麼呢?事實上,100~900並沒 有單位。優秀的字體會對不同的字重提供不同的設計。如果字體事先內置了不同等級的粗細程度的設計,那麼這幾個數值將分別對應每個等級。例如Zurich字 體,就包含了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六個字體。這樣一來,Zurich Light對應的就是100、200、300三個數值,Zurich Regular對應的就是400也就是“正常 normal”,Zurich Medium對應的是500,Zurich Bold也就是“粗體 bold”對應的是600、700,Zurich Black對應800,最後,Zurich UltraBlack對應的是900。 對於中文斜體,一般在網絡上是不使用的。因為中文筆畫繁多,使用了斜體將難以辨認。 網頁寄存 |
留言列表