font-weight字體重量和font-family字體類型中的粗細度的對應關系

 

 

一.font-family: 

Google Fonts : 

https://fonts.google.com/

例如Barlow 字體：

 

 

 注意： 

1.  每個字體粗細類型都有 Italic 相對應，即為對應的斜體字

2. // 字體粗細類型(從細到粗)
   Thin
   ExtraLight
   Light
   Regular
   Medium
   SemiBold
   Bold
   ExtraBold
   Black

    

二. font-weight:

名稱： font-weight

取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

初始： normal

其中數值和文本取值的對應關系：

• 400： normal

• 700：bold

• bolder：指定外觀的重量大於繼承的值

• lighter：指定外觀的重量小於繼承的值

 

// 100 - 900 的數值和 font-family字體粗細類型的對應關系

100 - Thin

200 - Extra Light (Ultra Light)

300 - Light

400 - Regular (Normal、Book、Roman)

500 - Medium

600 - Semi Bold (Demi Bold)

700 - Bold

800 - Extra Bold (Ultra Bold)

900 - Black (Heavy)

 

 

 

前端頁面的規范化顯示

1. 統一使用彈窗，氣泡提示

2. 統一使用顏色，背景色，標題欄背景色， 文字顏色，主題色

3. 統一使用請求接口的反饋（包括請求狀態LOADING，失敗狀態：ERROR，正常狀態：NORMAL），失敗狀態需要統一使用占位顯示，請求狀態需要統一使用緩沖狀態

4. 請求方法必須使用統一的封裝，最好放到統一的頁面上，方便修改，最終通過統一的返回狀態來實現請求的全狀態控制 fetch

5. 涉及到編號的，必須使用枚舉，比如postMessage的code編號

6. 涉及到常量的，必須提取到獨立頁面進行配置 Constant，例如上面的LOADING、ERROR、NORMAL

7. 語言狀態的封裝，i18n，需要記錄當前的語言模式en/zh-hant/zh-hans

8. 盡量使用統一的封裝，例如CommonView，CommonStyle，CommonUtil，Images，Icons

9. 注意項目的目錄配置 page，container，presentation，component，general(icons，images， fonts，languages，pdf，ui，util，fetch，)

10. 統一Storage的使用

11. 統一Layout的使用