圖片與字體 · 移動Web開發

[TOC] [關于webapp中的文字單位的一些搗騰](http://www.html-js.com/article/2400) # 圖片移動端項目中 @2x 圖和 @3x 圖的使用 [CSS3的srcset size屬性1x 2x 3x](https://blog.csdn.net/Phil_Young/article/details/53729252) [移動端關于@2x與@3x的圖片加載問題解決方法](https://blog.csdn.net/zfangls/article/details/53348814) [移動端關于@2x與@3x的圖片加載實現方法（基于vue.js+stylus）](https://blog.csdn.net/qq_38229202/article/details/69676697) # 字體 [http://fontello.com/](http://fontello.com/) # [IcoMoon](https://icomoon.io/app) ## 精簡字體 [字蛛](http://font-spider.org/) 中文WebFont自動化壓縮工具 ## iconfont [iconfont](https://www.iconfont.cn/) ## 付費 [有字庫](https://www.webfont.com/search/index/font) ## 手機系統不支持微軟雅黑字體 **手機系統 ios、android 等是不支持微軟雅黑字體**，為了滿足產品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字體呢？三大手機系統的字體資料： ### ios 系統默認中文字體是Heiti SC 默認英文字體是Helvetica 默認數字字體是HelveticaNeue 無微軟雅黑字體 ### android 系統默認中文字體是Droidsansfallback 默認英文和數字字體是Droid Sans 無微軟雅黑字體 ### winphone 系統默認中文字體是Dengxian(方正等線體) 默認英文和數字字體是Segoe 無微軟雅黑字體 ### 結論使用系統默認的字體所達到的視覺效果跟使用微軟雅黑字體沒有明顯的差別，權衡利弊，最終說服了產品經理放棄使用微軟雅黑的想法。各個手機系統有自己的默認字體，且都不支持微軟雅黑；如無特殊需求，手機端無需定義中文字體，使用系統默認；英文字體和數字字體可使用 Helvetica ，三種系統都支持； ```css /* 移動端定義字體的代碼 */ body{font-family:Helvetica;} ``` ## 移動端字體單位font-size選擇px還是rem 1. 對于只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用`px`即可。 2. 對于需要適配各種移動設備，使用`rem`，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。 rem配置參考，適合視覺稿寬度為640px的： ```html <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> ``` ```css html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}} ``` 體驗demo：[http://peunzhang.github.io/demo/rem/index.html](http://peunzhang.github.io/demo/rem/index.html) ## js動態改變字體font-size的值一：頁面的所有元素都不需要進行任何改變。 ```HTML <script> (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //檢測是否微信 function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } window.onload = function() { if (isWeiXin()) { $(".header-more").hide(); } } </script> ``` 二： ```JS (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1, dpr = window.top === window.self ? dpr : 1, //被iframe引用時，禁止縮放 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; docEl.dataset.dpr = dpr; var recalc = function() { var width = docEl.clientWidth; if (width / dpr > 1080) { width = 1080 * dpr; } docEl.dataset.width = width docEl.dataset.percent = 100 * (width / 1080); docEl.style.fontSize = 100 * (width / 1080) + 'px'; }; recalc() if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window); ``` 以上，注意出現`1080`的地方，這里改成設計圖的寬度即可，這段代碼的好處是根元素`font-size`是`100` 計算方便，若要給頁面設置寬度 `1080 = 10.8rem` `640 = 6.4rem` 等，字號的話直接根據設計圖除以`100`即可，注意頭部別忘了。三：請問，在底部用js改變html的font-size的話，會造成整個頁面閃爍重新布局嗎？回答：會造成閃爍，但是可以現在css里根據屏幕初始化一遍html 的font-size，然后在用js計算的話，區別不是很大。例如： ```css @media only screen and (max-width: 320px){html{font-size: 9px;} } @media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} } @media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} } @media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} } @media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} } @media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} } @media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} } @media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} } @media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} } @media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} } @media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} } @media only screen and (min-width: 640px){html{font-size: 20px;} } ``` ## 參考 [《移動端使用字體的思考》](http://www.cnblogs.com/PeunZhang/p/3592096.html) [不同設備尺寸下的字體的調整：web app變革之rem](http://isux.tencent.com/web-app-rem.html)