當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

中文网页中的字体选型及开发指南

發(fā)布時間：2023/12/1 综合教程 31 生活家

生活随笔收集整理的這篇文章主要介紹了中文网页中的字体选型及开发指南小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

傳送門

- 引子
- 例子
- - 知乎
  - 簡書
  - GitHub
  - 蘋果
  - 小米
  - 嗶哩嗶哩
  - 錘子
- 字體的分類
- - 非襯線字體（Sans-Serif）
  - 襯線字體（Serif）
  - 等寬字體（Monospace）
- 常見的字體
- - 等線字體 Sans-serif
  - 襯線字體 Serif
  - 等寬字體 Monospace
- 操作系統(tǒng)的預(yù)裝字體
- - Windows
  - macOS / iOS / iPadOS
  - Linux
  - Microsoft Office
- 字體的使用
- - 系統(tǒng)字體
  - Web Fonts
- 總結(jié)成果
- 參考文獻
- 版權(quán)聲明

引子

趁著暑假，我又搭建了一個自己的個人博客，不同于以往，這次用的是較新的博客系統(tǒng) Ghost。

因為 Ghost 的主題和 UI 實在是太好看了。

而且易用性也很好，比起臃腫的 WordPress 和折騰人的 Hexo ，Ghost 正中我意。

不過作為一個年輕的、國外開發(fā)者主導(dǎo)的博客系統(tǒng)，它似乎還沒有考慮到中文顯示這種東西。

Windows 平臺下，Ghost 的中文默認(rèn)顯示為宋體，實在是辣眼睛。

于是就有了這次的探索，中文網(wǎng)頁設(shè)計中，特別是文字較多的博客類，用那種字體更為合適呢？

例子

先來看看大公司網(wǎng)站所用的字體：

知乎

body {font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size: 15px;color: #121212;
}

簡書

body {line-height: 1.42857;color: #404040;background-color: #fff;font-family: -apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;font-feature-settings: "tnum";font-variant: tabular-nums;
}

GitHub


body {font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size: 14px;line-height: 1.5;
}code {margin-top: 0;margin-bottom: 0;font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size: 12px;
}

蘋果

body {font-size: 17px;line-height: 1.5294717647;font-weight: 400;letter-spacing: -0.021em;font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;background-color: white;color: #333;font-style: normal;
}

小米

body {font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;color: #333;background-color: #fff;min-width: 1226px;
}

嗶哩嗶哩

2022年1月17日更新

/* 新版首頁 */
body {font-family: PingFang SC,HarmonyOS_Regular,Helvetica Neue,Microsoft YaHei,sans-serif!important;font-weight: 400;overflow-x: auto;
}/* 舊版 */
body {margin: 0;font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size: 12px;line-height: 1.5;color: #222;background-color: #fff;
}

錘子

html {font-family: Helvetica Neue,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
}

字體的分類

非襯線字體（Sans-Serif）

非襯線字體適用于屏幕顯示，代表字體是黑體。可以用在較理性的技術(shù)類文章。

襯線字體（Serif）

襯線字體適用于印刷出版，代表字體是宋體。可以用在較感性的生活隨筆類文章中。

等寬字體（Monospace）

等寬字體的每個字符具有相同的寬度，這使得英文字符和標(biāo)點總是工整地排列，這些字體還專門為一些字母和符號做了優(yōu)化，讓你一眼就可以區(qū)別出 O0 / 1ilIL，代表字體 Source Code Pro 。

例如這一段就是等寬字體 Source Code Pro 的效果
<link href="https://fonts.geekzu.org/css?family=Source+Code+Pro&display=swap" rel="stylesheet">

常見的字體

2022年1月17日更新

等線字體 Sans-serif

字體	用途
`system-ui`	默認(rèn)系統(tǒng)字體
`-apple-system`, `BlinkMacSystemFont`	macOS, iOS
Segoe UI	Microsoft Windows, Xbox, etc.
Roboto	較新版本的 Android
Oxygen	Linux / KDE
Ubuntu	Linux / Ubuntu
Cantarell	Linux / GNOME 3
Fira Sans	Firefox OS
Droid Sans	舊版本的 Android
Helvetica Neue	OSX
Arial, `sans-serif`	備胎

Helvetica ：被評為設(shè)計師最愛的字體，Realist風(fēng)格，簡潔現(xiàn)代的線條，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁字體，在Windows下由于Hinting的原因顯示很糟糕。
Arial ：Helvetica的「克隆」，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別。如果字號太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常
Lucida Family ：Lucida Grande是Mac OS UI的標(biāo)準(zhǔn)字體，屬于humanist風(fēng)格，稍微活潑一點。Mac下的顯示要比Win下好。
Verdana ：專門為了屏顯而設(shè)計的字體，humanist風(fēng)格，在小字號下仍可以清楚顯示，但是字體細(xì)節(jié)缺失嚴(yán)重，最好別做標(biāo)題。
Tahoma ：也是humanist風(fēng)格，字體和Verdana有點像，但是略窄一些，counter略小，曾經(jīng)是Windows的標(biāo)準(zhǔn)字體，Mac 10.5之后默認(rèn)也有安裝。
Trebuchet MS: 為微軟設(shè)計的一個humanist風(fēng)格字體，個人覺得個性太過突出，用得不好會不搭。

