網站字型使用技巧
網站字型使用技巧

掃描二維碼訪問該頁面

2019-7-17 15:2:0 網站建設 2

在網頁上應用字型是一項基本技術·╃│,同時也是一門藝術✘✘·。對於英文字型來說可選擇的範圍實在是太廣泛了·╃│,合理的使用它們將會為你的網站增色不少✘✘·。而真正的挑戰在於中文字型·╃│,由於中文字型組成的特殊性導致其體積過於龐大·╃│,除了作業系統內建的字型之外·╃│,我們很難在網站上應用其他的字型✘✘·。我們之前講過·╃│,設計良好的網頁對於業務的影響非常大·╃│,網頁字型的使用也不例外✘✘·。

網站字型的使用技巧

字型一直都是讓設計師和工程師頭疼的問題✘✘·。如果參與過產品的設計和開發·╃│,會發現經常有以下這種情況出現••☁·:
1. 對比視覺稿和實現出來的網頁·╃│,其他地方都很完美·╃│,就字型不給力;
2. 在 Mac 上很好看·╃│,在 Windows 上醜的要死;
3. iPhone 和 Android 又不同✘✘·。
為什麼會出現這樣的情況↟↟·╃·?真正的幕後黑手是系統✘✘·。

瀏覽器使用哪種字型取決於
1. 你的系統安裝了哪些字型(原來以為瀏覽器自己也會帶字型·╃│,這是錯誤的)
2. 工程師有沒有讓使用者去下載其他字型

所以網站上到底用什麼字型非常關鍵·╃│,涉及到的因素也非常多·╃│,主要取決於以下幾個方面
1. 你的產品要在哪個系統上執行
2. 你的產品是純英文還是中文英文甚至還有其他國家語言

網站最常用的到字型

我們先來看看網頁設計中文字型的使用
中易宋體••☁·:即通常被熟知為宋體│☁↟、新宋體的字型✘✘·。是Win最常見的字型·╃│,小字型點陣·╃│,大字型TrueType·╃│,但是大字型並不好看·╃│,所以最好別做標題✘✘·。
微軟雅黑••☁·:Vista之後新引入的字型·╃│,開啟Cleartype之後顯示效果不錯·╃│,不開Cleartype發虛✘✘·。
華文細黑••☁·:Mac下的預設中文✘✘·。
Droid Sans和衍生的WenQuanYi Microhei••☁·:Andriod中的中文·╃│,也是Linux絕大多數發行版本的預設中文·╃│,當然也有用WenQuanyi Zenhei的·╃│,不過比較少了✘✘·。

中文字型也有英文名稱
很多開發者忽略了這一點••☁·:儘管我們在作業系統中常常看到宋體│☁↟、微軟雅黑│☁↟、華文細黑這樣的字型名稱·╃│,但實際上這只是字型的顯示名稱·╃│,而不是字型檔案的名稱✘✘·。雖然說在大多數情況下直接使用顯示名稱也有效·╃│,但有些使用者卻工作在一些很極端的情況下·╃│,這會導致你的字型宣告無效✘✘·。
比如說·╃│,使用者安裝了中文版的作業系統(這意味著系統有中文字型)·╃│,但是卻切換到了以英文為主要語言——這種情況在那些希望加強英語鍛鍊的中文使用者當中是很常見的✘✘·。這時候·╃│,作業系統很有可能無法按照顯示名稱找到正確的字型·╃│,所以我們要記住的第一件事情就是••☁·: 同時宣告中文字型的字型名稱(英文)和顯示名稱(中文)·╃│,就像這樣••☁·:
Font-family: SimSun, “宋體”
Font-family: “Microsoft YaHei”, “微軟雅黑”
Font-family: STXihei, “華文細黑”, “Microsoft YaHei”, “微軟雅黑”

