參考
網(wǎng)頁字體Serif和Sans-serif的區(qū)別及瀏覽器字體的設置
CSS Font知識整理總結

1.Font-Family

font-family 規(guī)定元素的字體系列。font-family 可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優(yōu)先表。瀏覽器會使用它可識別的第一個值。

font-family: Times New Roman,"open-sans","幼圓",sans-serif
當瀏覽器顯示一個字符時，會首先從Times New Roman中尋找這個字符，如果找到就用Times New Roman字體來顯示這個字符。如果沒找到就去open-sans中尋找，如果找到就用該字體顯示字符，沒找到就會依次尋找下去，如果在通用字體庫sans-serif中也沒有找到就會用一個缺字符代替（通常是小方框）。

有兩種類型的字體系列名稱：

• 指定的系列名稱：具體字體的名稱，比如："Microsoft Yahei"、"Helvetica Neue"、"arial"、"宋體"
• 通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"(書寫體，相當于印刷學中的手寫體)、"fantasy"(夢幻體，相當于印刷學中的裝飾體)、"monospace"(等寬字體，是指每個字符寬度都一致的字體)
  注意：使用某種特定的字體系列（Geneva）完全取決于用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為后路。

font-family中有時候字體加引號有時候不加引號。區(qū)別在于對字體名稱中空格的處理不同。不加引號時，忽略字體左右兩端的空白字符，單詞之間的空白字符被解釋為一個空白字符。比如font-family: Times New Roman , sans-serif。被解釋為font-family:Times New Roman,sans-serif。加引號時，需要保留引號內的所有空格。比如font-family:"Times New Roman",sans-serif。瀏覽器會去尋找“Times New Roman”這個字體。

2.通用字體系列

在font-family定義了通用字體后，若指定網(wǎng)頁顯示的字體系統(tǒng)中并不存在，瀏覽器就會根據(jù)設置的通用字體來以某種預先設置好的字體來顯示。w3c建議在定義字體是最后以一個類別結尾，例如sans-serif，來保證不同操作系統(tǒng)下網(wǎng)頁都能夠正確顯示。

serif

serif
英 [?ser?f] 美 [?s?r?f]
n.
襯線體;襯線，截線（襯線指的是字體起始末端的細節(jié)裝飾）

serif 是襯線字體，意思是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。如西方字體中的Times New Roman、Georgia字體等，中文的宋體就屬于這類字體。

sans-serif

sans
英 [s?nz] 美 [s?nz, sɑ?]
prep.
無，沒有

sans-serif是無襯線字體，在筆畫上沒有多余的裝飾，無襯線字體比較圓滑，線條一般粗細均勻。屬于這類字體的如西方的Helvetica、Arial、Verdana，中文的黑體。

注：嚴格來說，襯線體與非襯線體是對于西方字體的區(qū)別，中文字體只是有著宋體、黑體、楷體、仿宋等風格之分，但是中文宋體與西方襯線字體在風格和應用場景上相似，也可以有襯線體與非襯線體之分。

襯線體與非襯線體的區(qū)別

綜上所述，襯線字體適合小號文字的顯示，如果使用非襯線字體要保證font-size足夠大，以確保正文內容的可讀性。11px下的英文推薦使用襯線字體，對于中文，無論如何都不推薦11px下顯示。

二、常見問題

1.優(yōu)先級
參考頁面可用性之瀏覽器默認字體與CSS中文字體
凡是瀏覽器默認字體不起作用的頁面都是在CSS中設置了中文字體的頁面。

我們?yōu)槭裁匆赽ody中設置font-family屬性，其一就是在于統(tǒng)一，也就是所謂的兼容性，其二就是讓英文字符更好看，“宋體”下的英文字符看多了會讓人覺得蹩腳的……所以我們會設置font-family:arial; 或是font-family:Tahoma;這是需要的。對于中文站點，這類英文字體的設置依舊留下了中文的突破口。要知道，這些英文字體對中文文字的表現(xiàn)是沒有影響的（這里僅指單純的文字表現(xiàn)，對齊、下劃線等問題不予考慮），英文字體僅對英文字體及一些字符有影響，中文字體依舊勃起，處于真空的裸露的狀態(tài)，這種裸露直接裸給了瀏覽器，也就是說英文字體下的中文字體僅受瀏覽器的默認字體影響，于是這就牽涉到了一個頁面可用性的問題。

