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

abcd23212年前前端开发738

使用自定义字体时候,很容易像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动画是可以暂停的

css动画是可以暂停的

css动画大家都不陌生,但是你知道css动画是可暂停的吗?如果你不知道就来看看吧。虽然用过很多次animation,但是也就前几天才知道动画是可以暂停的,可见自己对动画的了解还是不够深,一起来学习一下...

Ueditor百度编辑器中的 setContent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,bool...

PHP实现将textarea的值根据回车换行拆分至数组

textarea回车换行为 \r\n$keyword_list = trim($_REQUEST['keywords']); $keyword_arr ...

实现checkbox 翻页后,仍保持选中状态

使用的技术 localStorage.setItem(key,val); localStorage.getItem(key); <input...

CSS字体font-family的正确选择方案

本文主要介绍的是CSS字体font-family的正确选择方案,由于设计稿和平台的不同,导致了制作有时候无法还原设计稿,理清各种平台字体区别,有助于做出最好的选择。大家都知道,在不同操作系统、不同游览...

谷歌在线字库应用

Google Fonts 提供了超过 600 种的高质量的字体,所有的浏览器都兼容,无需引入 JavaScript,简单易用,更重要的是,免费。如何使用 Google Fonts在线字库地址:http...

发表评论    

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