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

掃描二維碼訪問該頁面

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在线,欧美精品亚洲精品日韩传电影