iOS 9 字體的介紹與使用 領客專欄·Ping's Choice

2021-12-19 APPSO

對於 UI 設計師來說,iOS 9 的更新最為激動的是帶來了全新設計的中文字體「蘋方」以及英文字體「San Francisco」。

中文字體「蘋方」

在 iOS 9 前的中文字體「黑體」被人詬病已久:喇叭口設計、僅包含 2 個字重,不僅在 Retina 的屏幕上不能達到很好的顯示效果,並且隨著 iOS 7 開始的扁平化的設計語言,兩個字重的「黑體」已經完全無法勝任設計的需求。

就在去年,Google 聯合 Adobe 發布了「思源黑體」作為 Android 的默認中文字體,新的「思源黑體」不僅僅在字形上更易於在屏幕的閱讀,並且擁有 7 個字重,充分滿足了設計的需求。

終於,iOS 9 帶來了全新的「蘋方」,字形更加「優美」,且在屏幕的顯示也更加清晰易讀,擁有 6 個字重,滿足了日常的設計和閱讀需求。

英文字體「San Francisco」

而英文方面,蘋果加入了新的字體「San Francisco」,該字族包含了有兩個字體:為 iOS 和 OS X 設計的 SF,以及為 Watch OS 設計的 SF Compact ,而各自分為各自分為 Text 和 Display,其中前者 6 個字重,後者 9 個(多了三個斜體)。

SF Compact 這個字體目前專門為 Watch OS 設計,該字體最明顯的差異就是字碗(Bowl)的設計,Compact 的更加平直,顯的瘦長,手錶的界面非常小,通過增加字體間間距可以提高字體的閱讀性。

這個比較特別的是 SF 字體包含了兩個,分別為:SF-UI-Display 和 SF-UI-Text,他們的差異主要是字體間距的不同,Text 的字體間距較大,再小的字體中更加易讀。

而蘋果建議使用規則是:小於 19 pt 使用 Text,大於 19 pt 使用 Display,當你在 APP 裡面使用了 SF 字體後系統會自動選擇使用 SF-UI-Display 還是 SF-UI-Text。

SF 字體的另外一個特性是支持符號的整體居中,比如時間顯示,之前的 Helvetica 的冒號是不居中的,但是新的字體調用其 API 可以實現居中。

字體使用規則與實際中注意的問題

中文字體使用(字體選擇與字體調用名稱)

如果安裝了 Mac 最新的 El Capitan(10.11) 裡面就已經包含了該字體,較老的蘋果系統,或者 Windows 用戶就需要自行下載了。簡體中文字體的英文名稱是「PingFangSC」,其中有 6 個字重可供選擇。現在很多的 App 都是內嵌 Html5,那麼在設計的時候如何選擇字體的字重呢?在 Html 中我們選擇 Font-Weight 來設置字體的粗細,下圖就是字體的粗細與 Font-Weight 數字相對應的關係:

老設計稿的調整

如果之前在設計 App 使用的「黑體-簡」,它擁有兩個字重:細體和中等,對應的可以調整為蘋方的細體和常規體或中粗體,為什麼有個「或」呢?其實「黑體-簡」的中等字重是偏粗的,因為該字重是直接由「華文黑體」的中黑體拿來湊合使用的!

字體渲染問題

現在做 UI 界面設計主流都是使用 Photoshop 和 Sketch。在字體的選擇以外,怎麼樣設計稿才能更加接近 iOS 系統真實的渲染效果呢?我們需要注意兩點:渲染方式和字體大小選擇。

1. PS 中選擇蘋方字體,渲染方式選擇「Mac」

2. Sketch 因為使用的是 Mac 默認的渲染方式,所以不需要選擇,但是對與中文卻有問題,如下圖(上),解決方案就是:打開 Perferences → General 去掉 Font Rendering 的勾選就正常了。

Sketch 渲染對比

Sketch 設置(Sketch 3.41 已經將改設置改到第二個選項「Canvas」中)

英文字體使用

1. SF Compact 和 SF 字體區別,Watch OS 使用 SF Compact

2. 不同字號時候字體選擇,大於 19pt 選擇 SF-UI-Display,小於 19pt 選擇 SF-UI-Text

iOS 9 的新字體介紹就這些了,如有錯誤或者疑問,都可以告訴我。

聲明:「領客專欄」所有文章均由原作者授權 AppSolution 發布/轉載,任何個人/組織未經授權不得使用。本文轉載自「Ping’s Choice」,原文連結:http://zhuanlan.zhihu.com/pings/20287975

