轉 web 開發字型

2021-09-08 10:09:11 字數 3685 閱讀 7155

而真正的挑戰在於中文字型,由於中文字型組成的特殊性導致其體積過於龐大,除了作業系統內建的字型之外,我們很難在**上應用其他的字型。在可選性很差的前提之下,如何正確的使用中文字型呢?

首先,以下的字型宣告都是很糟糕的,切忌使用:

font-family: "宋體";

font-family: "宋體", arial;

font-family: arial, "宋體", "微軟雅黑";

font-family: helvetica, arial, "華文細黑", "微軟雅黑";

...

接下來,我們一步一步來說明如何定義好的字型宣告。

很多開發者忽略了這一點:儘管我們在作業系統中常常看到宋體、微軟雅黑、華文細黑這樣的字型名稱,但實際上這只是字型的顯示名稱,而不是字型檔案的名稱。雖然說在大多數情況下直接使用顯示名稱也有效,但有些使用者卻工作在一些很極端的情況下,這會導致你的字型宣告無效。

比如說,使用者安裝了中文版的作業系統(這意味著系統有中文字型),但是卻切換到了以英文為主要語言——這種情況在那些希望加強英語鍛鍊的中文使用者當中是很常見的。這時候,作業系統很有可能無法按照顯示名稱找到正確的字型,所以我們要記住的第一件事情就是: 同時宣告中文字型的字型名稱(英文)和顯示名稱(中文),就像這樣:

font-family: simsun, "宋體";

font-family: "microsoft yahei", "微軟雅黑";

font-family: stxihei, "華文細黑", "microsoft yahei", "微軟雅黑";

記住這個事實:絕大部分中文字型裡包含英文本母(但是基本上都很醜),而英文本型裡不包含中文字元。

在網頁裡中/英文混排是很常見的,你絕對不會喜歡用中文字型顯示英文的效果,所以一定不要忘了先宣告英文本型:

font-family: georgia, simsun, "宋體";

font-family: arial, "microsoft yahei", "微軟雅黑";

font-family: georgia, simsun, "宋體", serif;

font-family: arial, "microsoft yahei", "微軟雅黑", sans-serif;

請注意:以上兩句宣告中的宋體和微軟雅黑不應該調換(儘管調換了也不會發生錯誤),這是因為從字型的式樣來看,微軟雅黑是非襯線的,而宋體才是襯線的。然而中文並不像英文那樣嚴格區分字型族,所以這一點在實際應用當中並不那麼重要。

作為乙個 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)是這兩個平台的預設中文字型。

到此為止,我們的字型宣告已經很不錯了——如果你不必考慮還在使用舊版本作業系統的使用者的話。遺憾地是,中文市場還有大量的使用者在使用 windows xp,宋體才是他們的主要中文字型。為了照顧到這些使用者,你可以為微軟雅黑增加乙個 fallback:

font-family: helvetica, tahoma, arial, stxihei, "華文細黑", heiti, "黑體", "microsoft yahei", "微軟雅黑", simsun, "宋體", sans-serif;
同樣地,你看到我們也為 mac 系統使用了黑體作為 fallback。

可以。有些英文本型的名稱多於兩個單詞,因為單詞中間有空格所以需要用 "" 包裹起來。中文字型很特別,按照英文的角度來看,像微軟雅黑究竟算是乙個詞還是四個詞呢?沒關係,好在中文字型的名稱裡沒有空格,所以 "" 不加也沒什麼大礙。

不過,誰都不能保證在任何作業系統/瀏覽器環境下都是如此,若是發生了奇怪的事情,不妨加上雙引號試試看。

你可能注意到了,在我們最後的字型宣告裡,華文細黑是預設字型(如果你的系統上安裝了宣告裡所有的中文字型的話),為什麼我要先宣告 mac 系統的字型呢?

font-family: helvetica, tahoma, arial, "microsoft yahei", "微軟雅黑", simsun, "宋體", stxihei, "華文細黑", heiti, "黑體", sans-serif;
但實際上卻並非如此。在中文字型的使用者群體裡,很大一部分擁有 mac 的人都同時安裝了 win 下常用的中文字型(這得歸功於 office for mac);但極少有 win 使用者去安裝 mac 下的中文字型。

