網(wǎng)頁(yè)設(shè)計(jì)常用哪些字體？用這數(shù)10款免費(fèi)可商用字體就夠了！

時(shí)間：2023-09-30 10:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-30 10:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)常用哪些字體？用這數(shù)10款免費(fèi)可商用字體就夠了?。合胫谰W(wǎng)頁(yè)設(shè)計(jì)常用哪些字體？皮仔 @Pixso協(xié)同設(shè)計(jì) 來(lái)給大家提供一個(gè)不一樣的角度哈：

首先，你可以在瀏覽器打開一個(gè)你喜歡的網(wǎng)站，按下 F12 (有些筆記本電腦需要按 Fn + F12)，打開瀏覽器開發(fā)者工具，如下圖底部的面板。

點(diǎn)擊瀏覽器開發(fā)者工具左上角的「鼠標(biāo)」按鈕，接著將鼠標(biāo)移動(dòng)到網(wǎng)頁(yè)的文字上方并單擊，在開發(fā)者工具右側(cè)的「樣式」代碼中，查看設(shè)置頁(yè)面字體的 font-family 屬性的值，就能了解到這個(gè)網(wǎng)頁(yè)所使用的字體。

從圖片中可以看到，在線設(shè)計(jì)工具Pixso官網(wǎng) pixso.cn 使用的字體有：

"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important

注：逗號(hào)分隔出了一個(gè)個(gè)的字體

Noto Sans SC 字體

Noto Sans SC，即 Noto Sans Simplified Chinese 的縮寫，是 Google Fonts 上的第一個(gè)簡(jiǎn)體中文字體，包含 6 個(gè)字重——Thin、Light、Regular、Medium、Bold、Black。

Noto Sans SC 支持教育部于 2013 年頒布的《通用規(guī)范漢字表》里規(guī)定的所有 8105 個(gè)漢字，是 Noto Sans CJK 全集中包含的漢字的子集。

這里需要補(bǔ)充的是，Google Fonts 是 Google 推出的網(wǎng)絡(luò)字體服務(wù)，它提供的網(wǎng)絡(luò)字體（Web font）技術(shù)為不想受限于電腦本地字體的網(wǎng)頁(yè)設(shè)計(jì)師提供了豐富的字體選擇。只要在網(wǎng)頁(yè)（CSS）中指定一款在線字體，就可以做到在任何平臺(tái)隨意使用你所喜歡的字體。

下圖是 Google Fonts 提供的 Noto Sans SC 字體在線預(yù)覽工具，在頂部的輸入框輸入文本內(nèi)容，就能實(shí)時(shí)預(yù)覽不同字重的表現(xiàn)。

-apple-system 和 blinkmacsystemfont 字體

-apple-system 是在以 WebKit 為內(nèi)核的瀏覽器中，例如蘋果的 Safari 瀏覽器，調(diào)用 Apple 系統(tǒng)（iOS, iPadOS, macOS, watchOS, tvOS）中默認(rèn)的字體，通常情況下英文字體是 San Francisco，中文是蘋方。

上面的 -apple-system 字體，缺少對(duì) Chrome 瀏覽器的支持，因此需要用到另一款字體，BlinkMacSystemFont 是在 Chrome 中實(shí)現(xiàn)調(diào)用 Apple 的系統(tǒng)字體。

Segoe UI

Segoe UI，是一款隨著 Windows Vista 系統(tǒng)推出而發(fā)布的英文無(wú)襯線字體，Segoe UI 字體利用了 ClearType 顯示技術(shù)的優(yōu)勢(shì)，比原來(lái)的 Windows XP 系統(tǒng)自帶的 Tahoma 字體更加現(xiàn)代化。

---

簡(jiǎn)要介紹了 Pixso 官網(wǎng)用到的幾款字體，其實(shí)在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的項(xiàng)目時(shí)，除了考慮字體的美觀程度、字體包大小以及兼容性，還有另一個(gè)避不開的因素——字體版權(quán)。

在這方面，為了降低設(shè)計(jì)師因字體使用不當(dāng)而侵權(quán)踩坑的概率，在線設(shè)計(jì)工具Pixso內(nèi)置了設(shè)計(jì)中經(jīng)常會(huì)用到的多款免費(fèi)可商用字體，如下圖所示。

因?yàn)檫@些字體內(nèi)嵌在軟件中，且Pixso本身是基于瀏覽器的在線設(shè)計(jì)工具，可通過(guò)文檔鏈接分享設(shè)計(jì)文件，即便在設(shè)計(jì)文件中使用這些字體，也不會(huì)遇到字體丟失的問(wèn)題！

使用在線設(shè)計(jì)軟件 Pixso 創(chuàng)建文件