有一部分用戶，雖然是一小部分，但是他們喜歡使用自定義的中文字體，拿我身邊的事情舉例吧。我有幾個同事就喜歡“微軟雅黑”字體，他就是把瀏覽器的默認字體設成了“微軟雅黑”。根據(jù)他的口述，在他看來，訪問一個網(wǎng)站，發(fā)現(xiàn)這個網(wǎng)站的字體不是他自定義的字體，他會有些許的挫敗感，如果一個網(wǎng)站可以接受他修改的字體，以“微軟雅黑”的形式顯示，其對這個網(wǎng)站的認同感也會提升。

不同的字體在對行高對齊方便都不統(tǒng)一，如果你頁面設計的很緊湊按照緊密的像素進行布局，字體換了后可能會讓頁面錯亂的，你可能又會說頁面要照你的那種風格進行編寫，高自由度什么的。但是企業(yè)辦公網(wǎng)站不太試用，他們要的只是一個穩(wěn)定的顯示一致的頁面，照你那么寫，會有些時間浪費在測試上

2 .參考
如何優(yōu)雅地定義 font-family?
推薦！WEB中文字體應用指南
字體序列的問題其實一般并不常見，最糟糕的情況就是先定義中文，再定義西文，中文那套自帶西文字體會讓你感到難過，其次就像在 OS X 系統(tǒng)上將「華文黑體」定義在「冬青黑」或「蘋方」之前.

3.參考Tahoma Arial Verdana三種字體的選擇
Arial廣為人詬病的一點就是i大寫的問題，而在字體為12時，中文的樣式、間距并無差別，所以我決定選擇Tahoma作為我的主字體。
另外值得注意的一點就是京東和淘寶都選擇Verdana作為訂單金額的字體，我覺得是非常合理的。
因為訂單的金額是非常重要的信息，Verdana的特點就是字間距較大，這樣可以更為清晰。
所以最終確定我的字體樣式：
通用 font-family: tahoma, arial, 宋體, sans-serif;
金額 font-family: verdana;

4.移動端WEB頁面的字體
在網(wǎng)頁中,視覺設計師們喜歡用微軟雅黑作為中文字體進行設計，于是我們寫頁面的時候也定義 font-family 為微軟雅黑，如果你寫的是移動端頁面發(fā)到線上后，你可能會發(fā)現(xiàn)字體根本不是微軟雅黑。因為手機系統(tǒng) ios、android 等是不支持微軟雅黑字體。

三大手機系統(tǒng)的字體資料

• ios 系統(tǒng)
  默認中文字體是Heiti SC
  默認英文字體是Helvetica
  默認數(shù)字字體是HelveticaNeue
  無微軟雅黑字體

• android 系統(tǒng)
  默認中文字體是Droidsansfallback
  默認英文和數(shù)字字體是Droid Sans
  無微軟雅黑字體

• winphone 系統(tǒng)
  默認中文字體是Dengxian(方正等線體)
  默認英文和數(shù)字字體是Segoe
  無微軟雅黑字體

都不支持微軟雅黑，有木有；想在移動端使用微軟雅黑字體也是可以的，如下：

Paste_Image.png

?

@font-face 定義為微軟雅黑字體并存放到 web 服務器上，在需要使用時被自動下載。但是這樣做：一來消耗用戶的流量，二來對頁面的打開速度造成了延遲；一般是不建議的。

我們再來看三大系統(tǒng)的默認字體截圖，從左到右依次為 ios、android、windows phone;我們可以看出三種不同的中文字體和微軟雅黑一樣是無襯線字體，意思就是字體邊緣無過多的修飾，而無論頁面中使用哪種字體，肉眼很難看出它們的差異，對產品的體驗幾乎沒有影響。所以綜合來說在移動端網(wǎng)頁還是盡量使用默認字體比較好。

5.不同瀏覽器差異
參考
網(wǎng)站字體渲染！聊聊各瀏覽器下字體排版一致的問題
RD1016: 各瀏覽器對常用行內替換元素的 'baseline' 位置理解不同
Firefox&Chrome默認字體的渲染差異
不同瀏覽器與不同字體，默認 line-height 的表現(xiàn)差異

