CSS font-family 正確規(guī)范的選擇字體

時間：2023-09-14 23:30:01 | 來源：網站運營

時間：2023-09-14 23:30:01 來源：網站運營

CSS font-family 正確規(guī)范的選擇字體：

前言

一直對字體的選擇理解有些模糊，自己開始總結一下。自己也是剛開始學習，見諒！

最后 新年快樂！

一些參考文章

如何優(yōu)雅的選擇字體(font-family)

MDN font-family

W3C REcommendation font

一、簡介

我們需要使用font-family來進行字體的定義，在讀一些文章和官方文檔的時候，有兩個屬性可用一個是字體族名和通用字體族名。為了更好的理解，我用字體名或通用字體名代替，除了可以用字體名和通用字體名指代，還可以通過@font-face指定的可以下載的字體。

大致了解一下字體名和一般字體名。

字體名 : 就是字體的名字唄，每個字體都有一個名字。

通用字體名 :可以理解為字體名的分類，分為：帶襯線字體、 無襯線字體 、等寬字體 、草書字體 、特殊效果字體。因為無法保證用戶的計算機內已經安裝了指定的字體，也不能保證使用@font-face提供的字體能夠正確的下載，提供通用字體名，可以使得瀏覽七在無法獲得最佳字體的情況下使用一個相對接近的備選字體。

注：通用字體名都是關鍵字，所以不可以加引號，加了引號系統(tǒng)會識別為字體名。

二、 字體名

如何優(yōu)雅的選擇字體(font-family)

各個平臺的默認字體。

1. windows下

• 宋體（SimSun）：Win下大部分游覽器的默認字體，宋體在小字號下（如12px、14px）的顯示效果還可以接受，但是字號一大就非常糟糕了，所以使用的時候要注意。
• 微軟雅黑（"Microsoft Yahei"）：從 Vista 開始，微軟提供了這款新的字體，一款無襯線的黑體類字體，并且擁有 Regular、Bold 兩種粗細的字重，顯著提高了字體的顯示效果?，F在這款字體已經成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了 Light 這款更細的字重，對于喜歡細字體的設計、開發(fā)人員又多了一個新的選擇。
• Arial：Win平臺上默認的無襯線西文字體（為什么要說英文字體后面會解釋），有多種變體，顯示效果一般。
• Tahoma：十分常見的無襯線字體，被采用為Windows 2000、Windows XP、Windows Server 2003及Sega游戲主機Dreamcast等系統(tǒng)的預設字型，顯示效果比Arial要好。
• Verdana：無襯線字體，優(yōu)點在于它在小字上仍結構清晰端整、閱讀辨識容易。
• 其他：Windows 下默認字體列表：微軟官網、維基百科、Office字體
• 結論：微軟雅黑為Win平臺上最值得選擇的中文字體，但非游覽器默認，需要設置；西文字體的選擇以Arial、Tahoma等無襯線字體為主。

2、Mac OS下：

• 華文黑體（STHeiti）、華文細黑（STXihei）：屬于同一字體家族系列，OS X 10.6 之前的簡體中文系統(tǒng)界面默認字體，也是目前Chrome游覽器下的默認字體，有 Regular 和 Bold 兩個字重，顯示效果可以接受，華文細黑也曾是我最喜歡的字體之一。
• 黑體-簡（Heiti SC）：從 10.6 開始，黑體-簡代替華文黑體用作簡體中文系統(tǒng)界面默認字體，蘋果生態(tài)最常用的字體之一，包括iPhone、iPad等設備用的也是這款字體，顯示效果不錯，但是喇叭口設計遭人詬病。
• 冬青黑體（ Hiragino Sans GB ）：聽說又叫蘋果麗黑，日文字體Hiragino KakuGothic的簡體中文版，簡體中文有 常規(guī)體 和 粗體 兩種，冬青黑體是一款清新的專業(yè)印刷字體，小字號時足夠清晰，擁有很多人的追捧。
• Times New Roman：Mac平臺Safari下默認的字體，是最常見且廣為人知的西文襯線字體之一，眾多網頁瀏覽器和文字處理軟件都是用它作為默認字體。
• Helvetica、Helvetica Neue：一種被廣泛使用的傳奇般的西文字體（這貨還有專門的記錄片呢），在微軟使用山寨貨的Arial時，喬布斯卻花費重金獲得了Helvetica蘋果系統(tǒng)上的使用權，因此該字體也一直伴隨著蘋果用戶，是蘋果生態(tài)中最常用的西文字體。Helvetica Neue為Helvetica的改善版本，且增加了更多不同粗細與寬度的字形，共擁有51種字體版本，極大的滿足了日常的使用。
• 蘋方（PingFang SC）：在Mac OS X EL Capitan上，蘋果為中國用戶打造了一款全新中文字體--蘋方，去掉了為人詬病的喇叭口，整體造型看上去更加簡潔，字族共六枚字體：極細體、纖細體、細體、常規(guī)體、中黑體、中粗體。
• San Francisco：同樣是Mac OS X EL Capitan上最新發(fā)布的西文字體，感覺和Helvetica看上去差別不大，目前已經應用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系統(tǒng)上。
• 其他：Mac下默認字體列表：蘋果官網、維基百科
• 結論：目前蘋方和San Francisco為蘋果推出的最新字體，顯示效果也最為優(yōu)雅，但只有最新系統(tǒng)才能支持，而黑體-簡和Helvetica可以獲得更多系統(tǒng)版本支持，顯示效果也相差無幾，可以接受。

