移动端字体和字体大小规范

我们一般情况下，设计师有自己的规范，前端也有自己的规范。

设计师用的一般是方正字体，而我们前端用的往往是系统默认字体。

那么如何才可以达到最佳效果呢？

如何才可以做到所有移动设备上看到的字体和字体大小效果达到一致(最佳效果)？

1，使用网络提供的webfont字体库，比如是:

http://www.iconfont.cn/webfont/#!/webfont/index

这个是阿里妈妈webfont平台提供的，思源字体，一般情况下，设计师只要找个跟自己平常差不多的就可以，

然后，由前端来下载这个字体库。

2，重置浏览器默认样式时，字体font-size：62.5%的时候，我们要找准断点来做好分析。

我先共享我的样式

@charset "utf-8";*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:none;-webkit-tap-highlight-color:transparent}a:focus,body,input:focus{-webkit-tap-highlight-color:transparent}a,body,img{-webkit-touch-callout:none}body,html{height:100%}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{color:#000;-webkit-user-select:none;-webkit-overflow-scrolling:touch}article,aside,blockquote,body,button,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,input,li,nav,ol,p,section,td,textarea,th,ul,audio,canvas,progress,video,input[type=checkbox],input[type=radio]{margin:0;padding:0;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}button,select{text-transform:none}input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=checkbox],input[type=radio],input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,textarea{-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input::-ms-clear{display:none}textarea{resize:none}article,button,input,p,select,span,textarea,h1,h2,h3,h4,h5,h6{line-height:2rem}h1,h2,h3{font-weight:500}strong{font-weight:700}a:focus{outline:thin dotted}a:focus,input:focus{-webkit-user-modify:read-write-plaintext-only}a,a:active,a:hover{text-decoration:none}a{outline:0;background:rgba(0,0,0,0)}fieldset,img{border:0}img,video{max-width:100%}em,i{font-style:normal}table{border-collapse:collapse;border-spacing:0}audio,canvas,progress,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}del{text-decoration:line-through}hr{height:0;-webkit-box-sizing:content-box;box-sizing:content-box}ol,ul{list-style:none}.hide{display:none}.block,.show{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}.tac{text-align:center}.tal,caption,th{text-align:left}.tar{text-align:right}.dib{display:inline-block}.vab{vertical-align:bottom}.vas{vertical-align:sub}.vam{vertical-align:middle}.vat{vertical-align:top}.grid,.grid:after,.grid:before,.wrap,.wrap:after,.wrap:before{-webkit-box-sizing:border-box;box-sizing:border-box}.grid:after,.grid:before{display:table;content:"";line-height:0}.grid:after{clear:both}.grid{margin:0;padding:0;list-style-type:none}.grid>.grid{float:left;clear:none;margin:0!important}

@font-face{font-family:"webfont";src:url('webfont.eot');src:url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.woff') format('woff'),url('webfont.ttf') format('truetype'),url('webfont.svg#webfont') format('svg')}
body{font-family:"webfont" !important;font-size:1.318rem;font-style:normal;-webkit-font-smoothing:antialiased}
small{font-size:1.2rem}
/*字体自适应:以1.2rem为最小字体大小,1.318rem为常规字体大小,1.7rem为副标题,1.9rem为标题*/
h4{font-size:1.9rem}
h5{font-size:1.7rem}
h6{font-size:1.6rem}
/*分情况来做,不是所有页面都需要字体随着屏幕大小改变而改变的.*/
/*三星大屏幕机最低宽度:note2-note3,S2-S4*/
@media only screen and (min-360px) and (max-384px){
    html{font-size:64% !important;}
}
/*Iphone6,Iphone6plus*/
@media only screen and (min-385px) and (max-435px) {
    html{font-size:82.5% !important;}
}

我们下载好字体库后，放到css里面:

@font-face{font-family:"webfont";src:url('webfont.eot');src:url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.woff') format('woff'),url('webfont.ttf') format('truetype'),url('webfont.svg#webfont') format('svg')}

然后定义全局都是使用改字体和设置常规字体大小:

body{font-family:"webfont" !important;font-size:1.318rem;font-style:normal;-webkit-font-smoothing:antialiased}
small{font-size:1.2rem}
/*字体自适应:以1.2rem为最小字体大小,1.318rem为常规字体大小,1.7rem为副标题,1.9rem为标题*/
h4{font-size:1.9rem}
h5{font-size:1.7rem}
h6{font-size:1.6rem}

上面的都是基于font-size:62.5%时设置的情况；现在我们该设置不同设备大小的字体了:

/*分情况来做,不是所有页面都需要字体随着屏幕大小改变而改变的.*/
/*三星大屏幕机最低宽度:note2-note3,S2-S4*/
@media only screen and (min-360px) and (max-384px){
    html{font-size:64% !important;}
}
/*Iphone6,Iphone6plus*/
@media only screen and (min-385px) and (max-435px) {
    html{font-size:82.5% !important;}
}

最后，我们设计师和前端要做的是拿出至少3部手机来:320px,360px,414px(小米，华为，苹果6+)；

然后，设计师来看字体的视觉效果，前端负责调整百分比和rem的大小就可以了！(注意:视觉效果根据设计师和产品不同来分别定义大小)

我现在分享我的html页面:

<!DOCTYPE html>
<html>
    <head>
        <title>首页</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta content="telephone=no,email=no" name="format-detection" />
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="css/template.css"/>

    </head>

    <body>
        <p style="font-size:1.8rem;">帖子详情</p>
        <p style="font-size:1.7rem;">日本创意家的微型日历访谈录<span style="font-size:1.2rem;margin-left:20px;">1小时前</span></p>
        <article style="font-size:1.4rem;">
            从2011年开始，tatsuya tanaka就一直在创作“微型日历”系列作品，该系列作品描述的是口袋大小的日常生活场景，每天都有新的作品更新。
开始的时候这只是他的摄影作品，拍摄一些立体小人的日常生活场景，如今已经发展成为一项长期的项目……一份他不太可能停下来的事业。我们和这位来自日本的创意家进行了一次对话，讨论了他的创作动力，以及已经制作的1000多个场景，以及他最喜欢的、对他来说倾注了许多个人情感的作品。
        </article>
    </body>

</html>

我这边的效果基本是保持到字体和字体大小在相应的设备上一致效果的！

最后我发现一个小问题：网络字库都比不上系统字库的字体数量多，所以某些字是没在webfont里面，看上去的效果很不好！