在我们日常的项目中经常会用到不同的字体来达到我们想要的效果,可是某些情况下不同字体的大小在相同的px下显示的大小是不同的

<div id="div1">Text 1</div>
<div id="div2">Text 2</div>
<div id="div3">Text 3</div>
<div id="div4">Text 4</div> div#div1 {
font-family: Comic Sans Ms;
font-size: 16px;
}
div#div2 {
font-family: Tahoma;
font-size: 16px;
}
div#div3 {
font-family: Arial;
font-size: 16px;
}
div#div4 {
font-family: Times New Roman;
font-size: 16px;
}

在火狐下的显示效果如下

可以看到同样是16px的字体显示到浏览器中缺大小不一,可能会是原来安排好的页面布局产生混乱,这是最令人难过的事情了。那么:

div#div1 {
font-family: Comic Sans Ms;
font-size: 16px;
font-size-adjust: 0.50;
}
div#div2 {
font-family: Tahoma;
font-size: 16px;
font-size-adjust: 0.54;
}
div#div3 {
font-family: Arial;
font-size: 16px;
font-size-adjust: 0.54;
}
div#div4 {
font-family: Times New Roman;
font-size: 16px;
font-size-adjust: 0.49;
}

给每个css中添加了不同的font-size-adjust值,现在在浏览器中的显示效果如我们所愿(默认按照最后一个字体的大小显示):

aaarticlea/png;base64,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" alt="" />

在看font-size-adjust这个主角之前,我们先看这个属性的值 -- aspect,什么是aspect呢?举例:Verdana 的 aspect 值是 0.58(意味着当字体尺寸为 100px 时,它的 x-height 是 58px )。每一种字体都有自己的默认aspect值。

font-size-adjust 属性就是为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时,那么当此字体被设置为很小的尺寸时会更易阅读。   --来自W3C

浏览器对于aspect值的计算方法:c=(a/b) s  a:表示实际使用字体的aspect值,b表示修改前字体的aspect值,s表示指定的字体尺寸,c为浏览器最后显示的尺寸。所以当我们在我们的页面中使用了与页面原始不同的字体时,我们可以利用font-size-adjust来调整这个外来字体的大小,使他看起来和页面原始字体的大小一样,这样就不会对页面的布局产生不可预告的影响了。

最后,还有更多的未知等待探索,还是那句话,小角色有时候会变成大英雄!

低调的css3属性font-size-adjust的更多相关文章

  1. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  4. 今天我们来讨论一下CSS3属性中的transition属性;

    transition属性是CSS3属性:顾名思义英文为过渡的意思:主要有四个值与其一一对应:分别是property(CSS属性名称),duration过渡的时长,timimg-function转速曲线 ...

  5. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  6. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  7. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  8. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  9. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

随机推荐

  1. CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...

  2. as2解析json

    as2写的json解析,带容错,如果要做格式检查,得自己修改了,直接贴代码 //--------------------------------------------------json解析---- ...

  3. fkwの题目(祝松松生日快乐!)

    麓山国际实验学校 傅少,匡哥和巨夫出的题目(共3道) 一.题目概况 题目名称 打地铺 泡妹子 开房间 题目类型 传统 传统 传统 可执行文件名 deeeep soccer room 输入文件名 dee ...

  4. Python读属性文件

    # coding:utf-8 class Properties: def __init__(self, file_name): self.file_name = file_name self.prop ...

  5. python+NLTK 自然语言学习处理八:分类文本一

    从这一章开始将进入到关键部分:模式识别.这一章主要解决下面几个问题 1 怎样才能识别出语言数据中明显用于分类的特性 2 怎样才能构建用于自动执行语言处理任务的语言模型 3 从这些模型中我们可以学到那些 ...

  6. jetty源代码剖析

    近期使用jetty自己写了一个web server,如今闲了花了一天的时间看了一jetty的源代码,主要以server的启动为主线.进行了剖析,经过阅读对jetty的源代码大赞,写的简洁.清晰.架构也 ...

  7. python字符串格式和编码与解码问题

    %c 转换成字符(ASCII码值,长度为一的字符串) %r 有线使用repr()函数进行字符串转换 %s 有线使用str()函数进行字符串转换 %d or %i 转换成有符号十进制数 %u 转换成无符 ...

  8. MyCat:开源分布式数据库中间件

    mycat 的主要配置文件 schema.xml rule.xml server.xml 客户端连接mycat mysql -h192.168.1.1 -P8806 -uroot -pwangxiao ...

  9. 《python基础教程(第二版)》学习笔记 字典(第4章)

    <python基础教程(第二版)>学习笔记 字典(第4章)创建字典:d={'key1':'value1','key2':'value2'}lst=[('key1','value1'),(' ...

  10. 源码分享-纯CSS3实现齿轮加载动画

    纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html