手机端应用的CSS字体样式规范

本人主要是前后端开发，设计不是很在行，在没有设计师的情况下，调字体样式真的很苦恼。这里整理一下自己通用的字体大小和颜色，方便后续直接使用。

这里是借鉴了微信小程序的视觉规范，主要是用于手机端H5应用、像小程序、uni-app等。

/*只能为阿拉伯数字，金额、时间等，如弹出支付的金额字体大小*/

.font4xl {
  font-size: 40px;
}

/*页面大标题字体大小*/

.font3xl {
  /* font-size: 20px; */
  font-size: 36rpx;
}

/*页面大按钮字体字体大小，需要着重显示的字体大小*/

.font2xl {
  /* font-size: 18px; */
  font-size: 32rpx;
}

/*列表标题字体大小*/

.fontxl {
  /* font-size: 17px; */
  font-size: 30rpx;
}

/*稍微次要的字体大小*/

.fontl {
  /* font-size: 16px; */
  font-size: 28rpx;
}

/*次要描述信息，列表摘要字体大小*/

.fontm {
  /* font-size: 14px; */
  font-size: 24rpx;
}

/*辅助描述信息,如链接 小按钮*/

.fonts {
  /* font-size: 13px; */
  font-size: 22rpx;
}

/*说明文字，版权信息等字体大小*/

.fontxs {
  /* font-size: 11px; */
  font-size: 20rpx;
}

/*主要内容字体颜色*/

.black {
  color: #000;
}

/*主要和次要内容之间字体颜色*/

.semi {
  color: #353535;
}

/*次要内容字体颜色*/

.grey {
  color: #888;
}

/*时间戳与表单缺省值字体颜色*/

.light {
  color: #b2b2b2;
}

/*链接字体颜色*/

.blue {
  color: #576b95;
}

/*完成成功等字体颜色*/

.green {
  color: #09bb07;
}

/*出错和金额等字体颜色*/

.red {
  color: #e64340;
}

.white {
  color: #fff;
}

.primary {
  color: #09bb07;
}

/*背景颜色*/

/*主要内容字体颜色*/

.black-bg {
  color: #000;
}

/*主要和次要内容之间字体颜色*/

.semi-bg {
  background-color: #353535;
}

/*次要内容字体颜色*/

.grey-bg {
  background-color: #888;
}

/*时间戳与表单缺省值字体颜色*/

.light-bg {
  background-color: #b2b2b2;
}

/*链接字体颜色*/

.blue-bg {
  background-color: #576b95;
}

/*完成成功等字体颜色*/

.green-bg {
  background-color: #09bb07;
}

/*出错和金额等字体颜色*/

.red-bg {
  background-color: #e64340;
}

.white-bg {
  background-color: #fff;
}

.base-bg {
  background-color: #fff5ee;
}

.primary-bg {
  background-color: #09bb07;
}

.margin-top-2 {
  margin-top: 2rpx;
}

.margin-top-4 {
  margin-top: 4rpx;
}

.margin-top-6 {
  margin-top: 6rpx;
}

.margin-top-8 {
  margin-top: 8rpx;
}

.margin-top-10 {
  margin-top: 10rpx;
}


.margin-top-12 {
  margin-top: 12rpx;
}

.margin-top-16 {
  margin-top: 16rpx;
}

实际使用的时候需要字体大小和颜色配合使用，如标题的样式：

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

个人针对设计的一点点拙见：
设计应该只有两种：一种是华丽富态式，页面酷炫，这种设计就比较复杂，需要专业的设计师才能完成。
另一种就是简单化，页面就几种颜色的搭配，但看上去很舒心。这一种普通人就可以设计，当然我说的是普通的设计（直击心灵的设计还是需要专业的人才能完成！）。

我觉得这两种也符合人的本性，人一方面人总是想追求华丽，对艳丽的事情充满好奇心，但一方面也希望简简单单，自由自在！