移动端 - 字体

问题：设计师通常喜欢用微软雅黑进行设计，但在移动端写页面定义微软雅黑字体时，实际显示页面字体并非微软雅黑？

iso系统

• 默认中文字体是Heiti SC
• 默认英文字体是Helvetica
• 默认数字字体是HelveticaNeue
• 无微软雅黑字体

android系统

• 默认中文字体是Droidsansfallback
• 默认英文和数字字体是Droid Sans
• 无微软雅黑字体

winphone

• 默认中文字体是Dengxian(方正等线体)
• 默认英文和数字字体是Segoe
• 无微软雅黑字体

三种手机系统默认字体展示（肉眼难以看出差别，对产品体验几乎没有影响）

对比.png
总结:

1、三种系统均不支持微软雅黑；
   若需要可以使用font-face定义微软雅黑并存放至服务器，在需要时自动下载，
   但是会消耗用户流量，对页面打开速度造成延迟
2、若无特殊需求，手机端无需定义 中文 字体，使用 系统默认；
3、英文和数字 可使用 Helvetica，三种系统均支持

拓展:如何自定义字体？

1、下载所需字体至本地。(字体下载网址推荐：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type)
2、使用：

自定义字体.png
注：正常下载字体后并不是所有的字体格式都有，可以使用第三方工具转换fontsquirrel
第三方转换界面.png
下载后，将相应的字体格式解压到一个新建的文件夹中，就可以在项目中定义使用啦，如：
字体存放文件夹.png
页面使用.png
效果图.png
友情提示：若项目是 英文网站，有较多特殊字体效果，建议使用 font-face
     若项目是 中文网站，建议使用 图片
     加载英文字体和图片没多大区别
     加载中文字体太大了，会影响项目某些性能的优化

本文是在移动端开发时遇到的问题，在网上搜索又再次的整理，参考文章：
https://www.cnblogs.com/mofish/p/4332937.html
https://www.w3cplus.com/content/css3-font-face