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

首先我们来理解一下pc端为什么可以看到网站上设置的微软雅黑字体：微软在2006年12月发布微软雅黑随简体中文版Windows Vista一起发布，是Windows Vista默认字体。意思就是window7以上的微软系统都有默认的微软雅黑字体，都可以看到网站上设置的微软雅黑字体。（电脑上没有装网站上设置对应的字体，就看不到该字体的效果）
对于其他的一些基本字体也差不多是这样的原理。

另外一点是：font-family的,假如客户终端不认识前面的字体,就自动切换到第二种字体,第二种不认识就切换到第三种,以此类推.假如都不能识别就调用默认字体。如

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

手机上的默认字体少，而且没有微软雅黑等等字体，所以显示的效果如下：

那么在移动端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;}

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

让ie6(opera)支持微软雅黑字体
一.让IE6支持微软雅黑,添加一句声明: <html lang="zh-CN"> 在网页的HTML标签内加入红色部分的声明,就可以了. 二.让Opera浏览器支持微软 ...
html微软雅黑无效,求让所有浏览器支持微软雅黑的方法_html/css_WEB-ITnose
浏览器字体在做一个网站,要求所有浏览器都是微软雅黑,可是有的电脑里压根就没雅黑,求解决办法谢谢了回复讨论(解决方案) 参考 http://dctxf.lofter.com/post/3d174_ ...
linux安装了中文字体，但是无法加载the font can not be loaded，the path[‘/usr/share/fonts/msyh/微软雅黑.ttf‘] is error
linxu安装了微软雅黑字体,但是代码发布上去之后,运行的时候又说不能加载这个字体, 报错日志:the font can not be loaded,the path['/usr/share/font ...
font face=微软雅黑 color=DodgerBlue*IncomesESL Analy*/font
本文章自学Rmarkdown+arule包读入数据 # 读取数据 Data <- read.csv("d://Rtest/数据挖掘组考核/IncomeESL_deal.csv&quo ...
vue+vant 移动端H5 商城项目_01
文章目录一.·Rem 布局适配 1. 安装 amfe-flexible 2. px转化rem 3. 全局配置 4. 重置样式表 5. 引入重置样式表二.组件安装和配置与封装 2.1. 安装less ...
移动端H5页面，上下滑动翻页
移动端H5页面,上下滑动翻页向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口向下滑动进入前一页 , 当前页(加CSS样 ...
h5页面如何切图_h5手机端切图的字体使用技巧
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑, 后来发到线上后,细心的产品经理发现页面 ...
亲测可用~ Ubuntu20.04 findfont: Font family [‘sans-serif‘] not found. Times New Roman 字体缺失
1-1:question description py在图片上描图的时候出现小方块,找不到正确的字体.比如: findfont: Font family ['sans-serif'] not foun ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

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

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

最新文章

热门文章