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