整體架構(gòu)

今天就帶大家好好聊一聊可視化大屏設(shè)計中的字體、字號、字重、字體優(yōu)化等一系類注意事項(xiàng)。字體篇主要分為四大模塊：字體選擇與字重、字號規(guī)范與應(yīng)用、字體優(yōu)化與交接、常用字體與推薦。

字體選擇與字重

文字是界面中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，它的承載體即是字體。從字體的最基本屬性（字族、字類、字重、字號等）說起，熟悉字體的那些特征，了解字體在界面中的作用。

1、襯線體與無襯線體

襯線體

襯線又被稱為“字腳”，襯線體就是有邊角裝飾的字體。我們常用的西文字體Times New Roman等；中文比較常見的比如宋體、明體等。

無襯線體

無襯線體則與襯線體相反，通常是機(jī)械和統(tǒng)一粗細(xì)的線條，沒有邊角的裝飾。最具代表性的Arial、Helvetica的西文字體，中文比較常見的比如黑體，微軟雅黑等。

總結(jié)

無襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞，騰訊谷歌等互聯(lián)網(wǎng)企業(yè)都是選用的無襯線體；襯線字體的優(yōu)雅與復(fù)古，則常用于藝術(shù)性文字，時尚品牌等。

因此在具有濃厚技術(shù)的可視化氛圍中，體現(xiàn)科技感和數(shù)字感，結(jié)合我們的觀測體驗(yàn)，展示形式等，我們統(tǒng)一選用的字體是無襯線體。

2、中文字體

a、字體選擇

在使用數(shù)字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點(diǎn)，不可選用襯線體（比如宋體，書法體）比較單薄。

b、注意事項(xiàng)

標(biāo)題可以用Bold，更厚重，更加醒目，且不需要長時間觀看；正文由于需要長時間觀看，因此采用Regular字重，觀感以及體驗(yàn)更佳；

3、英文字體

a、字體選擇

英文字體類型的使用，英文選擇更明顯的粗體，因?yàn)橐故緮?shù)據(jù)，使得數(shù)據(jù)展示更加直觀，依舊是選用無襯線體，比較推薦：D-DIN字體。

b、注意事項(xiàng)

字重用Regular，更加纖細(xì)精致，英文字體分為大小寫，一般推薦使用純大寫模式，因?yàn)榇髮懣梢员ＷC字體本身整齊，并且寬高都是一致的，對于排版以及展示會更加友好。

4、數(shù)字字體

a、字體選擇

數(shù)字字體類型的使用，考慮畫面的字體的種類不超過三種，并考慮到字體的統(tǒng)一性，數(shù)字的字體與英文字體保持統(tǒng)一，比較推薦：D-DIN字體。

b、注意事項(xiàng)

數(shù)字字體的字重盡量使用Bold，因?yàn)檎故靖用黠@，數(shù)字的展示一般都為數(shù)據(jù)展示，在界面的展示中，一般數(shù)字字體會比同字號下中文小4-6px，因此展示是保證數(shù)據(jù)清晰顯示，數(shù)字的字體大一點(diǎn)數(shù)據(jù)才能更清晰，更符合數(shù)據(jù)可視化展示。

數(shù)字字體盡量選用等距字體，比如數(shù)字“1”和“0”，有些字體的間距會相應(yīng)的縮小，我們要選用的就是等距字體，這樣在做一些列表數(shù)據(jù)對齊的時候，數(shù)據(jù)展示更加友好。

字號規(guī)范與應(yīng)用

政府類客戶對于文字大小粗細(xì)的追求可以說是非常的偏激，字體加大加粗幾乎成了標(biāo)配，這種需求下，我們能做的就是在原有規(guī)范的基礎(chǔ)上盡量去提升字號和字重。

1、常規(guī)16:9屏

常規(guī)16：9指的是1920*1080的分辨率

在字體大小的選擇上，參考了頁面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標(biāo)準(zhǔn)字號，正常1080P頁面，最小字號不小于16px。

此處字號并不是絕對，因?yàn)榭紤]到目標(biāo)群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗(yàn)，具體字號大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距，人為原因等因素。

2、常規(guī)32:9屏

常規(guī)32：9指的是3840*1080的分辨率

在字體大小的選擇上，其實(shí)是兩塊1080P的屏幕進(jìn)行拼接，因此如果畫面內(nèi)容較多時，定義最小字號不小于16px。

如果畫面內(nèi)容較少時，具體字號大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素，對字體進(jìn)行相應(yīng)的放大，比例合適即可。

此處字號并不是絕對，因?yàn)榭紤]到目標(biāo)群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗(yàn)。

3、特殊尺寸屏

特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率

這塊的字號大小比較難定義，因?yàn)樾枰紤]的因素很多，總體來說字號大小如果高度在1080px左右，那么就按16:9的字號規(guī)范來算。

如果高度高于1080且很多，則需要等比計算或者放大，具體實(shí)踐出的準(zhǔn)確數(shù)值還得需要根據(jù)大屏的實(shí)際情況來綜合考慮，這里只是提供一些基礎(chǔ)計算方式。

