css font-size属性设置元素中文本字体的大小

原创 国哥笔记  2018-11-21 10:43  阅读 1,379 views 次

font-size属性定义及用法

在css中,font-size属性是用来设置文本字体的大小,在网页布局中可以说是无处不在,用的非常广泛。当我们需要设置一行或一段文本字体大小的时候,我们就可以在文本所在的元素上设置css的font-size属性,从而来控制文本字体的大小;

如果一个元素没有设置font-size属性,那么该元素将会继承父元素的font-size属性的值。font-size属性值可以是预定义关键字、绝对尺寸和相对尺寸

font-size属性语法格式

  1. css语法:font-size: 预定义关键字 / 绝对尺寸 /相对尺寸;(如:font-size: 18px;)
  2. JavaScript语法:object.style.fontSize="small";

font-size属性值说明

一、预定义关键字

预定义关键字目前有7个:xx-small、x-small、small、medium、large、x-large、xx-large,尺寸依次从小到大,类似于衣服的尺寸一样。

预定义关键字用的不多,因为它只有7 种,选择范围受限;还有就是不同的浏览器对这7个自定义关键字解析的实际尺寸可能不一样,就可能会导致不同的浏览器显示的文本字体的大小可能不同。因此,不推荐使用预定义关键字来定义字体的大小。

二、绝对尺寸

绝对尺寸用的就比较多了,用单位长度来设置文本字体的大小,常用的单位有:px(像素)、pt(点,1pt 相当于 1/72in)、cm(厘米)等。使用绝对尺寸在不同的浏览器下显示的都是固定尺寸,显示效果一样。

三、相对尺寸

相对尺寸用的没有绝对尺寸用的多,它是参考某个基准来控制字体大小;用em、%、rem来表示。这些单位的意思见:css中常用单位px、em、rem和%的区别及用法总结

使用相对尺寸的好处是,在所有的文本文字排版之后,文字大小不适合,要从新统一调整页面文字大小,就可以只修改一些作为基准的文本字体大小,其它所有文字的字体大小会自动变化,修改起来就很容易。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css font-size属性设置元素中文本字体的大小</title>
<style type="text/css">
body{background-color: #aaa;}
.keyword_xx-small{font-size:xx-small;}.keyword_small{font-size:small;}
.keyword_large{font-size:large;}.keyword_xx-large{font-size:xx-large;}
.fixed{font-size:30px;}
.parent_element{font-size:30px;}
.relative{font-size:50%;}
</style>
</head>
<body>
<p><span class="keyword_xx-small">xx-small</span>-><span class="keyword_small">small</span>->
<span class="keyword_large">large</span>-><span class="keyword_xx-large">xx-large</span></p>
<p class="fixed">这里的文字字体大小被设置为30px</p>
<p class="parent_element"><span class="relative">这里的文字字体大小被设置为30px x 50% = 15px</span></p>
</body>
</html>

运行结果:

css font-size属性设置元素中文本字体的大小

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/font-size.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情