手机端应用的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>

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

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

手机端应用的CSS字体样式规范相关推荐

css font-family css 字体 css 字体样式
css font-family 大全 css 常用字体样式 css 字体 , css 字体样式好看的字体样式好看的字体样式大全参考地址: http://qq1368391900.git ...
css 字体样式设置
css字体样式(Font Style),属性时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
HTML与CSS——CSS字体样式
HTML与CSS--CSS字体样式字体样式 CSS 提供了很多属性来控制字体的外观. 常用属性有: font-size:设置字体大小. font-family:设置字体类型. font-weight ...
CSS字体样式（font）[详细]
CSS字体样式(font) 1. font-family 2. font-style 3. font-weight 4. font-size 5. font-variant 6. font CSS 中 ...
css字体样式 1204
css字体样式 1204 字体大小样式 font-size:字体大小 font-size: 20px; 字体家族 font-family:字体1名称,字体n名称 font-family: 华文行楷; ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
html中样式属性有哪些,css字体样式属性有哪些？
css字体样式属性有:1.font-size:字号大小.2.font-family:规定元素的字体系列.3.font-weight:字体粗细.4.font-style:字体风格.5.font:综合设置 ...
HTML5常用的文本标签及css字体样式属性
HTML5常用的文本标签标签描述标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1.H2.H3.H4.H5.H6 <p> 用于定义HTML中的段落 <br> ...
CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...

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

手机端应用的CSS字体样式规范相关推荐

最新文章

热门文章