2019年9月24日下午，小米公司在北京召開了“小米5G新品發(fā)布會”，推出了包括小米9 Pro、小米MIX Alpha在內(nèi)的一系列新品，全新的MIUI 11系統(tǒng)也在發(fā)布會上正式亮相。MIUI 11系統(tǒng)以“聲色雙全、效率革新”為宗旨，圍繞“設(shè)計(jì)”、“辦公”、“出行”等多方面進(jìn)行全面升級。作為中文系統(tǒng)字體定制的先驅(qū)，此次MIUI 11系統(tǒng)不僅帶來了全新的小米蘭亭Pro，還重磅推出了全球首家動態(tài)字體系統(tǒng)，希望為用戶提供極致的閱讀體驗(yàn)。
  在MIUI 11系統(tǒng)中，用戶可以通過“設(shè)置-顯示-字體大小與粗細(xì)”的操作進(jìn)入字體模塊，拖動相應(yīng)滑塊即可改變手機(jī)界面用字的字體大小和字重粗細(xì)。MIUI動態(tài)字體支持文字粗細(xì)無級調(diào)節(jié)，每個人都可找到適合自己的字重。
  智能加粗還會根據(jù)內(nèi)容層級和重要性予以文字不同程度加粗，使閱讀體驗(yàn)更為極致。
  搭載了動態(tài)字體系統(tǒng)的MIUI 11，在交互細(xì)節(jié)上也做了大量優(yōu)化和提升。
  在系統(tǒng)字體越來越受手機(jī)廠商重視的當(dāng)下，此次小米推出的MIUI動態(tài)字體系統(tǒng)無疑是業(yè)界的一次重大突破，也是手機(jī)系統(tǒng)搭載可變字體的一次有益嘗試。據(jù)了解，MIUI動態(tài)字體系統(tǒng)獲得了2019紅點(diǎn)獎。
  *以上視頻及圖片素材來自小米官方發(fā)布，版權(quán)歸原作者所有
  關(guān)于可變字體，不少設(shè)計(jì)師朋友都有所耳聞，但在中文領(lǐng)域的實(shí)際應(yīng)用還很有限。MIUI的大膽嘗試，既體現(xiàn)了小米對用戶體驗(yàn)的高度重視，也是有前瞻性、探索精神的體現(xiàn)。接下來本文將與大家一起詳細(xì)探討“可變字體”。
  ▼
  什么是可變字體？
  可變字體（Variable Fonts）技術(shù)源于Adobe、Apple、Google、Microsoft四巨頭于2016年發(fā)布的OpenType v1.8字體格式規(guī)范。該規(guī)范的發(fā)布將允許單個字體文件同時支持多個字體形態(tài)，它可以將幾個字體緊湊地封裝在單個字體文件中，通過定義字體內(nèi)的變化來實(shí)現(xiàn)單軸或者多軸設(shè)計(jì)空間。
  目前主流的操作系統(tǒng)、瀏覽器、設(shè)計(jì)軟件大多在不同程度上支持可變字體。設(shè)計(jì)界最為熟知的圖像編輯軟件，Photoshop CC 2018、Illustrator CC 2018也已支持該技術(shù)，設(shè)計(jì)師可以使用這兩款設(shè)計(jì)軟件調(diào)用預(yù)覽使用可變字體。
  可變字體的優(yōu)勢
  前所未有的自由度
  方正蘭亭黑系列字體是方正公司最豐富的家族字體，支持10個字重，額外提供扁字和長字，換言之，方正蘭亭黑在字重維度提供10種變化，在字寬維度提供2種變化，在字高維度提供2種變化，共計(jì)14種變化。設(shè)計(jì)師在使用蘭亭黑系列字體時，仍然存在現(xiàn)有字重滿足不了排版層級需求的情況，選擇這一檔筆畫太細(xì)，下一檔灰度又太重。
  ▲方正蘭亭黑家族字體，支持10個字重維度、2個字寬維度、2個字高維度的變化
  而可變字體的存在，則能很好地解決這個問題?？勺冏煮w包含單軸或者多軸設(shè)計(jì)空間，通過調(diào)整可用軸來控制文本精確的字重、字寬、字高、中宮等，實(shí)現(xiàn)字形的平滑連續(xù)的細(xì)微調(diào)整。設(shè)計(jì)師能夠輕易獲取滿足不同版式設(shè)計(jì)需求的定制字形。
  ▲可變字體的多軸無極變化使得字體具有更自由的變化空間
  以方正悠黑三軸可變字體在Illustrator CC 2018中的操作為例，在字體庫列表中找到方正悠黑可變字體，當(dāng)我們通過“窗口-文字-字符”的操作打開字符面板時，會發(fā)現(xiàn)在字符樣式的右側(cè)多了變量字體按鈕，此按鈕下提供了可變字體的變量移動滑塊。其中，方正悠黑可變字體具有字重軸、字寬軸和字高軸三軸的變化，其對應(yīng)的調(diào)節(jié)滑塊為Weight、Width、Height?；瑒舆@些調(diào)節(jié)滑塊，就可以實(shí)現(xiàn)單個字體在不同維度上的變化，而這些是普通標(biāo)準(zhǔn)字庫不具備的特殊屬性。
  ▲方正悠黑三軸可變字體在設(shè)計(jì)軟件Illustrator CC 2018中的變量操作界面，用戶點(diǎn)擊變量字體按鈕，可以看到方正悠黑可變字體擁有的字重軸、字寬軸和字高軸三個可變軸，通過調(diào)整滑塊來獲取滿足需求的字體樣式
  小體積大能量
  對于常規(guī)標(biāo)準(zhǔn)字庫來講，目前較流行的家族系列字體字重組合方式是Thin、Light、Regular、SemiBold、Bold、Heavy，共6個字重，以6個獨(dú)立字庫的形式存在，每個文件按照GB18030-2000標(biāo)準(zhǔn)組織字體，字體文件大小在8MB以上，6個字體文件大小接近50MB。
  然而，一款支持字重軸變化的可變字體僅一個字體文件就能夠提供800個字重，符合GB18030-2000編碼標(biāo)準(zhǔn)，文件大小為20MB左右。在更小的空間內(nèi)實(shí)現(xiàn)了更大的變化。
  ▲可變字體不僅擁有遠(yuǎn)超過常規(guī)家族字體的變化空間，其文件大小還遠(yuǎn)遠(yuǎn)小于家族字體的文件大小
  可變字體的應(yīng)用
  Webfont+可變字體
  Webfont技術(shù)具有諸多優(yōu)勢：它可以將高質(zhì)量字體應(yīng)用在網(wǎng)頁上，提供極致的閱讀體驗(yàn)；網(wǎng)頁上的文本易于修改、編輯；支持查找、選中、復(fù)制等功能，支持工具翻譯；突破字體需轉(zhuǎn)化為圖片的限制，將文本信息從圖片還原成字體，對搜索引擎更為友好，能夠提升關(guān)鍵字搜索排名等。
  ▲《紐約時報》（The New York Times）英文官方網(wǎng)站將多個家族字體以Webfont的形式嵌入網(wǎng)站，其中New York Times Cheltenham家族字體主要用于標(biāo)題內(nèi)容顯示，New York Times Franklin家族字體則用于注釋、菜單標(biāo)簽等位置，在滿足排版面邏輯層級關(guān)系的同時，使不同題材文章具有不同的風(fēng)格和效果
  ▲作為英國三大報之一的《衛(wèi)報》（The Guardian），其網(wǎng)站使用了龐大的家族字體Guardian，這一家族字體是由多款名副其實(shí)的定制字體組成，其中正文字體的設(shè)計(jì)力求在不減少字?jǐn)?shù)的前提下，在每一頁制造更多的空白以帶來更容易舒適的閱讀
  如果將Webfont技術(shù)搭載可變字體又將帶來怎樣的驚喜呢？首先，可變字體的無極變化能夠?yàn)槎鄬蛹壭畔⒌呐虐嫣峁┎煌L(fēng)格和效果的字體樣式，可變字體將為頁面帶來更為自由的設(shè)計(jì)空間，讀者同時可以體驗(yàn)更為流暢的閱讀環(huán)境；其次，因?yàn)榭勺冏煮w的文件大小相較于家族字體有明顯的壓縮，更小的字體文件大小意味著更少的服務(wù)器相應(yīng)次數(shù)、更低的帶寬要求，頁面的加載時間將明顯縮短。
  ▲Webfont搭載可變字體的應(yīng)用演示頁面，當(dāng)激活web中嵌入的可變字體時，網(wǎng)頁會根據(jù)信息層級和排版效果自動調(diào)整字體樣式，使其更符合用戶的瀏覽習(xí)慣，本頁面由OLIVER SCH?NDORFER開發(fā)制作
  網(wǎng)頁適配
  不同的顯示設(shè)備具有不同的橫豎屏比例、屏幕分辨率，同時匹配不同的觀看距離。我們無法預(yù)測用戶會在多大設(shè)備、什么分辨率下打開網(wǎng)頁，頁面適配成為網(wǎng)頁設(shè)計(jì)師、前端開發(fā)工程師亟需解決的問題，因此，能夠自動響應(yīng)用戶設(shè)備環(huán)境的響應(yīng)式網(wǎng)頁設(shè)計(jì)成為潮流?？勺冏煮w的應(yīng)用，恰好能夠?yàn)轫憫?yīng)式網(wǎng)頁在字形層面的改變帶來便利，利用視覺縮放增強(qiáng)不同屏幕尺寸下的顯示輸出。
  ▲搭載可變字體的響應(yīng)式網(wǎng)頁設(shè)計(jì)，隨著文字區(qū)域變化，單個字符的字號、字重、字寬以及字符間距均有了相應(yīng)調(diào)整
  閱讀模式
  隨著對用戶體驗(yàn)的重視，系統(tǒng)閱讀模式的個性化探索得到越來越多的關(guān)注。蘋果公司在macOS Mojave以及最新的iOS 13系統(tǒng)中引入了深色模式，深色模式使用了一種較深的配色方案，蘋果用戶在系統(tǒng)偏好設(shè)置中選擇此模式后，整個系統(tǒng)，包括Mac隨附的應(yīng)用，以及第三方應(yīng)用的外觀都將全局性切換為深色背景，幫助用戶在系統(tǒng)上專注開展工作。
  ▲macOS Mojave系統(tǒng)內(nèi)置了深色模式，用戶可以根據(jù)使用習(xí)慣進(jìn)行深淺模式切換
  同時，越來越多的移動設(shè)備搭載了光線感應(yīng)器，來感應(yīng)外界光線的變化，從而反饋給設(shè)備，使其能夠根據(jù)光線的明暗自動調(diào)整屏幕亮度和對比度，提升用戶的閱讀體驗(yàn)。
  ▲搭載了光線感應(yīng)器的移動設(shè)備，能根據(jù)光線的明暗自動調(diào)整屏幕亮度和對比度
  如果將可變字體嵌入系統(tǒng)中，則可以在以上兩種情況下做出適當(dāng)響應(yīng)，通過字形的細(xì)微調(diào)整，來提高頁面文本的易讀性。
  方正字庫中文可變字體
  由于中文字體和西文字體存在巨大差異，中文字庫的字符集較大、字形復(fù)雜，實(shí)現(xiàn)字體無極可變的難度更高。作為中文字體設(shè)計(jì)領(lǐng)域的領(lǐng)導(dǎo)者，方正字庫以豐富的字體設(shè)計(jì)經(jīng)驗(yàn)為基礎(chǔ)，通過技術(shù)革新手段實(shí)現(xiàn)中文可變字體設(shè)計(jì)的探索。
  方正悠黑可變字體
  2017年11月，方正字庫發(fā)布了全球首款中文三軸可變字體——《方正悠黑》（點(diǎn)擊藍(lán)字閱讀），這款可變字體實(shí)現(xiàn)了字重軸（Weight）、字寬軸（Width）和字高軸（Height）三個軸的變化，未來考慮增加其它軸，如重心、中宮、筆畫粗細(xì)對比度等。
  方正悠黑可變字體中每個軸至少需要兩檔字形數(shù)據(jù)，提供字體設(shè)計(jì)的不同極端之間的特定變化；同時還允許在每個軸上添加中間檔數(shù)據(jù)，增加對于整個字形集或單個字形的中間設(shè)計(jì)的可能性，以便在設(shè)計(jì)空間變化時對字體適配性變化提供更精細(xì)的控制。
  方正悠宋可變字體
  隨著移動設(shè)備的廣泛使用，方正字庫于2018年初發(fā)布了全球第一款屏顯宋體——《方正悠宋》）。作為一款運(yùn)用最新技術(shù)手段的數(shù)字字體，方正悠宋也是一款具備字體無極變化特性的可變字體。
  方正悠宋可變字體支持字重和中宮維度的變化，設(shè)計(jì)師可以在字體粗細(xì)和字面寬度兩個方面對字體進(jìn)行細(xì)微的調(diào)整。字重與中宮的無級可變特性令方正悠宋可以滿足不同媒介情景的視覺需求，增加了悠宋的視覺識別與信息層級的可塑性層級。方正字庫在將宋體字變黑體字上的嘗試，也為中文可變字體的變化維度創(chuàng)造出新的可能。
  ▲方正悠宋可變字體已在實(shí)際字體產(chǎn)品中實(shí)現(xiàn)字重維度的變化
  ▲方正悠宋的中宮可變，以及由方正悠宋變?yōu)榉秸坪诘膶?shí)驗(yàn)性嘗試，開拓了中文可變字體新的變化維度
  結(jié)語
  隨著技術(shù)的改革創(chuàng)新，字體設(shè)計(jì)進(jìn)入了一個可以無限制變化的開放新紀(jì)元。可變字體的出現(xiàn)，使得在預(yù)定范圍內(nèi)對字體進(jìn)行任意放大、縮小、加粗、變細(xì)、拉伸或者彎曲等操作成為可能，設(shè)計(jì)師可以將一款字體調(diào)整成自己想要的比例、尺寸。
  字體形態(tài)改變是細(xì)微的，而這種細(xì)微的變化往往能在潛移默化中體現(xiàn)出非同一般的品質(zhì)。通過可變字體技術(shù)與不同場景的結(jié)合，能夠?qū)o極變化的可能性發(fā)揮到極致，幫助用戶選擇最符合需求的字體組合方式，從而創(chuàng)造出完美的用戶體驗(yàn)。最終，無論是用戶、設(shè)計(jì)師還是字體廠商，都將從這項(xiàng)技術(shù)的廣泛應(yīng)用中受益。