如果我們網站是英文網站·╃│,應該考慮如下字型
Helvetica: 被評為設計師最愛的字型·╃│,Realist風格·╃│,簡潔現代的線條·╃│,非常受到追捧✘✘·。在Mac下面被認為是最佳的網頁字型·╃│,在Windows下由於Hinting的原因顯示很糟糕✘✘·。
Arial: Helvetica的「克隆」·╃│,和Helvetica非常像·╃│,細節上比如R和G有小小差別✘✘·。如果字號太小·╃│,文字太多·╃│,看起來會有些累眼✘✘·。Win和Mac顯示都正常✘✘·。
Lucida Grande是Mac OS UI的標準字型·╃│,屬於humanist風格·╃│,稍微活潑一點✘✘·。Mac下的顯示要比Win下好✘✘·。
Verdana: 專門為了屏顯而設計的字型·╃│,humanist風格·╃│,在小字號下仍可以清楚顯示·╃│,但是字型細節缺失嚴重·╃│,最好別做標題✘✘·。
Tahoma: 也是humanist風格·╃│,字型和Verdana有點像·╃│,但是略窄一些·╃│,counter略小·╃│,曾經是Windows的標準字型·╃│,Mac 10.5之後預設也有安裝✘✘·。
Trebuchet MS: 為微軟設計的一個humanist風格字型·╃│,個人覺得個性太過突出·╃│,用得不好會不搭✘✘·。

永遠不要忘記宣告英文字型·╃│,並且英文字型應該在中文字型之前
記住這個事實••☁·:絕大部分中文字型裡包含英文字母(但是基本上都很醜)·╃│,而英文字型裡不包含中文字元✘✘·。
在網頁裡中/英文混排是很常見的·╃│,你絕對不會喜歡用中文字型顯示英文的效果·╃│,所以一定不要忘了先宣告英文字型••☁·:
Font-family: Georgia, SimSun, “宋體”
Font-family: Arial, “Microsoft YaHei”, “微軟雅黑”

最後別忘了照顧不同的作業系統
作為一個 Web 開發者·╃│,我們不僅在網站建設應注意瀏覽器的相容性·╃│,還要特別關注不同的作業系統·╃│,你理應對 Windows, Mac OS, Linux 家族等常用作業系統裡的系統字型有足夠的瞭解·╃│,特別是中文✘✘·。在這裡·╃│,我們假設目標網站要同時給予 windows 使用者和 mac 使用者最好的字型體驗·╃│,於是我們可以這樣宣告••☁·:
Font-family: Helvetica, Tahoma, Arial, STXihei, “華文細黑”, “Microsoft YaHei”, “微軟雅黑”, sans-serif
這句宣告都做到哪些事情呢↟↟·╃·?讓我們一一說明(括號內代表其對應的目標作業系統)••☁·:
對於英文字元·╃│,首先查詢Helvetica(Mac)·╃│,然後查詢Tahoma(Win)·╃│,都找不到就用Arial(Mac&Win);若是以上三者都缺失·╃│,則使用當前預設的sans-serif字型(作業系統或瀏覽器指定);
對於中文字型·╃│,我們已經瞭解其規則了✘✘·。華文細黑(Mac)·╃│,微軟雅黑(Win)是這兩個平臺的預設中文字型✘✘·。

網站常用字型

« 上一篇••☁·:

企業品牌展示型網站

下一篇 »••☁·:

網路營銷基礎入門

留言列表

ziti  2019/8/14 10:22:05 回覆該留言
font: "Helvetica Neue",Helvetica,Tahoma,Arial,STXihei,"華文細黑","Microsoft Yahei","微軟雅黑',"Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;

對於英文字元••☁·:
優先使用Helvetica Neue這款字型以保證最新版本Mac使用者的最佳體驗
如果是舊版Mac·╃│,則選擇系統首選的Helvetica字型
windows系統使用Tahoma字型·╃│,其次是Arial字型

對於中文字元••☁·:
Mac系統首選華文細黑·╃│,windonws系統首選微軟雅黑
然後選擇了冬青黑體-簡作為Mac上的替代方案
使用文泉驛微米黑兼顧了Linux系統

若是以上都缺失·╃│,則使用當前預設的sans-serif字型(作業系統或瀏覽器指定)
網站字型  2019/9/17 13:50:42 回覆該留言
Helvetica Neue字型是CNN網站使用的字型·╃│,非常適合英文站✘✘·。

發表留言

◎歡迎參與討論·╃│,請在這裡發表您的看法│☁↟、交流您的觀點✘✘·。

少妇人妻综合久久中文字幕,中国熟妇内谢69xxxxx,97在线,欧美精品亚洲精品日韩传电影