2022-6-14 博博
讀者朋友們大家好呀！（聲明：《字體篇》文章中所有的字體規范都只針對可視化大屏設計，后臺可視化以及 B 端可視化的字體規范與其不同）
最近產出了很多東西，但都是以零碎的知識為主，主要是在社群進行分享，因此有需要的小伙伴歡迎加我交流。
今天就帶大家好好聊一聊可視化大屏設計中的字體、字號、字重、字體優化等一系列注意事項。字體篇主要分為四大模塊：字體選擇與字重、字號規范與應用、字體優化與交接、常用字體與推薦。
文字是界面中最核心的元素，是產品傳達給用戶的主要內容，它的承載體即是字體。從字體的最基本屬性（字族、字類、字重、字號等）說起，熟悉字體的那些特征，了解字體在界面中的作用。
襯線體
襯線又被稱為“字腳”，襯線體就是有邊角裝飾的字體。我們常用的西文字體 Times New Roman 等；中文比較常見的比如宋體、明體等。
無襯線體
無襯線體則與襯線體相反，通常是機械和統一粗細的線條，沒有邊角的裝飾。最具代表性的 Arial、Helvetica 的西文字體，中文比較常見的比如黑體，微軟雅黑等。
總結
無襯線字體所具備的技術感和理性氣質，更受科技型企業或品牌青睞，騰訊谷歌等互聯網企業都是選用的無襯線體；襯線字體的優雅與復古，則常用于藝術性文字，時尚品牌等。
因此在具有濃厚技術的可視化氛圍中，體現科技感和數字感，結合我們的觀測體驗，展示形式等，我們統一選用的字體是無襯線體。
字體選擇
在使用數字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點，不可選用襯線體（比如宋體，書法體）比較單薄。
注意事項
標題可以用 Bold，更厚重，更加醒目，且不需要長時間觀看；正文由于需要長時間觀看，因此采用 Regular 字重，觀感以及體驗更佳；
字體選擇
英文字體類型的使用，英文選擇更明顯的粗體，因為要展示數據，使得數據展示更加直觀，依舊是選用無襯線體，比較推薦：D-DIN 字體。
注意事項
字重用 Regular，更加纖細精致，英文字體分為大小寫，一般推薦使用純大寫模式，因為大寫可以保證字體本身整齊，并且寬高都是一致的，對于排版以及展示會更加友好。
字體選擇
數字字體類型的使用，考慮畫面的字體的種類不超過三種，并考慮到字體的統一性，數字的字體與英文字體保持統一，比較推薦：D-DIN 字體。
注意事項
數字字體的字重盡量使用 Bold，因為展示更加明顯，數字的展示一般都為數據展示，在界面的展示中，一般數字字體會比同字號下中文小 4-6px，因此展示是保證數據清晰顯示，數字的字體大一點數據才能更清晰，更符合數據可視化展示。
數字字體盡量選用等距字體，比如數字“1”和“0”，有些字體的間距會相應的縮小，我們要選用的就是等距字體，這樣在做一些列表數據對齊的時候，數據展示更加友好。
政府類客戶對于文字大小粗細的追求可以說是非常的偏激，字體加大加粗幾乎成了標配，這種需求下，我們能做的就是在原有規范的基礎上盡量去提升字號和字重。
常規 16：9 指的是 1920*1080 的分辨率
在字體大小的選擇上，參考了頁面上常規大小，定義了一套關于不同尺寸下的標準字號，正常 1080P 頁面，最小字號不小于 16px。
此處字號并不是絕對，因為考慮到目標群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗，具體字號大小還需要參考設備清晰度，環境燈光，視距，人為原因等因素。
常規 32：9 指的是 3840*1080 的分辨率
在字體大小的選擇上，其實是兩塊 1080P 的屏幕進行拼接，因此如果畫面內容較多時，定義最小字號不小于 16px。
如果畫面內容較少時，具體字號大小還需要參考設備清晰度，環境燈光，視距等因素，對字體進行相應的放大，比例合適即可。
此處字號并不是絕對，因為考慮到目標群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗。
特殊尺寸指的是非主流的分辨率，比如 2880*1920 的分辨率
這塊的字號大小比較難定義，因為需要考慮的因素很多，總體來說字號大小如果高度在 1080px 左右，那么就按 16:9 的字號規范來算。
如果高度高于 1080 且很多，則需要等比計算或者放大，具體實踐出的準確數值還得需要根據大屏的實際情況來綜合考慮，這里只是提供一些基礎計算方式。
字號的大小受到屏幕大小的影響；字號的大小受到界面內容的影響；字號的大小受到觀測距離的影響；字號的大小受到設備性能的影響；字號的大小受到主觀人為的影響；
給開發的字體太大怎么辦？如何優化？開發采用默認字體去開發怎么辦？開發用部署電腦沒有這個字體去打發你又該怎么辦？
給開發的字體太大，占用內存該怎么辦？
其實我們可以用一些特殊的方法對原有的字體包進行優化，比如英文字體，我們可以刪除非必要的中文字體和數字，符號，只保留一些必要的英文字母。具體方法如下，我們可以用 FontCreator 軟件去進行字體的優化與刪減，并修改字體細節，重新命名發布。
同時如果有意向的同學，也可以用自己設計的字體去應用到開發，這樣的操作不是一舉兩得嗎？
優化字體教程： https://www.bilibili.com/video/av82311138
開發采用默認字體去開發怎么辦？
默認字體開發可能有時候會出現文字換行，或者文字放不下的情況，因為不同字體的字間距以及大小可能是不同的，因此在初期就需要跟開發協調好，跟設計效果圖的字體保持同步，這樣才能保證設計效果的還原。
本地部署電腦沒有字體該怎么辦？
字體的存放一般是有兩種，一種是放到單獨的服務器然后每次加載去服務器訪問字體，另一種是跟代碼放到一起。對于字體大小的要求。本地存儲不需要考慮字體包的大小，云存儲需要考慮字體包大小。
云存儲一般字體包大小的話可以限制在 2、3M 左右，5、6M 的字體包就已經非常大了，太大會影響我們字體的讀取，畫面加載很慢。
最優解就是在部署本地的電腦上安裝你需要的字體，這樣的話程序就自動讀取，可以識別本地部署的字體；如果不支持本地化部署的，字體是存放在服務器或者是跟代碼打包放一起的，可以要求開發在全局代碼中多寫幾個備用的字體。
比如你是 Windows 系統，那么自帶的就是微軟雅黑，iOS 系統自帶的就是蘋方平臺，會自動根據寫出的代碼按順序篩選自帶的系統字體。
一些特別好用的字體，會在設計過程中提升畫面視覺，因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。附件下載。
1. 可視化常用中文字體
中文字體包含了一些可以做標題的一些造型比較好看的字體，比如優設標題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等。可做正文字體的比如，蘋方簡體，思源黑體等等。
2. 可視化常用英文/數字字體
英文字體和數字字體主要是分享了一些數據展示比較奇特的造型字體，比如：DS-digital、Furore、以及正常數據展示的 D-DIN 字體家族等。
字體的最基本屬性：字族、字類、字重、字號，通過四種基本屬性為切入點，精準的去講述大屏可視化的字體規范和樣式。
在可視化大屏設計中，字體更加偏向于無襯線體，無襯線字體所具備的技術感和理性氣質，更受科技型企業或品牌青睞；
在可視化大屏中，展示數據的重要性不言而喻，因此要注意中文、英文、數字字體的選擇以及注意事項，一切以數據展示更加明顯為前提；
在不同屏幕中，可視化大屏的字號大小規范是有區別的，并且需要結合影響字號的五大因素：屏幕大小、界面內容、觀測距離、設備性能、主觀人為去制定字體規范；
通過 FontCreator 軟件去對字體進行優化，掌握字體的刪減發布以及交付開發的方法；
了解開發存儲字體的兩種形式，一種是本地化部署，一種是與代碼打包服務器云存儲，以及了解兩種方式的優缺點；
了解可視化開發關于字體交接時的注意事項，可以通過自己的理解去解決工作中的關于字體的問題；
推薦了常用的可視化大屏的字體：中文字體、英文字體；
如果畫面內容較少時，可以適當提高字號，反之亦然，比例合適即可；
可視化大屏設計字體規范不存在絕對字體規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
