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

移动端不支持pc端的各种字体。移动端各种系统有各自的字体:

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

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

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

总而言之,就只有一种办法:引入字体库。(字体库一般10M左右,牺牲打开速度)

字体到站长去下:http://font.chinaz.com/

引入:

<style>
@font-face { 
  font-family: STKAITI; /*这里是说明调用来的字体名字*/ 
  src: url(‘STKAITI.TTF’); /*这里是字体文件路径*/ 
	}
	
	.content{  font-family: STKAITI;}
</style>
<div class="content">哒哒哒哒哒哒多多多多多,我在手机端也是现实楷体了啦啦</div>