前言
我周圍的碼農當中,有很多是技術大神,卻常常被字體這種簡單的東西所困擾。
這篇文章,我們來講一講關於字體的常識。這些常識所涉及到的問題,有很強的可操作性,都是在實際業務中真實遇到的,都是需要開發同學和產品經理、設計師不斷重複溝通的。
字體真的只是“系統默認,無從解釋”這麼簡單嗎?是產品被忽悠?還是開發在敷衍?二者之間的博弈究竟誰能勝出?學會本文,你就能勝出。
字體分類
常見的字體可以分為兩類:襯線體、無襯線體。
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2Fbafdf308a41a9398b59e81053f29b9fe.jpg)
1、serif(襯線體):在字的筆劃開始、結束的地方有額外的裝飾,而且筆劃的粗細會有所不同。
常見的襯線體有:
•宋體、楷體•Times New Roman
2、sans-serif(無襯線體):筆劃粗細基本一致,只剩下主幹,造型簡明有力,起源也很晚。適用於標題、廣告等,識別性高。
常見的無襯線體有:
•黑體•Windows 平台默認的中文字體:微軟雅黑(Microsoft Yahei)•Windows 平台默認的英文字體:Arial•Mac & iOS 平台默認的中文字體:蘋方(PingFang SC)•Mac & iOS 平台默認的英文字體:San Francisco•Android 平台默認字體:Droid Sans
補充:
襯線體如今已經很少使用了,你所熟悉的“宋體”,也基本只能在紙質出版物中見到。而非襯線體更符合現代審美。
所以,在這裡溫馨提示各位:做PPT不要用宋體。如果你不知道用什麼字體,那就用系統的默認字體就好:Win 平台用微軟雅黑、Mac 平台用蘋方字體。
如果你發現一名設計師,在做海報設計、或者製圖的時候,使用了宋體,說明她一定是個外行。
字體族
CSS 中的字體族可以理解成是某一類字體。常見的字體族可以分為五類:
•serif:襯線體。 •sans-serif:無襯線體。 •monospace:等寬字體。每一個字母所佔的寬度是相同的。寫代碼的字體盡量用等寬字體。 •cursive:手寫字體。比如徐靜蕾手寫體。 •fantasy:夢幻字體。比如一些藝術字。
這五類字體族不代表某一個具體的字體,而是當你在 CSS 中指定字體族的時候,系統就有可能在字體族中找出一種字體來顯示。
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2F1f7fd5e022be5c489cdddb11b31a5025.jpg)
參考鏈接:serif,sans-serif,monospace,cursive和fantasy[1] span>
多字體 fallback
多字體 fallback 機制,可以理解成是字體的一種兜底機制。它意思是:當指定的字體找不到時,就繼續往後找。比如:
.div {
font-family: 'PingFang SC', 'Microsoft Yahei ', sans-serif;
}
上面這行CSS代碼的意思是:讓文字在iOS & Mac 操作系統上使用蘋果的“蘋方”字體,在Windows 系統上用微軟雅黑字體,如果這兩個字體都沒有,就隨便找一個無襯線體進行顯示。
font-weight:字體的加粗屬性
font-weight 字體加粗屬性,是讓前端和產品同學最迷茫的屬性。當你把做好的頁面拿給產品經理體驗時,產品經理首先關注到的就是字體的加粗問題。
我們先來看看 font-weight
有哪些屬性值。
在設置字體是否加粗時,屬性值既可以直接填寫 100 至 900 這樣的數字,也可以填寫normal
、bold
這樣的單詞。 normal
的值相當於 400,bold
的值相當於 700。如下:
關鍵問題是,很多人會發現,在Android 平台的瀏覽器中, font-weight 無論是設置300、400,還是500,文字的粗細都沒有任何變化,只有到700的時候才會加粗一下,感覺瀏覽器好像不支持這些數值,那搞這麼多檔位有用嗎?
實際上,所有這些數值關鍵字瀏覽器都是支持的,之所以沒有看到任何粗細的變化,要看你所使用的字體是否支持。
就拿“微軟雅黑”這個字體來舉例,它只支持兩種粗細,所以當你在代碼裡寫成500的時候,也會被認為是400。但是 Mac 上的“蘋方”字體,就支持至少六種粗細。
各大平台的字體加粗效果
一張圖,勝過千言萬語。解釋了這麼多,我們來看看各大操作系統的默認字體,加粗效果是什麼樣的。
以下截圖,都是我親自測試的結果,如果你打算讓別人看字體加粗效果,直接把下面的圖丟給他即可。像我這樣貼心的前端,恐怕不多見了。
1、iOS 平台的默認字體加粗效果:(蘋方字體)
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2Fd11e9f5222c87a57cdf05e546d91d6b9.jpg)
2、Android 平台(華為 P30 Pro)的默認字體加粗效果:(Droid Sans 字體)
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2F78754d93f7a087d553d28c9c3f7b22a5.jpg)
3、Mac 平台的默認字體加粗效果:(蘋方字體)
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2Fa32e4f5653768ae4464e21248ed55005.jpg)
4、Windows 平台的默認字體加粗效果:(微軟雅黑字體) span>
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2F98fe6e036c15d5eac4883e02a54005f7.jpg)
總結:(各大操作系統的默認字體加粗效果)
•Android 平台的 Droid Sans 字體,只有 >=700
才會加粗;而且加粗效果相同。 •Mac & iOS 平台的“蘋方”字體:500 和600,加粗效果是不同的;>=600
的加粗效果是相同的。 •Windows 平台的“微軟雅黑”字體:只有 >=600
才會加粗,而且加粗效果相同。
大部分字體不是免費的
你需要知道的是:你所了解的大部分字體,都不是免費的。換句話說,如果你想用第三方的付費字體從事商業活動,要先交錢獲得授權後,才可以正常使用。你在給公司做網頁時,就是一種商業行為。
免費字體是有的(比如思源黑體、阿里巴巴普惠體等),但是數量太少,而且不夠通用,我們做網頁時基本用不到。
所以,很多公司會專門購買一套商用字體庫、甚至是自己研發出一套字體,避免未來潛在的麻煩和糾紛。
給大家列舉一個常見的場景。很多時候,前端同學拿到的視覺稿是 psd 稿。在 PS 軟件裡,當我們用光標選中字體的時候,本來想看看它用的是什麼字體,結果出現了下面這一幕:
![null](https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/pptzixun/wd-wechat-image%2F25ca4d2b39d123cd277318e81d5ff35d.jpg)
看到這個FZLTZCHK
字體,別慌,馬上去網上查一下,發現它的中文名是< code >方正蘭亭字體系列。 基本可以肯定,這個字體也是要收費的。
此時,前端同學要馬上告訴產品或者設計師,這個字體不能免費使用,小心吃官司。
大多數情況下,網頁使用系統默認的字體就完全足夠。如果真的要使用特殊字體,要么就自主開發字體,要么就花錢夠買商業字體。比如我們 JD 公司就自主開發了一套商用字體JDZH
,僅供 JD 公司使用。
最後一段
字體雖小,見微知著。
2005年6月,蘋果公司創始人喬布斯在斯坦福大學的畢業典禮上做過一次演講,他說了這樣一段話:
里德學院在那時提供了全美最好的美術字課程。在這個大學裡面的每個海報,每個抽屜的標籤上面全都是漂亮的美術字。輟學後,我決定去學學怎樣寫出漂亮的美術字。
當時的我從來沒有想過過我所學的這些設計知識,會有什麼實際的用處。但是十年之後,我把這些設計和創意融入到了 Mac 電腦之中,這也使這台 Mac 成為了第一台擁有漂亮字體的電腦。
而當 Windows 系統藉鑑了Mac之後,大家都覺得,所有的電腦都應該是這個樣子。
那時的我無法把這些內容連接起來,但是,十年後再來回顧的時候,一切都變得豁然開朗。
References
[1]
serif,sans-serif,monospace,cursive和fantasy: http://www.ayqy.net/ blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/
文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/After%20so%20much%20code%20do%20you%20really%20understand%20fonts.html
评论列表(196条)
测试