因此,把 mac 用字型宣告在前面幾乎不會對 win 使用者產生什麼影響(因為他們壓根沒有!),倒是用來做 fallback 的黑體可能會取代微軟雅黑的位置,所以更保險的做法或許是這樣:

font-family: helvetica, tahoma, arial, stxihei, "華文細黑", "microsoft yahei", "微軟雅黑", simsun, "宋體", heiti, "黑體", sans-serif;
但無論如何請不要把微軟雅黑放在中文字型的最前面,作為史上最醜陋的中文字型之一,微軟雅黑實在不是什麼好的選擇,請照顧一下被 mac 寵壞的使用者吧,謝謝!(僅代表個人觀點)

btw,如果你也像我一樣不喜歡呆頭呆腦的微軟雅黑,那就乾脆把它刪了吧~

到此為止,雖然在我們的示例**裡沒有包含 linux 家族的例子,不過相信你也明白該怎麼做了吧。

鑑於一些人對微軟雅黑的排位產生異議,我不妨把上文的解決方案再延伸一步。事實是這樣子的:

把微軟雅黑放前面,會導致安裝了微軟雅黑字型的 mac 使用者不得不面對微軟雅黑,而在 mac 下比微軟雅黑優雅得多的中文字型比比皆是;

把 mac 下的字型放前面,也會對 windows 使用者造成差不多的困惑,畢竟微軟雅黑是 windows 平台下顯示效果最好的字型(目前為止);

1 和 2,哪一種出現的概率更大一些?我想這是乙個不需要計算就能知道的答案吧?

但是——的確還有另外兩個因素在糾結著:

不少 windows 使用者因為各種原因關閉了 cleartype,在此情形下微軟雅黑將會慘不忍睹!但是 mac 的字型也不是好的選擇,真正的勝出者?猜對了,宋體。

絕大部分 mac 下的黑體在 windows 下模糊不清,而微軟雅黑雖然醜但在 mac 下至少能看。(間接體現了兩個平台的字型渲染技術的差距)

所以在實踐中,真正接近「萬無一失」的方案需要考慮以下幾點:

利用 ua 判斷為不同的平台載入不一樣的字型宣告;

除非有特別的原因,否則盡量保持正文用宋體,標題和其他可以放大些的地方用微軟雅黑(針對 windows);

mac 下的冬青體效果極佳,但是該字型在 mac os x 10.6 以前是沒有的,所以謹慎考慮你的使用者群體,或者使用華文黑體系列做 fallback;

最後,我不想再和任何人爭論字型的優劣,本文的目的是介紹使用方法而不是字型選擇。「美」或「醜」向來都是很主觀的事情,只因為我是作者,所以我免不了會有傾向性,然而我也相信你自己會有正確的判斷,和我較真沒有任何實際意義。

轉)linux字型安裝

轉 linux字型安裝 google查了一下,果然windows下的ttf字型與gnome是相容的!我立即確定了我的方案 使用windows下的 微軟雅黑 體作為桌面和應用程式的預設字型!1.首先獲得一套 微軟雅黑 字型庫 google一下一大把 包含兩個檔案msyh.ttf 普通 msyhbd.t...

shell 字型顏色 《轉》

shell指令碼中echo顯示內容帶顏色顯示,echo顯示帶顏色,需要使用引數 e 格式如下 echo e 033 字背景顏色 文字顏色m字串 033 0m 例如 echo e 033 41 36m something here 033 0m 其中41的位置代表底色,36的位置是代表字的顏色 注 s...

web的字型處理

2.對於字型的引用 2.1檔案的目錄截圖 2.2 html部分 雖然今天溫度很低,天氣很冷,但是還是有太陽的,比較開心!綠蘿會開花嗎 為什麼感覺字型不全呢,一些字並沒有被轉化的樣子,這樣顯示的好蹩腳啊。像個壞了的花瓶啊。綠蘿會開花嗎 zsdjfhiafgsdhfg 為什麼感覺字型不全呢,一些字並沒有...