微軟雅黑（Microsoft YaHei） ：Vista之后新引入的字體，打開Cleartype之后顯示效果不錯，不開Cleartype發(fā)虛。微軟雅黑的美觀度和清晰度都較好，可以作為網(wǎng)頁的首選字體。它在Mac平臺的對應(yīng)字體是華文細(xì)黑（STXihei）。

華文細(xì)黑 ：Mac下的默認(rèn)中文。

Droid Sans和衍生的WenQuanYi Microhei ：Andriod中的中文，也是Linux絕大多數(shù)發(fā)行版本的默認(rèn)中文，，當(dāng)然也有用WenQuanyi Zenhei的，不過比較少了。

襯線字體 Serif

Georgia ：基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細(xì)節(jié)還算OK。
Times ：Times是為了報紙而設(shè)計的，特點是可以在有限的空間塞進去更多的文字，筆畫較弱，小字號正文屏顯看起來累眼。曾經(jīng)Engadget改版的時候用了Times作為正文，被罵得很慘之后換成了Georgia。

中易宋體（SimSun） ：Win最常見的字體，小字體點陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。宋體是最常見的中文字體，如果沒有指定字體，操作系統(tǒng)往往選擇它來渲染。很多人認(rèn)為，這種字體并不美觀。

仿宋（FangSong） ：這種字體是襯線體，比宋體的裝飾性更強。如果字號太小，會影響清晰度，所以只有在字號大于14px的情況下，才可以考慮這種字體。它在Mac平臺的對應(yīng)字體是"華文仿宋"（STFangsong）。
楷體（KaiTi） ：楷體也是襯線體，裝飾性與仿宋體接近，但是寬度更大，筆畫更清楚一些。這種字體也不應(yīng)該在小于14px的情況下使用。它在Mac平臺的對應(yīng)字體是"華文楷體"（STKaiti）。

等寬字體 Monospace

ui-monospace：較新的等寬字體聲明形式，已在 Safari 13.19 中得到支持。這也是使用 macOS 新的“SF Mono”字體的唯一方法。

Menlo, Monaco：舊版本 macOS / OSX 的默認(rèn)等寬字體，在支持 .ui-monospace 的 macOS 上不再生效。

Cascadia Code, Segoe UI Mono：Windows 自家的等寬字體，但默認(rèn)不包含在 Windows 中 ~~，因為 Windows 根本沒有默認(rèn)的等寬字體（除非算上Courier New）。~~ 但是Segue UI Mono已隨一些微軟自家的軟件一起分發(fā)，正在普及中。

Cascadia Mono：是微軟正在開發(fā)的一種新的等寬字體，隨 Windows Terminal 一起提供。

Source Code Pro：知名的等寬字體，GNOME12 中的默認(rèn)字體，但來自不同的家族，作為默認(rèn)的可變寬度字體Cantarell。

操作系統(tǒng)的預(yù)裝字體

操作系統(tǒng)決定了開發(fā)者可以使用的字體。所以，第一步，我們必須了解操作系統(tǒng)到底提供哪些字體。

可以通過查詢各維基百科的這個頁面，列出了常見的不同系統(tǒng)自帶的日中韓字體：List Of CJK fonts。

Windows

宋體：SimSun
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋GB2312：FangSongGB2312
楷體GB2312：KaiTiGB2312
Windows XP+: MS Hei 微軟黑體
Windows Vista+: Microsoft YaHei 微軟雅黑

macOS / iOS / iPadOS

詳見蘋果官網(wǎng)的 macOS Mojave 附帶的字體。

華文細(xì)黑：STHeiti Light （又名STXihei）
華文楷體：STKaiti
華文宋體：STSong
華文仿宋：STFangsong
OSX 10.2+: 華文黑體 STHeiti
OSX 10.6+: 黑體-簡 Heiti SC / 黑體-繁 Heiti TC
OSX 10.6+: 冬青黑體簡體中文 Hiragino Sans GB
OSX 10.11+: 蘋方-簡 PingFang SC / 蘋方-繁 PingFang TC

iOS / iPadOS 使用與 macOS 相同的中文字體。詳見蘋果官網(wǎng)的字體列表。

但是要注意的是，iOS / iPadOS 系統(tǒng)并不預(yù)裝 CJK 襯線字體。所以幾乎所有的中文網(wǎng)頁在 iOS / iPadOS 都是顯示為非襯線字體。原因正是前文所說的，黑體在屏幕上的可讀性比宋體要高。

Linux

Open Source*: WenQuanYi Zen Hei 文泉驛正黑
Open Source*: WenQuanYi Micro Hei 文泉驛微米黑
Open Source*: Noto Sans CJK / Source Han Sans

