推荐font-size的单位 % em单位

在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。
~~~font-size可以实现多行文本的垂直居中，究其原因是因为 em的继承性和一个基本事实 line-box 的高度 line-height总是约等于字体大小的1.16倍

所以设置 div.vmiddle{font-size:10em; height:1.16em;}那么这个line-box中的裸文字刚好是垂直居中的。其他多行文字设置为inline-block 然后跟裸文字基线对齐即可实现垂直居中

浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。不过还有一种更方便的方法，继续往下看！

这种方法要用到%单位（仅1次），其实%和em简单的话可以理解成前者只是比后者多2个0。为了简化font-size的换算，大家可以在css中的body中先全局声明font-size=62.5%，这里的%的算法和em一样，100%=16px，1px=6.25%，10px=62.5%，也就是定义了默认字体大小为10px。很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！由于em具有会继承父级出血元素的字体大小的特点，这是的1em=10px，所以12px=1.2em。px与em的转换通过10就可以得来，很方便了吧！

此外有一点必须要注意，可能是IE处理汉字时，对于浮点的取值精确度有限，在body下62.5%出来的12px字体比直接定义的要大一点点，只要将62.5%换成63%就可以了。通过以上对CSS代码的调整，你会发现自己的网站又向用户体验设计更靠近了一步，在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

~~~简而言之，em %作为字体单位有更大的灵活性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默默唐测试</title>
<style type="text/css" >
body{
font-size:63%;
}
</style>
</head>
<body>
<p style="font-size:1.2em;">font-size:1.2em 默默唐 (可以调整)</p>
<p style="font-size:12px;">font-size:12px 默默唐 (不能调整)</p>
<p style="font-size:1.2em; color:#F90;">你可以通过IE顶部菜单中的“查看-文字大小“来调整字体显示尺寸</p>
</body>
</html>

随机推荐

InnoDB引擎Myslq数据库数据恢复
首先祝愿看到这片文章的你永远不要有机会用到它... 本文指针对用InnoDB引擎的Mysql数据库的数据恢复,如果是其它引擎的Mysql或其它数据库请自行google... 如果有一天你手挫不小心删掉 ...
Node.js笔记3
###Node.js核心模块 1. 全局对象 Node.js中能够访问到的都是global的属性 **process它用于描述当前 Node.js 进程状态的对象,提供了一个与操作系统的简单接口.** ...
！！！易控INSPEC组态软件开发小结——-一次工程文件损坏和处理经过
从加入红橡开始熟悉和使用易控(INSPEC)组态软件,值得赞扬的是INSPEC的开放性和对C#语言的支持,除此之外,便也没有感觉它与其他组态软件有太多优势,有人说INSPEC软件授权比国内其他同类的组 ...
zoj 1539 Lot
/*理解题意后,发现最后剩下的都是个数并不是和奇数偶数等有直接的关系,所以我们直接从数量入手比如11会被分为5,6.5再分2,3.6再分3,3只要剩下三个就算一种,少于三个不用算.大于3个继续分很 ...
Android应用开发提高篇（6）-----FaceDetector（人脸检测）
链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/10/2388776.html 一.概述初次看到FaceDetector这个类时,心里想:And ...
Android百度地图的简单实现
2015-06-13 最近学习了百度地图API的简单开发,现记录如下:(持续更新中) 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务AP ...
html5 存储篇（一）
localStorage 和 sessionStorage localStorage 与 sessionStorage的相同点: (1).都是用于客户端存储的技术,相对于传统 ...
hihocoder #1260 : String Problem I
题目链接时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述我们有一个字符串集合S,其中有N个两两不同的字符串. 还有M个询问,每个询问给出一个字符串w,求有多少S中的 ...
图标字体IcoMoon 使用
IcoMoon 使用官方地址 http://icomoon.io/实际上,它是一种字体,只不过这种字体的字象图标一样,比如windows中自带的MT Extra Webdings Wingdings字 ...
QT实现TCP通信服务器端和客户端（支持多个客户端）精简版
上星期接了个私活,工期两星期,报酬3000,写一个小软件,采集定向网络上的数据,并进行双向通信,捣鼓了两天,终于把QT中tcp通信这块调通了,找过N多例子,绝大部分都是基本的一个服务端一个客户端通信的 ...

推荐font-size的单位 % em单位

推荐font-size的单位 % em单位的更多相关文章

随机推荐

热门专题