在項目中，確實出現(xiàn)firefox的文本位置偏高
參考
egret3.2.3在pc上firefox(50.1.0)上文本位置出現(xiàn)上移
為什么所有l(wèi)abel文字都偏移了
為什么所有l(wèi)abel文字都偏移了續(xù)
text不同瀏覽器，字體位置不同

最終苦逼的解決辦法：

export class BGLabel extends Laya.Label {protected createChildren(): void{super.createChildren();var onFireFox:boolean = Laya.Browser.userAgent.indexOf("Firefox") > -1;if(onFireFox){this._tf.y += 5;}}}

三、Laya中使用

1.使用位圖字體
參考
位圖字體的制作與使用
BMFont下載及使用教程
[cocos2d-x] --- 使用位圖工具自定義字體
Bmfont下載
基本搞定了字體---ttf和fnt格式字體

位圖字體只適用固定文字內容的地方，如果是用戶發(fā)表或者其他不確定的文字來源，那就沒法用了
另外，改顏色可以參考改變bitmapFont位圖字體顏色的方法

• PS修改 位圖字體.png 的顏色，但是這樣不靈活
• 文本裝入sprite，用顏色濾鏡改變sprite顏色

注意，按照上述laya教程導出一張白字透明底的整圖，再去做后期效果，不是很方便，畢竟美術有時要做多層效果。BMFont有ImageManager功能，可以將不同的數(shù)字單獨做出復雜效果后，通過ImageManager導入后，再導出。

2.使用嵌入字體

首先需要說明的是，laya 默認用的是Arial字體。如果使用Laya.Font.defaultFamily = "NotoSans-Bold";更改默認字體，會導致之前使用默認Arial字體的界面發(fā)生文字錯位

如果希望在IDE中能選擇到自己想要的字體，可以更改laya.editorUI.xml。但是無法在IDE中預覽嵌入字體效果，參考如何在UI編輯器里改變默認的字體

<prop name="font" tips="字體" type="editoption" option=" Arial,SimSun,Microsoft YaHei,SimHei,Helvetica,NotoSans-Bold"default="" group="常用" />

a.不同字體格式
參考WEB.ttf .eot .otf .woff .svg字體格式介紹和兼容

字體兼容性

TrueType (.ttf)
ttf與ttc,otf
Windows和Mac系統(tǒng)最常用的字體格式，其最大的特點就是它是由一種數(shù)學模式來進行定義的基于輪廓技術的字體，這使得它們比基于矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現(xiàn)鋸齒。

?

EOT – Embedded Open Type (.eot)

嵌入字體格式(EOT)是微軟開發(fā)的一種技術，允許 OpenType 字體嵌入到網(wǎng)頁并可以下載至瀏覽器渲染，瀏覽器根據(jù) CSS 中 @font-face 的定義，下載，渲染這種 .EOT 后綴的字體文件。這些文件只在當前頁活動的狀態(tài)下，臨時安裝在用戶的系統(tǒng)中。

OpenType (.otf)

OpenType是一種可縮放字型(scalable font)電腦字體類型，采用PostScript格式，是美國微軟公司與Adobe公司聯(lián)合開發(fā)，用來替代TrueType字型的新字型。這類字體的文件擴展名為.otf，類型代碼是OTTO，現(xiàn)行標準為OpenType 1.4。OpenType最初發(fā)表于1996年，并在2000年之后出現(xiàn)大量字體。它源于微軟公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技術。Adobe公司已經(jīng)在2002年末將其字體庫全部改用OpenType格式。

WOFF – Web Open Font Format (.woff)

相對于 TrueType 和 OpenType ，WOFF(Web開發(fā)字體格式)是一種專門為了 Web 而設計的字體格式標準，它并不復雜，實際上只是對于 TrueType / OpenType 等字體格式的封裝，并針對網(wǎng)絡使用加以優(yōu)化：每個字體文件中含有字體以及針對字體的元數(shù)據(jù)(Metadata)，字體文件被壓縮，以便于網(wǎng)絡傳輸，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在內的幾乎所有主要的字體供應商都加入到支持 WOFF 的行列中來

SVG (Scalable Vector Graphics) Fonts (.svg)

顧名思義，就是使用SVG技術來呈現(xiàn)字體，還有一種gzip壓縮格式的SVG字體.svgz。SVG可縮放矢量圖形(Scalable Vector Graphics)是基于可擴展標記語言(XML)，用于描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個開放標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。SVG可以使你設計的網(wǎng)頁可以更加精彩細致，使用簡單的文本命令，SVG可實現(xiàn)色彩線性變化、路徑、自定義字體、透明效果、濾鏡效果等各式常見的圖形圖像效果。

