移动端字体和字体大小规范

我们一般情况下,设计师有自己的规范,前端也有自己的规范。

设计师用的一般是方正字体,而我们前端用的往往是系统默认字体。

那么如何才可以达到最佳效果呢?

如何才可以做到所有移动设备上看到的字体和字体大小效果达到一致(最佳效果)?

1,使用网络提供的webfont字体库,比如是:

http://www.iconfont.cn/webfont/#!/webfont/index

这个是阿里妈妈webfont平台提供的,思源字体,一般情况下,设计师只要找个跟自己平常差不多的就可以,

然后,由前端来下载这个字体库。

2,重置浏览器默认样式时,字体font-size:62.5%的时候,我们要找准断点来做好分析。

我先共享我的样式

移动端字体和字体大小规范
移动端字体和字体大小规范
@charset "utf-8";*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:none;-webkit-tap-highlight-color:transparent}a:focus,body,input:focus{-webkit-tap-highlight-color:transparent}a,body,img{-webkit-touch-callout:none}body,html{height:100%}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{color:#;-webkit-user-select:none;-webkit-overflow-scrolling:touch}article,aside,blockquote,body,button,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,input,li,nav,ol,p,section,td,textarea,th,ul,audio,canvas,progress,video,input[type=checkbox],input[type=radio]{margin:0;padding:0;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}button,select{text-transform:none}input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=checkbox],input[type=radio],input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,textarea{-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input::-ms-clear{display:none}textarea{resize:none}article,button,input,p,select,span,textarea,h1,h2,h3,h4,h5,h6{line-height:2rem}h1,h2,h3{font-weight:500}strong{font-weight:700}a:focus{outline:thin dotted}a:focus,input:focus{-webkit-user-modify:read-write-plaintext-only}a,a:active,a:hover{text-decoration:none}a{outline:0;background:rgba(0,0,0,0)}fieldset,img{border:0}img,video{max-width:100%}em,i{font-style:normal}table{border-collapse:collapse;border-spacing:0}audio,canvas,progress,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}del{text-decoration:line-through}hr{height:0;-webkit-box-sizing:content-box;box-sizing:content-box}ol,ul{list-style:none}.hide{display:none}.block,.show{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}.tac{text-align:center}.tal,caption,th{text-align:left}.tar{text-align:right}.dib{display:inline-block}.vab{vertical-align:bottom}.vas{vertical-align:sub}.vam{vertical-align:middle}.vat{vertical-align:top}.grid,.grid:after,.grid:before,.wrap,.wrap:after,.wrap:before{-webkit-box-sizing:border-box;box-sizing:border-box}.grid:after,.grid:before{display:table;content:"";line-height:0}.grid:after{clear:both}.grid{margin:0;padding:0;list-style-type:none}.grid>.grid{float:left;clear:none;margin:0!important}

@font-face{font-family:"webfont";src:url('webfont.eot');src:url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.woff') format('woff'),url('webfont.ttf') format('truetype'),url('webfont.svg#webfont') format('svg')}
body{font-family:"webfont" !important;font-size:1.318rem;font-style:normal;-webkit-font-smoothing:antialiased}
small{font-size:1.2rem}
/*字体自适应:以1.2rem为最小字体大小,1.318rem为常规字体大小,1.7rem为副标题,1.9rem为标题*/
h4{font-size:1.9rem}
h5{font-size:1.7rem}
h6{font-size:1.6rem}
/*分情况来做,不是所有页面都需要字体随着屏幕大小改变而改变的.*/
/*三星大屏幕机最低宽度:note2-note3,S2-S4*/
@media only screen and (min-width:360px) and (max-width:384px){
    html{font-size:64% !important;}
}
/*Iphone6,Iphone6plus*/
@media only screen and (min-width:385px) and (max-width:435px) {
    html{font-size:82.5% !important;}
}
View Code

我们下载好字体库后,放到css里面:

@font-face{font-family:"webfont";src:url('webfont.eot');src:url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.woff') format('woff'),url('webfont.ttf') format('truetype'),url('webfont.svg#webfont') format('svg')}

然后定义全局都是使用改字体和设置常规字体大小:

body{font-family:"webfont" !important;font-size:1.318rem;font-style:normal;-webkit-font-smoothing:antialiased}
small{font-size:1.2rem}
/*字体自适应:以1.2rem为最小字体大小,1.318rem为常规字体大小,1.7rem为副标题,1.9rem为标题*/
h4{font-size:1.9rem}
h5{font-size:1.7rem}
h6{font-size:1.6rem}

上面的都是基于font-size:62.5%时设置的情况;现在我们该设置不同设备大小的字体了:

/*分情况来做,不是所有页面都需要字体随着屏幕大小改变而改变的.*/
/*三星大屏幕机最低宽度:note2-note3,S2-S4*/
@media only screen and (min-width:360px) and (max-width:384px){
    html{font-size:64% !important;}
}
/*Iphone6,Iphone6plus*/
@media only screen and (min-width:385px) and (max-width:435px) {
    html{font-size:82.5% !important;}
}

最后,我们设计师和前端要做的是拿出至少3部手机来:320px,360px,414px(小米,华为,苹果6+);

然后,设计师来看字体的视觉效果,前端负责调整百分比和rem的大小就可以了!(注意:视觉效果根据设计师和产品不同来分别定义大小)

我现在分享我的html页面:

移动端字体和字体大小规范
移动端字体和字体大小规范
<!DOCTYPE html>
<html>
    <head>
        <title>首页</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta content="telephone=no,email=no" name="format-detection" />
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="css/template.css"/>

    </head>

    <body>
        <p style="font-size:1.8rem;">帖子详情</p>
        <p style="font-size:1.7rem;">日本创意家的微型日历访谈录<span style="font-size:1.2rem;margin-left:20px;">1小时前</span></p>
        <article style="font-size:1.4rem;">
            从2011年开始,tatsuya tanaka就一直在创作“微型日历”系列作品,该系列作品描述的是口袋大小的日常生活场景,每天都有新的作品更新。
开始的时候这只是他的摄影作品,拍摄一些立体小人的日常生活场景,如今已经发展成为一项长期的项目……一份他不太可能停下来的事业。我们和这位来自日本的创意家进行了一次对话,讨论了他的创作动力,以及已经制作的1多个场景,以及他最喜欢的、对他来说倾注了许多个人情感的作品。
        </article>
    </body>

</html>
View Code

我这边的效果基本是保持到字体和字体大小在相应的设备上一致效果的!

 

最后我发现一个小问题:网络字库都比不上系统字库的字体数量多,所以某些字是没在webfont里面,看上去的效果很不好!

 

更多相关文章
  •  今天,在微博上看了一篇<微信和淘宝到底是谁封谁>的文章,我觉得文章中逻辑错乱,所以,我发了一篇关于这篇文章逻辑问题的长微博.后面,我被原博主冷嘲热讽了一番,说是什么鸡汤啊,什么我与某某之流的人在一起混淆视听啊,等等.并且也有一些网友找我讨论一下相关的钓鱼式攻击的技术问题.所以,我想写下 ...
  • 易网科技讯 5月8日消息,盛大游戏的总裁钱东海今天在GMIC2013上表示,从手机游戏行业的产业链角度看,盛大是从零做起.钱东海坦言,在手机游戏行业,各个领域都有用户,市场有用户,微信有用户,运营商有用户,开发商也有直接的用户,盛大等企业从传统的游戏厂商进入手机游戏这个领域,感觉压力非常大.钱东海表 ...
  • ​​文/葛甲就在电商市场摩拳擦掌备战双11时,国家工商总局近日约谈阿里巴巴.京东.苏宁易购.携程等10家电商,对电商促销中存在的一些严重侵害消费者权益,扰乱市场秩序等问题进行了讨论,并提出了整改意见.这次约谈中涉及到的具体问题有:第三方交易平台准入把关不严.对商品信息的审查处置不力.消费者权益未能得 ...
  • 稍微整理了下,大概有三种方法可以本地获取system权限的cmd,但前提都是当前用户具备administrator权限. 下面列举的三种方法各有千秋,看你怎么用了.实现起来都很简单,不打字了,直接看图! 1.服务法 2.计划任务法 3.PSEXEC法 作者:darks00n
  • 易网创业Club是易网科技中心推出的服务于创业公司.行业人才.风险投资机构和科技媒体的综合性服务平台.易网科技创业Club聚集了数百位优质创业CEO,下面是关于这位CEO和他的公司的介绍.陈彬介绍云丁网络技术(北京)有限公司 CEO清华大学电子系硕士, 7年消费电子(SONY东京).互联网服务研发和 ...
  • 总述 Android中"列表"的实现其实一个典型的MVC模式,其实中AdapterView相当于是View,负责视图的绘制以及视图的事件响应,Adapter相当于是Controller,负责控制数据的显示内容和展现方式,另外项目中的实体类则是代表了Model. Adapter A ...
一周排行
  •         当你访问一个站点时,你可能需要很长时间,高速公路的速度几乎和现实社会的普通公路没有什么差别.你可能有许多猜测,但这很可能就是网络故障.最简单的方法就是利用Ping 程序来测试,尽管还有许多免费的软件可 ...
  • 路由器无线功能以前使用好好的,自从升级后,路由器上的无线功能就不能使用了,这是为什么呢?那是因为路由器在升级过程中出问题了.     这个问题大多存在于一些老款的无线路由器中,当我们在配置路由器高级功能选项的时候,在 ...
  • 想必有些朋友也曾经为在一个局域网中不愿意暴露自己的共享资源而发过愁吧?不知道你们可曾解决这个问题?其实隐藏的办法就和我们知道的大多数技巧一样,是会者不难,难者不会.下面就来看一下"隐身"的几种方法 ...
  •   题目传送门 1 /* 2 DP:从1到最大值,dp[i][1/0] 选或不选,递推更新最大值 3 */ 4 #include <cstdio> 5 #include <algorithm> ...
  •  回调方法是把功能定义和功能实现分离的一种手段,是一种松耦合的设计思想. Android中的控件响应就是利用了回调方法.话不多说,直接上代码. 回调方法的接口: public interface ICallBack ...
  •  目前其他博客上有很多关于RTMFP的评论,包括她将成为Flash Player10的一部分以及她将被如何使用.请注意虽然我们已经公布了特性,但是我们还没有公布所有的细节.   新的RTMFP协议给客户提供了一个可选 ...
  •     打开<Java 核心技术>第一卷第3章,都是些基本的语法要点,看起来没有什么难度,一路就下来了,也画了些笔记,不过都不值得一提了. 但是既然来了,总归要留下点什么吧,于是写了下面的几段代码.    ...
  • 在这里 http://www.oschina.net/translate/how-social-media-can-benefit-your-project 翻译了几段英文 一 Social media is an ...
  • 接下来再来看看全民小镇ios刷金币,里面包含有单一的叉叉辅助刷金币教程.这个时候我们切换到八门神器保证程序全民飞机大战于搜索框内输入点击会出来一批的数据还不能确定哪个数值是支持金币需要再进行筛选.其实修改金币之类的最 ...
  • 博文地址:算法还重要吗? 作者确实是个高手,我想写这个问题很久了,但是奈于自己水平有限,不能完整的谈谈这个问题,就只好作罢. 而作者能将这个问题的方方面面分析的如此透彻,真的是令人佩服.   曾经我认为编程就是写算法 ...