移动端html5手机网站如何定义字体font-family

abcd23211年前前端开发515

使用自定义字体时候,很容易像PC端那样定义,其实安卓和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 系统

 

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

 

android 系统

 

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

 

winphone 系统

 

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

 

总结:

各个手机系统有自己的默认字体,一般不支持我们常用字体,例如微软雅黑等;

如无特殊需求,手机端无需定义中文字体,使用系统默认即可。

英文字体和数字字体可使用 Helvetica ,三种系统都支持。

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}


相关文章

滚动条触动css动画效果——scrollreveal.js

滚动条触动css动画效果——scrollreveal.js

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollR...

取消chrome浏览器下input和textarea的默认样式

chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所...

CSS之文本两端对齐

CSS之文本两端对齐

说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。如上图,两端对齐...

纯CSS解决锚点跳转偏移

能用css自然不想用js解决,因为在加载方面,css总是先加载,并且速度很快。.div{    position:relative;   &nbs...

CSS实现单行、多行文本溢出显示省略号(…

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;...

JQ获取浏览器宽度,根据不同宽度给div赋值

var winWidth = $(window).width();     var winHeight =$...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。