好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

font-size

CSS font-size 属性用于指定字体的大小。

因为 font-size 属性的值会被用于计算em和ex长度单位,所以定义 font-size 属性的值可能会改变其它元素的大小。例如,如果一个元素的尺寸使用 em 作为单位,那么这个元素上设置的字体大小会直接影响这个元素的尺寸,因为 em 和 ex 是相对单位,这个相对值是基于该元素的字体大小来计算的。

举例来说,如果一个元素的宽度设置为5em,而为这个元素设置的 font-size 的值为16像素,那么这个元素的实际宽度就是 16 x 5 = 80px 。另外,不仅是元素的长度和高度会被影响,如果 padding 和 margin 等属性使用了相对单位,同样也会被影响。

关于相对单位,可以参考CSS 数据类型。

字体的大小可以设置为绝对值或相对值。绝对值可以使用关键字或数据类型的绝对长度来指定。相对值可以数据类型的相对长度或数据类型来指定。

元素的字体大小还可以使用预定义的关键字来设置。关键字又分为绝对关键字和相对关键字。

<absolute-size> = xx-small | s-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller                               
                            

关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小,你可以在网页的任何地方设置相对字体大小,这让你能轻易地缩放整个网页的字体大小。

子元素会继承父元素的字体大小,除非你为子元素指定了新的 font-size 属性。

官方语法
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit     
                            

参数:

<absolute-size> : <absolute-size> 是一组由浏览器定义的字体尺寸大小列表。各个浏览器会为每个关键字指定一个具体的字体尺寸。可用的关键字有: xx-small 、 x-small 、 small 、 medium 、 large 、 x-large 和 xx-large 。这组绝对大小关键字定义是相对于用户的默认字体大小(medium)。它的原理和使用过时的 <font size="1"> 到 <font size="7"> 来指定字体大小类似(默认的字体大小为 <font size="3"> )。 <relative-size> :指定相对字体关键字: larger 和 smaller ,它通过父元素的字体大小来计算元素本身的字体大小。例如,如果父元素的字体大小设置为 larger ,元素本身的相对字体大小也设置为 larger ,那么元素的字体大小就是 x-large 。 <length> :使用数据类型来设置字体的大小。不允许为负数。如果使用相对长度单位,那么元素的字体大小相对于它的父元素的字体大小。例如,元素的字体大小设置为2em,表示它的字体大小是父元素字体大小的2倍。 <percentage> :使用数据类型来设置字体大小。百分比字体大小同样是相对于元素的父元素来计算值。例如,如果元素的字体大小设置为50%,表示它的字体大小是其父元素字体大小的一半。 inherit :继承父元素的字体大小。

font-size 属性的初始值为 medium 。

应用范围

font-size 属性可以应用在所有元素上。

示例代码

下面的示例都是有效的字体大小取值:

/* <absolute-size>,绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>,相对大小值 */
font-size: larger;
font-size: smaller;

/* <length>,长度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>,百分比值 */
font-size: 80%;

font-size: inherit;                              
                            
在线演示

下面的例子演示了各种类型的字体大小设置,使用的CSS代码如下:

.font-small {
  font-size: xx-small;
}
.font-larger {
  font-size: larger;
}
.font-point {
  font-size: 24pt;
}
.font-percent {
  font-size: 200%;
}
.font-medium{
  font-size: medium;
}
.font-medium span{
  font-size: smaller;
  color: #d2527f;
}                             
                            

字体大小为关键字small

字体大小为关键字larger

字体大小的单位为pt

字体大小使用百分比来设置

这是一段字体大小为默认字体大小medium的文字( 这里的文字使用了相对关键字smaller来设置 )。

浏览器支持

所有的现代浏览器都支持 font-size 属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

查看更多关于font-size的详细内容...

  阅读:45次

上一篇: border

下一篇:font-style

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]