Linux 由于發(fā)行版眾多，比較混亂，一般需要用戶自行安裝中文字體，常見的有文泉驛、思源等開源字體。

Android 目前使用 Adobe 和 Google 聯(lián)合開發(fā)的思源系列 Source * 字體，不過在 Android 中叫做 Noto *。

Microsoft Office

如果用戶裝了 Microsoft Office ，還會多出一些字體。

隸書：LiSu
幼圓：YouYuan
華文細(xì)黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩云：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei

字體的使用

系統(tǒng)字體

CSS 的 font-family 命令，指定了網(wǎng)頁元素所使用的字體。下面是一個例子。

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微軟雅黑", STXihei, "華文細(xì)黑", serif;

它的規(guī)則有三條。

（1）優(yōu)先使用排在前面的字體。

（2）如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。

（3）如果所列出的字體，都無法滿足需要，則讓操作系統(tǒng)自行決定使用哪種字體。

根據(jù)這些規(guī)則，font-family 應(yīng)該優(yōu)先指定英文字體，然后再指定中文字體。 否則，中文字體所包含的英文字母，會取代英文字體，這往往很丑陋。

為了保證兼容性，中文字體的中文名稱和英文名稱，應(yīng)該都寫入font-family。 比如，"微軟雅黑"的英文名稱是Microsoft YaHei。

font-family后面的值最好全部寫英文，中文的話在 macOS 下某些版本的瀏覽器是不支持的，認(rèn)不出來，還有比"Microsoft YaHei"這種英文寫法，更推薦的寫法是把漢字轉(zhuǎn)義為 unicode,比如微軟雅黑轉(zhuǎn)義之后就是"\5FAE\8F6F\96C5\9ED1"，這樣能兼容更多平臺和各種不同語言的瀏覽器，兼容性最好。

此外，中文字體的中文名稱，以及由多個單詞組成的英文名稱，應(yīng)該放在雙引號內(nèi)。

由于 Windows 和 Mac 的中文字體沒有交叉，所以應(yīng)該同時為兩個平臺指定字體。

常見的做法是，Windows平臺指定"微軟雅黑"（Microsoft YaHei），Mac平臺指定"華文細(xì)黑"（STXihei）。

Web Fonts

如果是純英文網(wǎng)頁的話，選字體的事情比較好辦，因為直接引入 Web Fonts 的成本非常低（文件小），而且現(xiàn)在 Web Fonts 的 [兼容性](“https://caniuse.com/#search=web font”) 很好，基本上所有主流瀏覽器都支持，就能保證各個平臺所用的字體的一致性。

對于開源字體，如果能在 Google Fonts 直接找到的話，可以通過他們的 CDN 直接引用到頁面上。例如 Source Code Pro：

<link href="https://fonts.geekzu.org/css?family=Source+Code+Pro&display=swap" rel="stylesheet">

或者

<style>
@import url('https://fonts.geekzu.org/css?family=Source+Code+Pro&display=swap');
</style>

如果找不到免費的 CDN 的話，也可以下載字體文件部署到自己的服務(wù)器上。

然后在 style.css 中加入兼容各個瀏覽器的 @font-face 定義:

@font-face {font-family: "JetBrains Mono";src: url("./fonts/JetBrainsMono-Regular.eot");src: url("./fonts/JetBrainsMono-Regular.eot?#iefix") format("embedded-opentype"),url("./fonts/JetBrainsMono-Regular.woff2") format("woff2"),url("./fonts/JetBrainsMono-Regular.woff") format("woff"),url("./fonts/JetBrainsMono-Regular.ttf") format("truetype");font-weight: 400;font-style: normal;
}

之后便可以在 CSS 中使用該字體：

.code {font-family: "JetBrains Mono", monospace;
}

這樣瀏覽器就會下載自己能使用的字體文件進行文字渲染了。

總結(jié)成果

你現(xiàn)在所看到的這個頁面的字體

:root {--font-sans-serif: -apple-system, BlinkMacSystemFont, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC",HarmonyOS_Regular, "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",Helvetica, "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",Arial, sans-serif;--font-serif: STZhongsong, STSong, "Noto Serif CJK", "Noto Serif SC", PMingLiu,SimSun, "WenQuanYi Bitmap Song", "Times New Roman", Times, serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code","Segoe UI Mono", "Source Code Pro", Menlo, Consolas, "Liberation Mono",monospace;
}

參考文獻

https://blog.mutoo.im/2020/02/fonts-for-my-blog-theme
https://www.runoob.com/w3cnote/web-font-family.html
http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/

版權(quán)聲明

本文由 Jacob 采用知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議進行許可，首發(fā)于 www.jacobruan.com 。

總結(jié)

以上是生活随笔為你收集整理的中文网页中的字体选型及开发指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：淘宝架构发展
下一篇： Android x86的arm兼容库移植