我們一般情況下，設計師有自己的規范，前端也有自己的規范。
設計師用的一般是方正字體，而我們前端用的往往是系統默認字體。
那么如何才可以達到最佳效果呢？
如何才可以做到所有移動設備上看到的字體和字體大小效果達到一致(最佳效果)？
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-width:360px) and (max-width:384px){ html{font-size:64% !important;} } /*Iphone6,Iphone6plus*/ @media only screen and (min-width:385px) and (max-width: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-width:360px) and (max-width:384px){ html{font-size:64% !important;} } /*Iphone6,Iphone6plus*/ @media only screen and (min-width:385px) and (max-width: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里面，看上去的效果很不好！