3、Android系統(tǒng)：

• Droid Sans、Droid Sans Fallback：Droid Sans為安卓系統(tǒng)中默認的西文字體，是一款人文主義無襯線字體，而Droid Sans Fallback則是包含漢字、日文假名、韓文的文字擴展支持。
• 結論：Droid Sans為默認的字體，并結合了中英文，無需單獨設置。

4、iOS系統(tǒng)：

• iOS系統(tǒng)的字體和Mac OS系統(tǒng)的字體相同，保證了Mac上的字體效果，iOS設備就沒有太大問題。

5、Linux：

• 文泉驛點陣宋體：類似宋體的襯線字體，一般不推薦使用。
• 文泉驛微米黑：幾乎是 Linux 社區(qū)現有的最佳簡體中文字體。

三、通用字體名

serif

帶襯線字體，筆畫結尾有特殊的裝飾線或襯線。 例如： Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.

sans-serif

無襯線字體，即筆畫結尾是平滑的字體。 例如， "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.

monospace

等寬字體，即字體中每個字寬度相同。 例如， "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.

cursive

草書字體。這種字體有的有連筆，有的還有特殊的斜體效果。因為一般這種字體都有一點連筆效果，所以會給人一種手寫的感覺。 例如， "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.

fantasy

Fantasy字體主要是那些具有特殊藝術效果的字體。 E.g. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

四、字體的規(guī)范書寫

我們首先總結一下，需要有哪些值得注意的事情：以及相應的解決方案。

1. 字體中英文名稱差異：字體名稱包括中文的，會又由于用戶的特殊色織導致中文生命失效。
   
   在命名的過程中，盡量使用英文字體名稱
   
2. 中英文字體內容差異,中文字體里包括英文字母和數字，但是不夠漂亮，而英文字體里，大多不包含中文。

設置字體的時候，先英后中，保證中英字體兼容到。

font-family: Arial,"Microsoft YaHei";

1. 不同的操作系統(tǒng)的默認字體差異
   根據自己的受眾不同，可以有不同的優(yōu)先權。
2. 瀏覽器版本差異，有些用戶使用舊版瀏覽器

可以加上舊版的操作系統(tǒng)的字體：mac中的"華文黑體","冬日黑體"，win下的黑體




最后還需要補充一個通用字體名，以防萬一。一般非襯線字體在顯示器中顯示效果會比較好，所以我們在最后添加sans-serif。




下面，從上面的文章中查看了一下大公司的常見寫法以供參考（2016.07查看)

小米

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;簡書

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

五、font-face規(guī)則

css背景下的font-face規(guī)則

首先@font face規(guī)則是語序網頁開發(fā)者為網頁指定在線字體?？梢韵龑τ脩綦娔X字體的依賴。

我們通過src屬性：

local()指定本地的字體。

url("")指定網頁字體。

當使用url的時候，會出現跨域的問題（cors policy）,由于站點服務器，沒有指定允許跨域請求，就導致了字體無法正確的加載問題。

如果是自己的服務器，可以將Access-Control-allow-origin 設置為 * 即可。

六、使用谷歌字體為網頁添加美觀字體

可以看一下這個文章

隨著@font-face的不斷流行，產生了許多新的字體格式圖集，成為網絡字體。Google Font API就是基于@font-face的特性開發(fā)出一套優(yōu)秀的網絡字體庫。（暫不支持中文字體，涼涼）

有三種方式來添加字體鏈接：

• Standard 方式：
  <``link rel``=``'stylesheet' type``=``'text/css'``href``=``'http://fonts.googleapis.com/css?family=Condiment'``>
• @import 方式：
  @import url(http://fonts.googleapis.com/css?family=Condiment);
• JavaScript 方式：
  （通過添加動態(tài)腳本并執(zhí)行來導入字體，代碼省略）