移动端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>

原文地址:https://blog.51cto.com/xuqin/2399513

时间: 2024-10-09 10:20:41

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

让ie6(opera)支持微软雅黑字体

一直很喜欢微软雅黑字体,这也算是因个人审美的问题吧,最近在捣腾一些东西,竟然发现IE6和Opera浏览器对CSS中设置微软雅黑字体不感冒,纠结了一上午,终于找到了解决办法,如何让Opera和IE6支持微软雅黑呢?其实解决办法非常简单: 一.让IE6支持微软雅黑,添加一句声明: <html  lang="zh-CN"> 在网页的HTML标签内加入红色部分的声明,就可以了.框架资源分享 二.让Opera浏览器支持微软雅黑,通过CSS兼容性补救来实现: CSS代码: font-f

Font \&quot;微软雅黑\&quot; is not available to the JVM. See the Javadoc for more details.

1. 背景 在工作中使用JasperReport生成报表,会出现错误Font \"微软雅黑\" is not available to the JVM. See the Javadoc for more details. 2. 分析 开发环境是window7,并没有出现该问题.测试环境是linux,出现该错误.根据错误的字面意思,初步设想是linux服务器上没有该字体. 3. 安装字体 将window7上的中文字体安装到linux下 window7下字体所在位置:C:\Windows\

移动端 h5开发相关内容总结——CSS篇

移动端 h5开发相关内容总结——CSS篇 标签: css移动 2016-01-06 15:59 5536人阅读 评论(3) 收藏 举报  分类: HTML+CSS(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=n

FineReport中如何安装移动端H5插件

1. HTML5报表插件安装及使用编辑 插件安装 插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索,这里就不做详细介绍了. 移动端HTML5报表使用方法 安装好插件后,在浏览器中调用时,需要在报表路径后面加上参数op=h5.但是PC端不完全支持H5效果. 移动端添加参数前后效果: fs上挂报表的时候不用带参数,会自动识别是不是在手机上访问的.另外移动端的H5插件,图表是只支持显示新图表. 2. Html5报表制作及手机效果编辑 手机页面大小 制作手机上的报表与PC端报表制作过

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

移动端H5页面注意事项

1. 单个页面内容不能过多 设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信.QQ等. 使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住. 如下图(QQ内置浏览器):页面设计尺寸为 7501

解惑好文:移动端H5页面高清多屏适配方案 (转)

转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makegrid.js https://segmentfault.com/a/1190000006839117 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334).

移动端h5页面的设计稿尺寸

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例 还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

移动端H5 css3模拟边框最新研究(超实用) by FungLeo

移动端H5 css3模拟边框最新研究(超实用) by FungLeo 前言 在之前写的一篇博文<移动端H5的一些基本知识点总结 第五节 边框的处理>中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷. 为什么要模拟边框,而不是直接写边框? 因为边框要计算盒子模型.而我们在移动端可能使用的是自适应布局的方式.这样计算边框很费劲. 因此,使用模拟边框的