图片与字体 · 移动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)