在 Pixso 工作臺(tái)，點(diǎn)擊頂部的「新建文件」，可以創(chuàng)建一個(gè)新的設(shè)計(jì)文件。

進(jìn)入剛創(chuàng)建的文件，點(diǎn)擊頂部工具欄的「文本」工具，在文件任意位置單擊，即可輸入文本內(nèi)容。

選中文本內(nèi)容，點(diǎn)擊右側(cè)面板「文本」的字體選項(xiàng)，在打開的面板，就能看到 Pixso 內(nèi)置的所有字體，既有中文也有英文字體，且中文字體還額外提供了字體預(yù)覽，在切換字體之前可以預(yù)覽字體的效果。

目前 Pixso 內(nèi)置的免費(fèi)可商用中文字體包含：




思源黑體、OPPO Sans、包圖小白體、站酷快樂(lè)體、胡曉波騷包體、站酷酷黑體、胡曉波男神體、胡曉波真帥體、浙江拙楷體、聯(lián)盟起藝盧帥正銳黑體、沐瑤軟筆手寫體、旁門正道標(biāo)題體、思源宋體、倉(cāng)耳舒圓體、站酷小薇 LOGO 體、優(yōu)設(shè)標(biāo)題黑、優(yōu)設(shè)好身體、站酷高端黑體、站酷慶科黃油體、站酷文藝體、銳字真言體、自制區(qū)喜脈體、鴻蒙 HarmonyOS Sans SC。

如果內(nèi)置的中文字體沒有包含你想使用的字體，可以切換到字體面板右側(cè)的「本地」選項(xiàng)卡，點(diǎn)擊下方的「字體助手」，安裝 Pixso 的字體助手插件，這樣就可以直接調(diào)用電腦本地安裝的字體。

團(tuán)隊(duì)字體庫(kù) & 個(gè)人字體庫(kù)

前面介紹的「字體助手」插件，只能供個(gè)人調(diào)用電腦本地安裝的字體，如果這個(gè)字體不在 Pixso 內(nèi)置的字體庫(kù)中，當(dāng)你以鏈接分享設(shè)計(jì)文件時(shí)，收到文件的人會(huì)遇到字體丟失的問(wèn)題。

為了解決這個(gè)問(wèn)題，在字體助手插件之上，Pixso 額外提供了 2 個(gè)將本地字體上傳到云端字體庫(kù)的功能——團(tuán)隊(duì)字體庫(kù)和個(gè)人字體庫(kù)。

以團(tuán)隊(duì)字體庫(kù)為例，選中 Pixso 畫板中的文字，點(diǎn)擊右側(cè)的字體選項(xiàng)，切換到「團(tuán)隊(duì)」選項(xiàng)卡，點(diǎn)擊下方的「導(dǎo)入文件」，畫板中央會(huì)彈出一個(gè)窗口，點(diǎn)擊下圖的灰色區(qū)域，將本地的字體上傳到 Pixso。

在將字體真正導(dǎo)入 Pixso 之前，還需要勾選左下角的「我擁有以上字體的商用版權(quán)」，導(dǎo)入前確保上傳的字體為可商用字體或自己已購(gòu)買版權(quán)。

將本地的字體導(dǎo)入 Pixso 后，再次打開字體面板，在「團(tuán)隊(duì)」選項(xiàng)卡下方，就能看到剛上傳的字體，選擇字體即可應(yīng)用。

個(gè)人字體庫(kù)的用法與團(tuán)隊(duì)字體庫(kù)基本一致，唯一的區(qū)別在于：通過(guò)個(gè)人字體庫(kù)上傳的字體，只能在單個(gè)文件中使用，而團(tuán)隊(duì)字體庫(kù)的字體，可以在團(tuán)隊(duì)空間的多個(gè)設(shè)計(jì)文件中使用，這種方式更為靈活~

? Pixso 個(gè)人版完全免費(fèi)

Pixso 對(duì)所有個(gè)人用戶免費(fèi)開放，內(nèi)置的所有功能都可以免費(fèi)使用！

現(xiàn)在前往 Pixso 官網(wǎng)注冊(cè)賬號(hào)，可以享受到 Pixso 會(huì)員的所有權(quán)益：無(wú)限文件數(shù)量、無(wú)協(xié)作者人數(shù)限制、無(wú)限云存儲(chǔ)空間、海量設(shè)計(jì)資源免費(fèi)用等等，快來(lái)嘗試一下吧～

碼字不易，如果這個(gè)回答幫到了你，請(qǐng)別忘了雙擊屏幕【點(diǎn)贊】或是【關(guān)注】我哦，你的支持，是我持續(xù)更新的最大動(dòng)力！

我是皮仔 @Pixso協(xié)同設(shè)計(jì)，那我們下次再見咯。