手機端應用的CSS字體樣式規範

本人主要是前後端開發，設計不是很在行，在沒有設計師的情況下，調字體樣式真的很苦惱。這裏整理一下自己通用的字體大小和顏色，方便後續直接使用。

這裏是借鑑了微信小程序的視覺規範，主要是用於手機端H5應用、像小程序、uni-app等。

/*只能爲阿拉伯數字，金額、時間等，如彈出支付的金額字體大小*/
.font40pt {
  font-size: 40pt;
}

/*頁面大標題字體大小*/
.font20pt {
  font-size: 20pt;
}

/*頁面大按鈕字體字體大小，需要着重顯示的字體大小*/
.font18pt {
  font-size: 18pt;
}

/*列表標題字體大小*/
.font17pt {
  font-size: 17pt;
}

/*稍微次要的字體大小*/
.font16pt {
  font-size: 16pt;
}

/*次要描述信息，列表摘要字體大小*/
.font14pt {
  font-size: 14pt;
}

/*輔助描述信息,如鏈接 小按鈕*/
.font13pt {
  font-size: 13pt;
}

/*說明文字，版權信息等字體大小*/
.font11pt {
  font-size: 11pt;
}

/*主要內容字體顏色*/
.black {
  color: #000;
}

/*主要和次要內容之間字體顏色*/
.semi {
  color: #353535;
}

/*次要內容字體顏色*/
.grey {
  color: #888;
}

/*時間戳與表單缺省值字體顏色*/
.light {
  color: #b2b2b2;
}

/*鏈接字體顏色*/
.blue {
  color: #576b95;
}

/*完成成功等字體顏色*/
.green {
  color: #09bb07;
}

/*出錯和金額等字體顏色*/
.red {
  color: #e64340;
}

實際使用的時候需要字體大小和顏色配合使用，如標題的樣式：

<div class="font17pt black"></div>

個人針對設計的一點點拙見：
設計應該只有兩種：一種是華麗富態式，頁面酷炫，這種設計就比較複雜，需要專業的設計師才能完成。
另一種就是簡單化，頁面就幾種顏色的搭配，但看上去很舒心。這一種普通人就可以設計，當然我說的是普通的設計（直擊心靈的設計還是需要專業的人才能完成！）。

我覺得這兩種也符合人的本性，人一方面人總是想追求華麗，對豔麗的事情充滿好奇心，但一方面也希望簡簡單單，自由自在！