基本語法結(jié)構(gòu):
.divcss5{font-size:12px;}
設(shè)置了文字大小為12px像素
Font-size+字體大小數(shù)值+單位
單詞: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:正常(默認(rèn)值),根據(jù)字體進(jìn)行調(diào)整
large:大
x-large:較大
xx-large:最大
也可取具體長度單位值
font-size:12px; 設(shè)置對象具體字體大小為12px
font-size:xx-small; 設(shè)置文字大小為最小
font-size:small; 設(shè)置文字字體大小為小
font-size:x-large;設(shè)置對象字體大小為較大
font-size:larger;設(shè)置對象字體大小為大
font-size:smaller;相對于父容器中字體尺寸進(jìn)行相對減小
font-size:50%;相對于父容器中字體尺寸進(jìn)行相應(yīng)調(diào)整為50%大小
font-size:150%;相對于父容器中字體尺寸進(jìn)行相應(yīng)調(diào)整為150%大小
對應(yīng)CSS+div代碼:
< !DOCTYPE?html > ?
< html >?
<head>?
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>?
<title>font-size字體大小測試-DIVCSS5實驗</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>?
<!--?www.divcss5.com?-->?
</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樣式設(shè)置與IE瀏覽對比效果圖:

FONT-SIZE樣式屬性演示圖
有時我們看見或遇到如:
內(nèi)容
這個方法也是直接使用font標(biāo)簽加size設(shè)置對象字體大小。這里5代表設(shè)置對象字體大小為5號字。
大家可以使用此方法測試測試比如設(shè)置size="2"、size="3"、size="8"等等不同值觀察觀察區(qū)別并掌握。
五、CSS font-size常見運(yùn)用 ? -?TOP
5-1、直接標(biāo)簽內(nèi)使用font-size設(shè)置對象內(nèi)容字體大小
5-2、使用標(biāo)簽與CSS樣式分離設(shè)置對象內(nèi)容字體大?。ㄍ扑])
CSS代碼:.divcss5{ font-size:16px;}
對應(yīng)HTML DIV代碼:
我們常常以此方法來設(shè)置對象字體大小。也就是所說的表現(xiàn)與CSS樣式分離。
1、文字大小案例CSS代碼:
#divcss5{?font-size:14px;}?
.divcss5{?font-size:18px;}?
2、字體大小案例HTML代碼:
<div?id="divcss5">我大小為14px</div>?
<div?class="divcss5">我大小為18px</div>?
3、font-size案例截圖

font-size文字字體大小案例截圖
七、對CSS font-size總結(jié) ? -?TOP
我們使用CSS font-size設(shè)置對象字體大小樣式,一般設(shè)置文字字體大小以具體長度單位值來確定對象內(nèi)容文字大小。總之記住如CSS代碼font-size:14px,即設(shè)置對象字體大小為14px(像素)。
對于對對象文本字體大小的樣式控制設(shè)置我們可以使用font-size+具體數(shù)字+單位,即可實現(xiàn)對象內(nèi)文字大小控制。一般字體大小為正,除了使用數(shù)字加單位設(shè)置對象文字文字大小實現(xiàn),也可以以百分比進(jìn)行文字大小設(shè)置如(100%)實現(xiàn)文本字體大小,大家下來可以試試。
擴(kuò)展:如過遇到谷歌瀏覽器Chrome設(shè)置具體字體大小小于了12px會出現(xiàn)設(shè)置無效,此時可以看看解決谷歌瀏覽器設(shè)置文字字體小于12px方法:http://www.divcss5.com/wenji/w321.shtml
擴(kuò)展相關(guān)閱讀: