移动端的字体

最近在学习的移动端的知识，顺便把笔记整理一下，大家都知道每个浏览器都有的默认的字体，当然每个移动的设备也是有默认的字体的，安卓和ios ，winphone 都是有自己的默认的字体，可是这3移动设备都没有微软雅黑的字体，所以在设置的我们通常是这么写：

@font-face {
font-family: ‘MicrosoftYaHei';
src: url(‘MicrosoftYaHei.eot’); /* IE9 Compat Modes */
src: url(‘MicrosoftYaHei.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘MicrosoftYaHei.woff’) format(‘woff’), /* Modern Browsers */
url(‘MicrosoftYaHei.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘MicrosoftYaHei.svg#MicrosoftYaHei’) format(‘svg’); /* Legacy iOS */
}

让客户自己下载的微软雅黑的字体的，体验是太差，还有的流量太耗的
ios 系统

• 默认中文字体是Heiti SC

• 默认英文字体是Helvetica

• 默认数字字体是HelveticaNeue

• 无微软雅黑字体

android 系统

• 默认中文字体是Droidsansfallback

• 默认英文和数字字体是Droid Sans

• 无微软雅黑字体

winphone 系统

• 默认中文字体是Dengxian(方正等线体)

• 默认英文和数字字体是Segoe

• 无微软雅黑字体

结论

• 各个手机系统有自己的默认字体，且都不支持微软雅黑

• 如无特殊需求，手机端无需定义中文字体，使用系统默认

• 英文字体和数字字体可使用 Helvetica ，三种系统都支持

/* 移动端定义字体的代码 */body{font-family:Helvetica;}

还有一点很重点的移动端是字体是用px还是是em？

我的个人习惯是用px的，因为我的em换算不是太好的，

1. EM作为相对单位，是基于父级单位来计算，换算起来有点麻烦

2. PX是绝对单位，但是，严格来说PX也是相对的单位，因为屏幕分辨率的不同，PX的大小也是不同

其实现在还有一种的“rem”的

1. REM:Equal to the computed value of ‘font-size’ on the root element.

2. IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem

3. 换算简单，

 

假设：

 

默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

 

html{
font-size:62.5%; /* 10/16=62.5% */
}

body{
font-size:12px;
font-size:1.2rem ; /* 12/10=1.2 */
}

p{
font-size:14px;
font-size:1.4rem;
}

如果还是不会就用： CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，