b.woff的體積明顯最小，兼容性也不錯，woff2暫時還不行
參考
web font 終極解決方案
網(wǎng)頁中導入特殊字體@font-face屬性詳解
web字體格式及幾種在線格式轉換工具介紹
幾種在線工具都試了一下，我上傳的ttf是299kb，只有fontsquirrel把woff壓縮到25kb,其他幾個工具都是130kb左右。但是，某些字體轉不了，提示"Adobe has requested that their font Source Han Sans CN Medium Regular be blacklisted by the Generator. You will not be able to convert this font."不過我覺得真正原因是因為我傳了otf格式的，ttf格式的就能轉。

c.參考LayaAir下TTF字體的使用方式

比如我測試用了一個叫mb_potatoesandpeas-webfont.woff的字體，我把這個文件重命名為cuixu.woff，然后在index.html中這樣引用：

<style>html,body {padding: 0; background-color:rgba(256, 256, 256, 1);border: 0;margin: 0;height: 100%;overflow-y:auto;}@font-face {font-family: cuixu;src: url('cuixu.woff')} </style>

然后在Main.ts中這樣寫，只要保證font指向的名稱與index.html中的font-family一致即可生效。

//加載嵌入字體 private loadEmbedFont() {Laya.Font.defaultFamily = "cuixu";var text: Laya.Text = new Laya.Text();text.fontSize = 40;text.color = "#FF00FF";text.text = "闃";text.font = "cuixu";text.pos(-100, 100);Laya.stage.addChild(text); }

問題補充：
以上方法在canvas模式下正常，webGL模式下無效，這個是因為在用到該字體樣式的時候，ttf字體包還未加載完成。html下字體是否加載完成，沒有辦法拋出事件，laya也無法監(jiān)聽判斷。
替代方案：
在字體正式使用前，提前加載一個字體，該字體的主要功能是用于提前啟動被加載字體的加載，保證在項目中正式使用該字體樣式的時候，字體包已經(jīng)加載完成

這里我在使用的時候，偶現(xiàn)BUG。就是在外網(wǎng)，偶爾首頁面會出現(xiàn)問號方框亂碼，估計是加載字體太晚了。參考daohu網(wǎng)友所說：

很好用！感覺webGL模式下是首次使用ttf的時候才開始加載，所以建議在預加載其他圖集資源的時候就創(chuàng)建一次ttf文字（當然得找生僻字當炮灰），這樣等到其他資源加載完也順利加載好ttf了，不然延遲1s后如果還沒加載完是會悲劇的

如果是使用的時候才加載，那就得在圖集資源加載前就去使用嵌入字體。

四、思源字體介紹

參考
思源黑體：開源無襯線中文字體
Google 和 Adobe 做了款免費中文字體，為什么大家驚嘆了

image.png

?

2014年7月15號，Adobe 聯(lián)合 Google 發(fā)布了一款開源字體：「思源黑體」，亦稱Source Han Sans 或 Noto Sans CJK。安卓5.0系統(tǒng)已內置此字體。
思源黑體是一款開源字體，用戶可以在GitHub Google Noto Font或者GitHub Adobe source han sans上查看或建立分支，也可以在Adobe Typekit上免費下載使用。

https://github.com/adobe-fonts/source-han-sans

注2：Noto Sans CJK版本或Source Han Sans版本的兩中思源黑體沒有任何區(qū)別，包括其英文部分。二者在系統(tǒng)中顯示的名稱為各自的英文名稱，而不是“思源黑體”，這會造成一定兼容性問題。例如一方在Word文件中定義字體為“Noto Sans CJK”的思源黑體，而在另一方的電腦里只安裝了“Source Han Sans”的版本，那么程序依然會以找不到字體為由回滾對應內容到宋體。

?

參考思源宋體，如何評價，以及如何正確使用
2017 年 4 月 3 日，Adobe 聯(lián)合 Google 發(fā)布了思源宋體。思源宋體是 思源黑體 的兄弟字體，同樣支持繁簡中文、日文、韓文四種語言，同樣包含七種字重，同樣使用 OFL 自由授權，并在 GitHub 上開源。我國的常州華文字廠也參與了字體設計。思源宋體遵循 GB 18030 和通用規(guī)范漢字表，包含 8105 個規(guī)范字。

