欢迎来到HELLO素材网! 南京网站制作选择顺炫科技
丰富的DIV CSS模版、JS,jQuery特效免费提供下载

CSS 字体大小教程font

发表于2019-06-05 22:57| 次阅读| 来源网络整理| 作者session

摘要:css5为大家引见CSS font-size样式属性,让大家作为经过DIV+CSS对字体大小控制与灵敏运用,经过对font-size CSS样式知识讲解达

CSS font-size字体文字大小样式属性-字体大小样式篇:

本节CSS5为大家引见经过CSS样式设置文字字体大小知识,触及CSS样式单词font-size

目录  

 
一、设置字体大小CSS单词与语法

根本语法构造:

.CSS5{font-size:12px;}

设置了文字大小为12px像素
Font-size+字体大小数值+单位

单词:font-size
语法:font-size : absolute-size | relative-size | length
取值:xx-small | x-small | small | medium | large | x-large | xx-large
xx-small:最小
x-small:较小
small:小
medium:失常(默许值),依据字体停止调整
large:大
x-large:较大
xx-large:最大
也可取详细长度单位值

二、font-size利用方法

font-size:12px; 设置对象详细字体大小为12px
font-size:xx-small; 设置文字大小为最小
font-size:small; 设置文字字体大小为小
font-size:x-large;设置对象字体大小为较大
font-size:larger;设置对象字体大小为大
font-size:smaller;相对于父容器中字体尺寸停止相对减小
font-size:50%;相对于父容器中字体尺寸停止相应调整为50%大小
font-size:150%;相对于父容器中字体尺寸停止相应调整为150%大小

三、利用效果与截图

对应CSS+div代码:

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>font-size字体大小测试-CSS5试验</title>
<style type="text/css">
body{ font-size:12px; line-height:24px;}
.exp1{font-size:12px;}
.exp2{font-size:xx-small;}
.exp3{font-size:small;}
.exp4{font-size:x-large;}
.exp5{font-size:larger;}
.exp6{font-size:smaller;}
.exp7{font-size:50%;}
.exp8{font-size:150%;}
</style>
<!-- css5.com.cn -->
</head>
<body>
<div class="exp1">我被font-size值为12px大小</div>
<div class="exp2">我被font-size值为xx-small大小</div>
<div class="exp3">我被font-size值为small大小</div>
<div class="exp4">我被font-size值为x-large大小</div>
<div class="exp5">我被font-size值为larger大小</div>
<div class="exp6">我被font-size值为smaller大小</div>
<div class="exp7">我被font-size值为50%大小</div>
<div class="exp8">我被font-size值为150%大小</div>
</body>
</html>

Font-size样式设置与IE阅读对比效果图:

DIV+CSS font-size字体大小演示对比图

FONT-SIZE样式属性演示图

四、font size=5什么意思

有时咱们看见或遇到如:
<font size="5">内容</font>
这个方法也是间接利用font标签加size设置对象字体大小。这里5代表设置对象字体大小为5号字。
大家可能利用此方法测试测试比如设置size="2"、size="3"、size="8"等等不同值观察观察区别并掌握。

五、CSS font-size常见使用

5-1、间接标签内利用font-size设置对象内容字体大小
<div style="font-size:14px">我被设置字体大小为14px</div>

5-2、利用标签与CSS样式分离设置对象内容字体大小(引荐)
CSS代码:.CSS5{ font-size:16px;}

对应HTML DIV代码:<div class="CSS5">我被CSS font-size样式设置字体大小为16px</div>
咱们经常以此方法来设置对象字体大小。也就是所说的体现与CSS样式分离。

六、font-size案例

1、文字大小案例CSS代码:

#CSS5{ font-size:14px;}
.CSS5{ font-size:18px;}

2、字体大小案例HTML代码:

<div id="CSS5">我大小为14px</div>
<div class="CSS5">我大小为18px</div>

3、font-size案例截图

css font-size案例截图


font-size文字字体大小案例截图

七、对CSS font-size总结

咱们利用CSS font-size设置对象字体大小样式,普通设置文字字体大小以详细长度单位值来确定对象内容文字大小。总之记住如CSS代码font-size:14px,即设置对象字体大小为14px(像素)。

对于对对象文本字体大小的样式控制设置咱们可能利用font-size+详细数字+单位,即可完成对象内文字大小控制。普通字体大小为正,除了利用数字加单位设置对象文字文字大小完成,也可能以百分比停止文字大小设置如(100%)完成文本字体大小,大家上去可能试试。