一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

Android系統(tǒng)字體規(guī)范與應(yīng)用探索 | 設(shè)計(jì)達(dá)人

 啊哈小李 2017-09-02


  • 1. 移動(dòng)設(shè)計(jì)中與字號(hào)有關(guān)的基本概念
  • px:Pixels即像素,基本原色素及其灰度的基本編碼。
  • DPI:dots per inch,是印刷上的記量單位,意思是每個(gè)英寸上,所能印刷的網(wǎng)點(diǎn)數(shù)。
  • PPI:pixels per inch 數(shù)字影像的解析度,意思是每英寸所擁有的像素?cái)?shù),即像素密度。
  • PPI = √(長(zhǎng)度像素?cái)?shù)2 + 寬度像素?cái)?shù)2) / 屏幕對(duì)角線英寸數(shù)
  • pt:Point,磅因,國(guó)際通行的印刷單位,是一個(gè)自然界標(biāo)準(zhǔn)的長(zhǎng)度單位。

    inch = 2.54cm = 25.4 mm = 72pt, 1pt≈0.35mm
    Photoshop里的字體單位pt和point不一樣。在Photoshop里,同樣是10pt的字,只要變換字體,字的高度就會(huì)變化。

  • dp:Density-independent pixels,以160PPI屏幕為標(biāo)準(zhǔn),則1dp=1px
  • dp和px的換算公式 :dp*ppi/160 = px
  • sp:Scale-independent pixels.安卓的字體單位,以160PPI屏幕為標(biāo)準(zhǔn),當(dāng)字體大小為 100%時(shí), 1sp=1px
  • sp 與 px 的換算公式:sp*ppi/160 = px

2. Android 系統(tǒng)默認(rèn)字體 Rotobo,限定使用以下字號(hào)

Android 系統(tǒng)默認(rèn)字體

3. Android 字體單位 sp 與 px 的換算

  • PPI = √(長(zhǎng)度像素?cái)?shù)2 + 寬度像素?cái)?shù)2) / 屏幕對(duì)角線英寸數(shù)
  • sp與px的換算公式:sp*ppi/160 = px

以三星Note2為例,PPI = √(12802 + 7202) / 5.5=267
Android 字體單位

經(jīng)測(cè)量,三星Note2的字體高度確實(shí)如此,見下圖:
三星Note2的字體高度

4. 規(guī)范字號(hào)的意義

保證相同字號(hào)的字在不同PPI屏幕上顯示的物理高度一致,下面來驗(yàn)證一下。

  • 設(shè)定 PPI為 267 時(shí),高度18sp(即 30px)的字的物理高度為 X,則:
    一英寸里的像素?cái)?shù) 267 / 一英寸里的毫米數(shù) 25.4mm = 30 / X
    X ≈ 2.86mm
  • 設(shè)定 PPI為 160 時(shí),高度18sp(即 18px)的字的物理高度為 Y,則:
    一英寸里的像素?cái)?shù) 160 / 一英寸里的毫米數(shù) 25.4mm = 18 / Y
    Y ≈ 2.86mm

綜上,X = Y,這就證明了同為18sp的字在 PPI分別為 267 和 160 時(shí),顯示的物理高度都是 2.86mm

5. 印刷業(yè)的規(guī)范字號(hào)的用法

看書的時(shí)候眼睛距離書本的最佳距離為 33cm,書本的閱讀距離比較接近于手機(jī)的閱讀距離,所以我們來參考下書本上印刷文字的規(guī)范。

印刷業(yè)已經(jīng)有成熟的行業(yè)字號(hào)標(biāo)準(zhǔn),如下表所示:
印刷業(yè)字號(hào)標(biāo)準(zhǔn)

其中正文常用的字號(hào)是六號(hào)(7.5p)、小五號(hào)(9p)、五號(hào)(10.5p),如下表所示:
字號(hào)

6. Android 規(guī)范字號(hào)的近似用法

通過計(jì)算出 Android規(guī)范字號(hào)的物理高度,找到每個(gè)字號(hào)最接近的印刷字號(hào):
Android字號(hào)規(guī)范

再根據(jù)印刷字號(hào)的用途,近似得出Android 規(guī)范字號(hào)的用法
Android字號(hào)規(guī)范2

7. 如何向前端輸出?

第一步:將sp 換算成px。但是px隨PPI 變化而變化,這一點(diǎn)可以從sp 與px的換算公式“sp*ppi/160 = px ”看出來。我們不能算出所有的情況,所以只計(jì)算首選需要適配的ppi 對(duì)應(yīng)的像素高度。

第二步:把算好的像素高度和換算公式“ sp * ppi/160 = px ”同時(shí)輸出給前端,這樣以后再換ppi,前端可以自動(dòng)計(jì)算。另外,前端代碼里定義字體高度用的也是px,所以設(shè)計(jì)師向前端輸出以px計(jì)算的字號(hào)尺寸是非常合適的。例如:
Andorid像素高度和換算公式

8. 如何在photoshop里選擇字號(hào)?

上文中,我們已經(jīng)算出了字體像素高度,把這些像素高度畫到ps 里,
再把你要使用的字體調(diào)到這樣的像素高度,得出photoshop 里對(duì)應(yīng)的字號(hào),用于設(shè)計(jì)。也就是說Photoshop 里的字號(hào)都需要根據(jù)實(shí)際情況,手動(dòng)調(diào)出來,沒有捷徑。例如ppi 為240 時(shí),對(duì)應(yīng)的像素高度和字體字號(hào)如下圖所示:
如何在photoshop里選擇字號(hào)


    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多

    久久精品国产亚洲av麻豆尤物| 国产精品视频一级香蕉| 中文字幕人妻av不卡| 日韩丝袜诱惑一区二区| 国产精品成人一区二区在线| 久久99精品日韩人妻| 成人你懂的在线免费视频| 国产精品日韩欧美第一页| 蜜臀人妻一区二区三区| 在线精品首页中文字幕亚洲| 日本一二三区不卡免费| 欧美一级内射一色桃子| 玩弄人妻少妇一区二区桃花| 欧美精品在线观看国产| 日韩人妻免费视频一专区| 九九热这里有精品20| 国产成人亚洲综合色就色| 国产精品二区三区免费播放心 | 欧美日韩国产免费看黄片| 国产精品免费视频专区| 国产中文字幕久久黄色片| 清纯少妇被捅到高潮免费观看| 九九视频通过这里有精品| 国产精品亚洲精品亚洲| 欧美日韩精品久久亚洲区熟妇人 | 午夜亚洲精品理论片在线观看| 91日韩欧美中文字幕| 大香蕉精品视频一区二区| 中文字幕乱码亚洲三区| 91爽人人爽人人插人人爽| 久久香蕉综合网精品视频| 欧美成人高清在线播放| 亚洲一区二区精品福利| 精品国产av一区二区三区不卡蜜| 日韩人妻一区二区欧美| 日韩人妻欧美一区二区久久| 视频一区日韩经典中文字幕| 亚洲综合伊人五月天中文| 亚洲午夜福利不卡片在线| 免费观看在线午夜视频| 久久精品国产99精品亚洲|