思源宋體對于漢文字體屆的貢獻完全不亞于思源黑體。

如果操作系統(tǒng)并沒有合適的字體來顯示對應的字符，它就會被顯示成「豆腐塊」。Google 希望通過讓開源 Noto 字體家族覆蓋所有 Unicode 字符的方式來徹底告別「豆腐塊」的存在，而「思源」系列字體便是 Noto 字體家族針對中文、日文和韓文（Chinese、Japanese、Korean，CJK）的重要子集。之前的思源黑體是無襯線字體，而這次的思源宋體是襯線字體。

對比 macOS 系統(tǒng)內置的宋體，思源宋體不但字重更豐富，并且字面更大，易讀性稍好。Windows 內置宋體直接負分出局。相比思源黑體這種非襯線字體，思源宋體更適合正式的文檔，感覺更莊重。

思源字體支持七種字重

需要指出的是，由于思源字體由 Google 和 Adobe 聯(lián)合開發(fā)并發(fā)行，雖說中文名稱相同，但是并沒有統(tǒng)一的英文名稱。Google 將思源字體歸入旗下 Noto 字體家族，因此思源黑體的名字為 Noto Sans CJK，思源宋體的名字為 Noto Serif CJK；Adobe 將思源字體歸入旗下 Source 字體家族，因此思源黑體的名字為 Source Han Sans，思源宋體的名字為 Source Han Serif。這一點帶來的影響隨后說明。

思源字體也內置了西文，其西文部分使用的是 Adobe Source 家族字體，即思源黑體集成 Source Sans Pro、思源宋體集成 Source Serif。無論是 Google 還是 Adobe 發(fā)行的版本都是如此。

在網(wǎng)頁中使用中文字體一向比較困難，其中最主要的原因是中文字體往往體積過大，西文字體一般可以在百 KB 左右解決問題，而中文字體少則幾個 MB，大則上百 MB，這樣會嚴重拖慢網(wǎng)站的加載速度。

參考思源系列字體：技術價值高于藝術價值

2014 年，谷歌聯(lián)合奧多比發(fā)布思源黑體的時候，掀起了漢文字體屆的一場波瀾；三年后，兩大巨頭發(fā)布襯線思源宋體。平面設計師從來沒有體會過如此強烈的幸福感：思源系列字體是迄今為止唯一一款可以免費用于任何場合的“泛中日韓”字體。

你可能不知道字體也是收費的，但實際上，連 PC 上每天都和你打交道的微軟雅黑都是不能隨意使用的。你可以用它來設計畢業(yè)答辯 PPT，打印一篇你寫給女朋友的蹩腳詩，但是不能用于公司的宣傳文案，也不能用來打印餐廳的菜單。將微軟雅黑用于商業(yè)用途時，微軟不會找你的麻煩，但你切實侵犯了微軟雅黑原作者——中國方正集團——的版權。

思源系列字體基于“開源字體授權”發(fā)布，這意味著你不但可以不受限地商業(yè)使用思源系列字體，還可以根據(jù)其源代碼進行再次修改，并將修改后的版本免費分發(fā)，或捆綁到商業(yè)產品中。“思源”因此得名。

但是如果你把“開源、免費”當作思源系列字體的全部意義，那就大錯特錯了。谷歌和奧多比兩大商業(yè)巨頭，誰都不指著這套字體來賺錢。聯(lián)合開發(fā)思源系列字體的最大目的，是拋磚引玉，為“泛中日韓（Pan-CJK）”字體提供一個良好的榜樣。

為什么說思源系列字體是中日韓數(shù)字排印史上，最大的工程？

谷歌“Noto”計劃有一個偉大的目標：No Tofu，消滅豆腐塊。豆腐塊是一種常見的排印錯誤：在一些操作系統(tǒng)中，無法顯示的字符會變成“□”。Noto 計劃是要設計一套覆蓋所有 Unicode 字符的字體，而中日韓語言是實現(xiàn)“消滅豆腐塊”最重要的一步。

end

作者：懶皮
鏈接：https://www.jianshu.com/p/16513e7789ab
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處。

總結

以上是生活随笔為你收集整理的H5 Laya 字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。