|
本人主要是前后端开发，设计不是很在行，在没有设计师的情况下，调字体样式真的很苦恼。这里整理一下自己通用的字体大小和颜色，方便后续直接使用。
这里是借鉴了微信小程序的视觉规范，主要是用于手机端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;
}
实际使用的时候需要字体大小和颜色配合使用，如标题的样式：
个人针对设计的一点点拙见： 设计应该只有两种：一种是华丽富态式，页面酷炫，这种设计就比较复杂，需要专业的设计师才能完成。 另一种就是简单化，页面就几种颜色的搭配，但看上去很舒心。这一种普通人就可以设计，当然我说的是普通的设计（直击心灵的设计还是需要专业的人才能完成！）。
我觉得这两种也符合人的本性，人一方面人总是想追求华丽，对艳丽的事情充满好奇心，但一方面也希望简简单单，自由自在！
|