文字样式
文字大小
rem 的基础像素为 20px，也就是说在不改变 html 根标签的 font-size 之前 1rem = 20px。
提示
作者做了屏幕适配：
屏幕宽度超过 400px 则 1rem = 21.33333333px；
屏幕宽度超过 414px 则 1rem = 21px；
屏幕宽度超过 480px 则 1rem = 25.6px。
页面默认文字大小为 0.8rem 也就是 16px。
H1 ~ H6文字的 font-weight 为 400。
H1 文字大小为 1.2rem；
H2 文字大小为 1rem；
H3 文字大小为 0.8rem；
H4 文字大小为 0.7rem；
H5、H6、P 文字大小为 0.7rem，文字颜色为 #757575。
提示
H1~H6 均有 small 样式：
h1~h6 small 的字体不加粗 line-heihgt: 1，文字颜色为 #757575；
h1~h3 small 的字体大小为原字体大小的 65%；
h4~h6 small 的字体大小为原字体大小的 75%；
示例代码：<h1><small>小号标题</small></h1>
针对文字做了几个固定的大小供大家来选择，.aui-font-size-*;
具体有以下几款：
.aui-font-size-12 {font-size: 0.6rem;}
.aui-font-size-14 {font-size: 0.7rem;}
.aui-font-size-16 {font-size: 0.8rem;}
.aui-font-size-18 {font-size: 0.9rem;}
.aui-font-size-20 {font-size: 1rem;}
文字颜色
针对文字做了几个固定的色值供大家来选择，.aui-text-*;
具体有以下几款：
.aui-text-default {color: #212121;}
.aui-text-white {color: #ffffff;}
.aui-text-primary {color: #00bcd4;}
.aui-text-success {color: #009688;}
.aui-text-info {color: #03a9f4;}
.aui-text-warning {color: #ffc107;}
.aui-text-danger {color: #e51c23;}
.aui-text-pink {color: #e91e63;}
.aui-text-purple {color: #673ab7;}
.aui-text-indigo {color: #3f51b5;}
示例源码
<section class="aui-content-padded">
<h1>标题一 H1 1.2rem</h1>
<h2>标题二 H2 1rem</h2>
<h3>标题三 H3 0.8rem</h3>
<h4>标题四 H4 0.7rem</h4>
<h5>标题五 H5 0.7rem #757575</h5>
<h6>标题六 H6 0.7rem #757575</h6>
<p>P标签字体，默认为0.7rem，文字颜色#757575</p>
<div class="aui-content">
内容区域，AUI 2.0色彩及尺寸按照Material Design标准设计
</div>
</section>
<section class="aui-content">
<ul class="aui-list">
<li class="aui-list-header">
文字颜色值对应
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-default">default</div>
<div class="aui-list-item-right">#212121</div>
</div>
</li>
<li class="aui-list-item" style="background-color: #CCC;">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-white">white</div>
<div class="aui-list-item-right">#ffffff</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-primary">primary</div>
<div class="aui-list-item-right">#00bcd4</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-success">success</div>
<div class="aui-list-item-right">#009688</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-info">info</div>
<div class="aui-list-item-right">#03a9f4</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-warning">warning</div>
<div class="aui-list-item-right">#ffc107</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-danger">danger</div>
<div class="aui-list-item-right">#e51c23</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-pink">pink</div>
<div class="aui-list-item-right">#e91e63</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-purple">purple</div>
<div class="aui-list-item-right">#673ab7</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-text-indigo">indigo</div>
<div class="aui-list-item-right">#3f51b5</div>
</div>
</li>
</ul>
</section>