文档章节

移动端的字体

任飘扬
 任飘扬
发布于 2015/09/01 14:59
字数 685
阅读 14
收藏 0
app

最近在学习的移动端的知识,顺便把笔记整理一下,大家都知道每个浏览器都有的默认的字体,当然每个移动的设备也是有默认的字体的,安卓和ios ,winphone 都是有自己的默认的字体,可是这3移动设备都没有微软雅黑的字体,所以在设置的我们通常是这么写:

@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;}

还有一点很重点的移动端是字体是用px还是是em?

我的个人习惯是用px的,因为我的em换算不是太好的,

  1. EM作为相对单位,是基于父级单位来计算,换算起来有点麻烦

  2. PX是绝对单位,但是,严格来说PX也是相对的单位,因为屏幕分辨率的不同,PX的大小也是不同

其实现在还有一种的“rem”的

  1. REM:Equal to the computed value of ‘font-size’ on the root element.

  2. IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem

  3. 换算简单,

T1VhurXvNXXXb9uvne-700-270

 

假设:

 

默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

 

html{
font-size:62.5%; /* 10/16=62.5% */
}

body{
font-size:12px;
font-size:1.2rem ; /* 12/10=1.2 */
}

p{
font-size:14px;
font-size:1.4rem;
}

如果还是不会就用: CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,


© 著作权归作者所有

任飘扬
粉丝 0
博文 3
码字总数 2564
作品 0
合肥
程序员
私信 提问
提高Interface Builder高效工作的8个技巧

使view的Size与view中的Content相适应 很惭愧的是最近才发现这个功能——能节约大量时间。 选中任意的一个view,然后Editor->Size to Fit Content,或者简单的按 ⌘= 接着就会按照下面的规则...

Leon_wy
2014/03/19
212
0
浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联
2016/08/19
97
0
浅谈-web屏幕适配的解决方案

浅谈-web屏幕适配的解决方案 就目前看来,web的屏幕适配是贯穿整个前端行业的,如常见的PC端,移动端,响应式,小程序等。 PC端 特点 PC端的屏幕具备以下特点: 屏幕大小一般是大于 用户会经...

那个不懂
07/07
0
0
浅谈移动端布局问题

移动端推广速度快,效果好,越来越多的企业,商家开始重视移动站的建设和移动页面(h5)的制作。随着移动页面的玩法越来越多,对前端技术的要求也会越来越高。选择合适的布局,是写好移动页面...

我是小谷粒
2017/12/05
0
0
软件可访问性设计与测试漫谈——高对比度

什么是对比度 在我们常规的体检项目中,有两项眼科检查大家应该非常熟悉:视力和辨色力。医生会让你先坐在一张板凳上,遮住一只眼睛,对着一张写满E字的视力表,分辨每个E字的朝向。你能分辨...

迷之影
2015/08/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部