4、字號影響因素

字號的大小受到屏幕大小的影響；

字號的大小受到界面內(nèi)容的影響；

字號的大小受到觀測距離的影響；

字號的大小受到設(shè)備性能的影響；

字號的大小受到主觀人為的影響；

字體優(yōu)化與交接

給開發(fā)的字體太大怎么辦？如何優(yōu)化？開發(fā)采用默認(rèn)字體去開發(fā)怎么辦？開發(fā)用部署電腦沒有這個字體去打發(fā)你又該怎么辦？

1、優(yōu)化字體

給開發(fā)的字體太大，占用內(nèi)存該怎么辦？

其實(shí)我們可以用一些特殊的方法對原有的字體包進(jìn)行優(yōu)化，比如英文字體，我們可以刪除非必要的中文字體和數(shù)字，符號，只保留一些必要的英文字母。具體方法如下，我們可以用FontCreator軟件去進(jìn)行字體的優(yōu)化與刪減，并修改字體細(xì)節(jié)，重新命名發(fā)布。

同時如果有意向的同學(xué)，也可以用自己設(shè)計的字體去應(yīng)用到開發(fā)，這樣的操作不是一舉兩得嗎？

優(yōu)化字體教程：https://www.bilibili.com/video/av82311138

2、開發(fā)交接問題解析

a、開發(fā)采用默認(rèn)字體去開發(fā)怎么辦？

默認(rèn)字體開發(fā)可能有時候會出現(xiàn)文字換行，或者文字放不下的情況，因?yàn)椴煌煮w的字間距以及大小可能是不同的，因此在初期就需要跟開發(fā)協(xié)調(diào)好，跟設(shè)計效果圖的字體保持同步，這樣才能保證設(shè)計效果的還原。

b、本地部署電腦沒有字體該怎么辦？

字體的存放一般是有兩種，一種是放到單獨(dú)的服務(wù)器然后每次加載去服務(wù)器訪問字體，另一種是跟代碼放到一起。對于字體大小的要求。本地存儲不需要考慮字體包的大小，云存儲需要考慮字體包大小。

云存儲一般字體包大小的話可以限制在2、3M左右，5、6M的字體包就已經(jīng)非常大了，太大會影響我們字體的讀取，畫面加載很慢。

最優(yōu)解就是在部署本地的電腦上安裝你需要的字體，這樣的話程序就自動讀取，可以識別本地部署的字體；如果不支持本地化部署的，字體是存放在服務(wù)器或者是跟代碼打包放一起的，可以要求開發(fā)在全局代碼中多寫幾個備用的字體。

比如你是Windows系統(tǒng)，哪呢么自帶的就是微軟雅黑，IOS系統(tǒng)自帶的就是蘋方平臺，會自動根據(jù)寫出的代碼按順序篩選自帶的系統(tǒng)字體。

常用字體與推薦

一些特別好用的字體，會在設(shè)計過程中提升畫面視覺，因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。

可視化商用免費(fèi)字體鏈接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取碼: owve

1、可視化常用中文字體

中文字體包含了一些可以做標(biāo)題的一些造型比較好看的字體，比如優(yōu)設(shè)標(biāo)題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等。可做正文字體的比如，蘋方簡體，思源黑體等等。

2、可視化常用英文/數(shù)字字體

英文字體和數(shù)字字體主要是分享了一些數(shù)據(jù)展示比較奇特的造型字體，比如：DS-digital、Furore、以及正常數(shù)據(jù)展示的D-DIN字體家族等。

全篇總結(jié)

1、字體的最基本屬性：字族、字類、字重、字號，通過四種基本屬性為切入點(diǎn)，精準(zhǔn)的去講述大屏可視化的字體規(guī)范和樣式。

2、在可視化大屏設(shè)計中，字體更加偏向于無襯線體，無襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞；

3、在可視化大屏中，展示數(shù)據(jù)的重要性不言而喻，因此要注意中文、英文、數(shù)字字體的選擇以及注意事項(xiàng)，一切以數(shù)據(jù)展示更加明顯為前提；

4、在不同屏幕中，可視化大屏的字號大小規(guī)范是有區(qū)別的，并且需要結(jié)合影響字號的五大因素：屏幕大小、界面內(nèi)容、觀測距離、設(shè)備性能、主觀人為去制定字體規(guī)范；

5、通過FontCreator軟件去對字體進(jìn)行優(yōu)化，掌握字體的刪減發(fā)布以及交付開發(fā)的方法；

6、了解開發(fā)存儲字體的兩種形式，一種是本地化部署，一種是與代碼打包服務(wù)器云存儲，以及了解兩種方式的優(yōu)缺點(diǎn)；

7、了解可視化開發(fā)關(guān)于字體交接時的注意事項(xiàng)，可以通過自己的理解去解決工作中的關(guān)于字體的問題；

8、推薦了常用的可視化大屏的字體：中文字體、英文字體；

9、如果畫面內(nèi)容較少時，可以適當(dāng)提高字號，反之亦然，比例合適即可。

10、可視化大屏設(shè)計字體規(guī)范不存在絕對字體規(guī)范。