[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