位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > 字体大小 font-size 属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 字体样式 font-style属性 下一篇: 小型大写字体 font-variant属性

浏览器支持

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

image.png

属性定义及使用说明

font-size 属性用于设置字体大小。

能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

请务必使用正确的HTML标签,就<h1> - <h6>表示标题和<p>表示段落:

字体大小的值可以是绝对或相对的大小。

绝对大小:

n  设置一个指定大小的文本

n  不允许用户在所有浏览器中改变文本大小

n  确定了输出的物理尺寸时绝对大小很有用

相对大小:

n  相对于周围的元素来设置大小

n  允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。

默认值:

medium

继承:

yes

版本:

CSS1

JavaScript 语法:

object.style.fontSize="larger"

属性值

描述

n  xx-small

n  x-small

n  small

n  medium

n  large

n  x-large

n  xx-large

把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

默认值:medium。

smaller

把   font-size 设置为比父元素更小的尺寸。

larger

把   font-size 设置为比父元素更大的尺寸。

length

把   font-size 设置为一个固定的值。

%

把   font-size 设置为基于父元素的一个百分比值。

inherit

规定应该从父元素继承字体尺寸。

说明

/* <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;

设置字体大小像素

设置文字的大小与像素,让您完全控制文字大小:

实例

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, Safari 中通过缩放浏览器调整文本大小。

虽然可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为empx/16=em

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子,em的文字大小是与前面的例子中像素一样。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。

不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比:

实例

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

示例

小白教程网www.2d5.net

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>字体大小 font-size 属性</title>

<!--定义内部样式-->

<style>

     .css1{

             font-size: 16px;/*在浏览器中默认的文字大小是16px*/

     }

     .css2{

             font-size: 25px;

     }       

     .css3{

             font-size: 1em;/*默认大小和普通文本段落一样,是16像素(16px=1em*/

     }               

     .css4{

             font-size: 1.5em;

     }

</style>    

</head>

<body>

     <p>这是一个段落,浏览器中默认的文字大小是16px</p><hr>

    

     <h2>设置字体大小像素</h2>

     <p>这是一个段落,字体大小font-size: 16px</p>

     <p>这是一个段落,字体大小font-size: 25px</p><hr>

    

     <h2>em来设置字体大小</h2>

     <p>这是一个段落,字体大小font-size: 1em</p>

     <p>这是一个段落,字体大小font-size: 1.5em</p>

</body>

</html>

效果图

小白教程网www.2d5.net

image.png


上一篇: 字体样式 font-style属性 下一篇: 小型大写字体 font-variant属性
毕业设计网             广告联系QQ:45157718(微信同号)