[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)
- 前言
- 中文字体
- 移动Web适配方案
- !移动Web基础!
- 详解适配相关概念
- 移动开发之设计稿
- 移动适配方案（一）
- 移动适配方案（二）
- vw+rem 实现移动端布局
- 移动端适配之雪碧图(sprite)背景图片定位
- 适配 iPhoneX
- 前端开发实战
- 打造自己的前端开发流程（Gulp）
- flexible.js案例讲解
- viewport 与 flexible.js解读
- 图片与字体
- 踩过的坑
- 浏览器默认样式
- 300ms点击延迟和点击穿透
- ios css
- CSS 常见问题
- Ionic v1混合开发
- Native App、Web App 、Hybrid App？
- ionic项目结构
- 混淆加密
- 解决问题
- cordova
- 环境配置
- 打包发布
- 问题
- 移动前端开发优化
- Web开发之抓包
- ===web移动开发资源===
- H5组件框架
- 调试集合
- 简单h5调试
- whistle
- devtools-pro