移动端h5不支持font-family里面的微软雅黑等等字体

野性酷女 2022-06-03 10:49 688阅读 0赞

首先我们来理解一下pc端为什么可以看到网站上设置的微软雅黑字体：微软在2006年12月发布微软雅黑随简体中文版Windows Vista一起发布，是Windows Vista默认字体。意思就是window7以上的微软系统都有默认的微软雅黑字体，都可以看到网站上设置的微软雅黑字体。（电脑上没有装网站上设置对应的字体，就看不到该字体的效果）  
对于其他的一些基本字体也差不多是这样的原理。  
![这里写图片描述][SouthEast]  
另外一点是：font-family的,假如客户终端不认识前面的字体,就自动切换到第二种字体,第二种不认识就切换到第三种,以此类推.假如都不能识别就调用默认字体 。如

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

手机上的默认字体少，而且没有微软雅黑等等字体，所以显示的效果如下：  
![这里写图片描述][SouthEast 1]  
那么在移动端html5如何定义字体font-family  
其实安卓和ISO系统，对中文字体是不支持，所以定义以后看到效果不是直接定义字体效果，如果需要定义  
大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载  
@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和android 系统他们字体到底支持哪些呢？

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

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

总结：  
各个手机系统有自己的默认字体，一般不支持我们常用字体，例如微软雅黑等；  
如无特殊需求，手机端无需定义中文字体，使用系统默认即可。  
英文字体和数字字体可使用 Helvetica都支持。  
/\* 移动端定义字体的代码 \*/  
body\{font-family:Helvetica;\}

[SouthEast]: /images/20220603/6c54f1cd002f4eb0b0bc2bfa12fa28a0.png
[SouthEast 1]: /images/20220603/0a08cf11108248fdab3bcd7be1e82a1f.png