網站字體使用技巧
網站字體使用技巧

掃描二維碼訪問該頁面

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

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

網站字體的使用技巧

字體一直都是讓設計師和工程師頭疼的問題。如果參與過產品的設計和開發,會發現經常有以下這種情況出現:
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網站使用的字體,非常適合英文站。

發表留言

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

温州麻将熟客app苹果版
快乐十分大玩家 废旧金属赚钱不 大众麻将赢2元话费赛 btk数字货币能赚钱吗 在夜店怎么赚钱快 迅雷赚钱宝pro怎么买 彩53彩票群 六肖中特在什么平台买 黑龙江十一选五基本走势图表 吉林时时彩票开奖号码查询 泰皇彩票网址 楚留香手游赚钱