美文网首页
移动端html5如何定义字体

移动端html5如何定义字体

作者: caikunhai | 来源:发表于2017-08-24 14:36 被阅读0次

在使用自定义字体时候,很容易像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;}

相关文章

  • web移动开发资源整理之常见问题

    移动端如何定义字体font-family 中文字体使用系统默认即可,英文用Helvetica 移动端字体单位fon...

  • 移动端html5如何定义字体

    在使用自定义字体时候,很容易像PC端那样定义,其实安卓和ISO系统,对中文字体是不支持,所以定义以后看到效果不是直...

  • 移动端定义字体和pc端定义字体

    移动端 各个手机系统有自己的默认字体,且都不支持微软雅黑,如无特殊要求,手机端无需定义中文字体,使用系统默认。英文...

  • 移动端web开发常见问题

    学前段好还是后端 常见问题 1、移动端如何定义字体font-family 三大手机系统的字体: ios系统 默认中...

  • 移动端常见兼容问题

    输入框弹起兼容 滚动兼容问题 html css js 移动端如何定义字体font-family 打电话发短信写邮件...

  • H5性能优化

    移动端HTML5页面前端性能优化。如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:1、PC优化...

  • html5 video 在移动端加载黑屏问题怎么解决 ?

    html5 video 在移动端加载黑屏问题怎么解决 ?html5 video 在移动端加载黑屏问题怎么解决 ?h...

  • H5项目常见问题及注意事项

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 常见问题:移动端如何定义字体font-fa...

  • 移动端 - 字体

    问题:设计师通常喜欢用微软雅黑进行设计,但在移动端写页面定义微软雅黑字体时,实际显示页面字体并非微软雅黑? iso...

  • Web移动端字体云云

    移动端应该如何动态设置字体大小? rem由来:font size of the root element,那么re...

网友评论

      本文标题:移动端html5如何定义字体

      本文链接:https://www.haomeiwen.com/subject/hdionttx.html