推薦閱讀:設計師必讀:如何提高設計的效率?

相關焦點

  • Just Press Record:Mac/iOS 雲錄音工具 領客專欄·Mac 玩兒法
    Just Press Record 目前支持的系統版本:iOS 9、watchOS 2 和 Mac OS X,需付費使用。聲明:「領客專欄」所有文章均由原作者授權 AppSolution 發布/轉載,任何個人/組織未經授權不得使用。本文轉載自「Mac 玩兒法」,原文連結:http://www.waerfa.com/just-press-record
  • 這 10 款音樂 App,好聽得不像免費的 領客專欄·電腦玩物
    所以今天這篇文章,我想整理我自己實際使用過後最喜歡的 10 款免費聽音樂 App,分析他們不同的特色,看看你會喜歡哪一款?或者你有額外推薦的遺珠之憾?而且他們都同時具備 Android 與 iOS 版本。
  • 無壓力學鋼琴,隨時聽你彈琴的虛擬家教 領客專欄·電腦玩物
    今天要介紹的「Skoove」,就是一個輕鬆的線上學鋼琴網站。它囊括了從初階到中階的各種鋼琴課程,從最基本的樂理、指法開始教起,直到彈奏練習。而最棒的地方是,它可以「即時聽我彈鋼琴」。我可以彈琴給「Skoove」聽,然後這個「非真人」的虛擬家教就可以指出我的錯誤、檢測我的學習進度。
  • iOS 13 | 無需越獄修改手機字體,附字體下載~
    02免越獄字體替換教程1.首先我們需要擁有一套字體,這裡小編在網上找了幾套比較好看的分享給大家:奇蹟秀公眾號回復「ios字體」獲取3.下載字體壓縮包,解壓,得到字體文件夾,作者都已經在字體文件夾裡面做好各個子目錄和文件的分類了,如下圖所示:我們將字體下載下來,導入FilzaEscaped中,進行解壓!
  • 卡通畫回顧展:不一樣的 Mac OS X 發展史 領客專欄·Mac 玩兒法
    PUMA發布時間:2001 年 9 月 25 日,版本號:OS X 10.1Power Mac G3s 以及 『Wall Street』 PowerBook G3s 不能夠運行 Panther,但使用 XPostFacto 等一些第三方增強工具可以幫助這些老機主。
  • 【IOS】IOS如何更改字體 更改字體測試
    2.陳奕辰:暫停戀愛關係3.孔維:我一直沒有做太多跟她未來的設想4.紀凌塵:你愛大海,我愛過你5.陶喆:希望名譽不要更加受損6.文章:願日後再不負人7.PGONE:這我嫂子8.九把刀:我很喜歡這個女孩子,但在愛情選擇上,我希望我的未來是我女朋友9.陳翔:當事人的我們最清楚這段感情的珍貴與純粹。
  • 詳解Ping工具的原理與應用
    百度百科上是這麼介紹這位幫手的:PING (Packet Internet Groper),英特網包探索器,用於測試網絡連接量的程序。Ping是工作在TCP/IP網絡體系結構中應用層的一個服務命令, 主要是向特定的目的主機發送ICMP(Internet Control Message Protocol 網際網路報文控制協議)Echo請求報文,測試目的站是否可達及了解其有關狀態。
  • 領客專欄·電腦玩物
    第一個值得好評的理由,就是它只是一款「Chrome 擴展插件」,意思是「Screencastify」能夠安裝在所有的 Chrome 瀏覽器,能夠跨平臺使用在 Windows、Mac 甚至是 Chromebook 上!
  • 領客專欄·電腦玩物
    Daemon Sync 滿足下面這些真實使用情況:當我回到家,只要我的 Android 手機連上家中無線網絡,就可以把手機裡最新照片影音(甚至任何指定資料夾內檔案)都自動備份到家中主機硬碟裡。而當我老婆回到家,她的iPhone 連上家中無線網絡,同樣可以把 iPhone 內照片自動備份到家中主機同一個位置。
  • 9 款欲罷不能的機器人主題遊戲 領客專欄·Game On
    遊戲分為兩部分,找道具和使用道具。遊戲中的密碼機關頗有難度,而遊戲中需要打穿小飛機遊戲才能看提示的設計確實令人眼前一亮。跟隨它一起在機械城觀光,看那些奇形怪狀或好或壞的鐵傢伙們,其實是一件蠻有趣的事情。
  • 領客專欄·電腦玩物
    聲明:「領客專欄」所有文章均由原作者授權 AppSolution 發布/轉載,任何個人/組織未經授權不得使用。本文轉載自「電腦玩物」,原文連結:http://www.playpcesor.com/2015/11/evernote-nine-note-mindmap.html
  • 如何在Mac和iOS的Pages中更改默認字體
    蘋果Pages文字處理應用程式中正文文本的默認字體是11點Helvetica Neue,但是您可以通過通常在文檔右側看到的「格式」面板輕鬆地將其更改為更有趣的字體。但是,打開另一個文檔,您將回到Helvetica。如果您總是希望使用自己選擇的字體的Pages文檔可以使用,則必須進行一些不太明顯的更改。這是在Mac和iPhone上製作它們的方法。
  • 《魔獸爭霸》選手Happy訪談:Ping太高不是問題
    For offline tournament, Blizzcon Europe Regionals 2008, I think.Q:在沒有奪冠的比賽裡,你大多數時候都是輸給了ORC。之前你也說過UvO很不平衡,所以你覺得UvO到底劣勢在哪兒?Happy:獸族三英雄配置太強。
  • 免費字體丨PingFang.都很熟悉的一個字體
    盲文的作用大概只有可愛,可以加入微信和QQ等社交軟體的備註裡面去,可可愛愛,~喜歡就去按教程安裝,不喜歡忽略掉就好~不影響字體使用~盲文符號收集於網絡,本公眾不享有任何版權,僅提供給本公眾號網友進行字體愛好交流,如您想通過免費下載的字體進行商業用途使用,本公眾號強烈提醒您聯繫對應廠商或原作者進行版權授權購買,如因為使用了免費下載的字體引起了版權訴訟糾紛,本公眾號不承擔任何責任
  • iPhone12ios14.2更新內容介紹 ios14.2專屬更新介紹
    iPhone12ios14.2更新內容介紹 ios14.2專屬更新介紹時間:2020-12-08 23:04   來源:今日頭條   責任編輯:毛青青 川北在線核心提示:原標題:iPhone12ios14.2更新內容介紹 ios14.2專屬更新介紹 iPhone12毛病是真的多,比如最開始的觸屏沒有反應,還有5g
  • 劇情控最愛:7 款情節大逆轉的遊戲 領客專欄·Game On
    幸運的是,一些經典掌機遊戲已經移植到了手機平臺,並且一些手機上的原創遊戲也開始注重情節的編排,也不乏創意出色的作品,希望本期介紹的這七款有情節反轉和詭計的遊戲能讓「劇情控」玩家滿意。1.《逆轉裁判 123 合集 HD》:最初的逆轉 #iOS《逆轉裁判》系列遊戲,對推理類遊戲愛好者而言如雷貫耳。
  • 計算機Ping命令的7種玩法,教你秒變大神!
    1、ping命令基礎 2、ping -t的使用 3、ping -a的使用 4、ping -n的使用 5、ping -l size的使用 6、ping -r count的使用
  • iOS12越獄 | 支持A12-A12X設備,獲取系統讀寫權限(即字體更換等)
    3.然後我們需要擁有一套字體,這裡小編在網上找了幾套比較好看的分享給大家:奇蹟秀公眾號回復「ios字體」獲取5.下載字體壓縮包,解壓,得到字體文件夾,作者都已經在字體文件夾裡面做好各個子目錄和文件的分類了,如下圖所示:我們將字體下載下來,導入FilzaEscaped中,進行解壓!
  • iOS 14.4.1越獄精品插件推薦
    總的來說的,越獄後的ios系統只要有iCleaner Pro清理垃圾就足夠使用了。/ios13cydia源越獄插件官方源推薦集合 ios源 第7張8,CokePokes降級插件App Store++ 官方源源:https://cokepokes.github.ioios13cydia源越獄插件官方源推薦集合 ios源 第8張9,Tateu`s repo眾多自定義插件源,例如微信修改提示音http://tateu.net
  • 2015 年最奇葩的 20 則遊戲業界新聞 領客專欄·Game On
    颳風了此前觸樂曾經介紹過一款非常有趣的遊戲《雪人難堆》,儘管編者不太喜歡這種需要動一點巧思的遊戲,但仍然被這個遊戲的玩法推動著玩了幾關,其中一個重要的原因是,這個遊戲讓我回憶起了童年——當我推動一個雪球,讓它從蘋果大小,一直滾到我自己再也推不動為止