Web速查-索引

Alt text

定义

font-size-adjust 属性为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

注意:字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时,那么当此字体被设置为很小的尺寸时会更易阅读。

举例:Verdana 的 aspect 值是 0.58(意味着当字体尺寸为 100px 时,它的 x-height 是 58px )。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

语法

font-size-adjust:none|number

属性值

说明 (索引中有详细介绍)
none 默认。如果此字体不可用,则不保持此字体的 x-height。
number 定义字体的 aspect 值比率。可使用的公式:首选字体的字体尺寸 * (font-size-adjust 值 / 可用字体的 aspect 值)=可应用到可用字体的字体尺寸

number公式举例:如果 14px 的 Verdana(aspect 值是 0.58)不可用,但是某个可用的字体的 aspect 值是 0.46,那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

实例

<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style type="text/css">
h1 {font-size-adjust: 0.50}
h2 {font-size-adjust: 0.40}
p {font-size-adjust: 0.60}
</style>
</head>
<body>
<h1>h1:Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aperiam aut cumque dicta et eveniet fuga fugit magnam neque nobis possimus quae reiciendis repudiandae sint tempore ut voluptatum. Asperiores, soluta.</h1>
<h2>h2:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam, aliquid aperiam assumenda consequatur debitis delectus exercitationem fugiat iste necessitatibus odit omnis, praesentium quae quod repellat saepe sunt tempora veniam!</h2>
<p>文本段落:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt dignissimos ducimus expedita explicabo illo laudantium, necessitatibus nostrum odit quae quibusdam quis quisquam reiciendis temporibus vel vitae? Eligendi, quisquam.</p>
</body>
</html>

h1:Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aperiam aut cumque dicta et eveniet fuga fugit magnam neque nobis possimus quae reiciendis repudiandae sint tempore ut voluptatum. Asperiores, soluta.

h2:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam, aliquid aperiam assumenda consequatur debitis delectus exercitationem fugiat iste necessitatibus odit omnis, praesentium quae quod repellat saepe sunt tempora veniam!

文本段落:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt dignissimos ducimus expedita explicabo illo laudantium, necessitatibus nostrum odit quae quibusdam quis quisquam reiciendis temporibus vel vitae? Eligendi, quisquam.

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
1.0 1.0 1.0 6.0