網(wǎng)頁作為一種信息的載體，文字還是很重要的一部分的，這里就總結(jié)一下他的幾種設(shè)置方法

一、font標(biāo)簽

　　font使用來設(shè)置文字的標(biāo)準(zhǔn)屬性，但是由于一系列的原因已經(jīng)不建議使用font標(biāo)簽來指定屬性了，還是用css比較好，但是本文還是會(huì)介紹一下這種方法。font中可以設(shè)置很多種類的屬性，比如(括號(hào)里面是效果)：

　　1、顏色：設(shè)置紅色<font color="red">你好</font> （你好）

　　2、設(shè)置大小：設(shè)置字號(hào)為2和8<font size=2>字號(hào)2</font><font size=8>字號(hào)8</font> （字號(hào)2字號(hào)8）

　 3、字體類型：face屬性，可以用來指定字體，可選值有很多，這個(gè)屬性只支持你機(jī)器上存在的字體 （宋體楷體）

二、css設(shè)置

　　css設(shè)置字體樣式遠(yuǎn)比用font標(biāo)簽更加強(qiáng)大，涉及的面更廣。粗略總結(jié)如下：

　　1、總的屬性font，這個(gè)屬性中可以設(shè)置下面的多個(gè)屬性的值，調(diào)用方式（都可以缺省）

　　　　{font:font-style font-variant font-weight font-size font-family}

　　2、字體類型font-family：可以設(shè)置多種字體，用逗號(hào)分隔，瀏覽器會(huì)在你的電腦上注意尋找看是否能用，能用則選用該字體顯示后面的字體無　　　　效，最后實(shí)在是一個(gè)都沒有匹配上的話就采用默認(rèn)字體。

　　　　示例：{font-family:黑體,隸書;}

　　3、字體大小font-size：設(shè)置文本的大小，有很多可能的取值，分為這么幾類：

　　　　i)xx-small、x-small、small、medium、large、x-large、xx-large這幾種字符串的方式，大小方式如下

　　　　　　　　xx-small x-small small medium large x-large xx-large

　　　　ii）smaller、larger：定義成比父元素更大或者更小的尺寸

　　　　iii）length：定義為一個(gè)固定值

　　　　iiii）百分比：定義為父元素的百分比大小

　　　　iiiii）inherit：從父元素繼承字體大小

　　4、字體風(fēng)格font-style：主要是設(shè)置文本傾斜的。屬性有normal、italic、oblique三種（還可以取繼承），演示如下：

　　　　　　normal italic oblique

　　5、字體顏色color：這個(gè)就不用多說了，定義字體顏色值

　　6、字體顏色陰影text-shadow：定義字體陰影的顏色，可以是文字看上去更高端。使用方法如下：

　　　　<font>紅色陰影</font> 紅色陰影

　　7、字體粗細(xì)：字體加粗不光是可以用b標(biāo)簽的，font-weight也可以很好地，并且更自由的改變字體粗細(xì)。取值可以是數(shù)字或者是normal、bold、　　　　　bolder、lighter，都是些見名知義的屬性

　　8、字體行高line-height：設(shè)置字的行高，也是數(shù)字和百分比都可以設(shè)置

　　9、字間距l(xiāng)etter-spacing：字母之間的距離，默認(rèn)值為0，可以用正負(fù)值調(diào)整

　　10、單詞間距word-spacing：跟上面差不多，這個(gè)是調(diào)整單詞的間距

　　11、字體變形font-variant：也就是可以將你的小寫字母用較小的大寫字母來代替，值有normal和small-caps（繼承不算，下同）。樣例如下：

　　 normal small-caps I'm REAL BIG

　　12、字母大小寫轉(zhuǎn)換text-transform：

　　13、font-size-adjust：這個(gè)比較復(fù)雜。首先要了解aspect值，字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個(gè)字體的 　　　　　　aspect 值。當(dāng)字體擁有高的 aspect 值時(shí)，那么當(dāng)此字體被設(shè)置為很小的尺寸時(shí)會(huì)更易閱讀。設(shè)置方法就是傳入一個(gè)數(shù)值。

　　14、font-stretch：可以對(duì)文本進(jìn)行拉伸，類似文本大小也有以下幾種方式：

　　　　　ii）narrower、wider：定義成比父元素更大或者更小的尺寸

　　　　iii）ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded，從　　　　　　寬到窄排列。

　　　　iiii）inherit：從父元素繼承字體大小

三、css3中的改進(jìn)

　　1、首先css3實(shí)現(xiàn)了調(diào)用服務(wù)器端的字體（我們上面的字體使用的前提都是客戶機(jī)上存在那種字體），這樣我們就可以自由的調(diào)用自己享用的字體，　　　　不用每次都顧慮客戶機(jī)是否存在該字體。首先給個(gè)例子吧：

 1 <style> 
 2 @font-face
 3 {
 4 font-family: myFirstFont;
 5 src: url('Sansation_Light.ttf'),
 6      url('Sansation_Light.eot'); /* IE9+ */
 7 }
 8 </style>
 9 div
10 {
11 font-family:myFirstFont;
12 }

　　　　正如上面的代碼所顯示的要調(diào)用服務(wù)器端的字體你要用的就是@font-face,然后你就要開始給出這個(gè)字體的定義，首先是原來的font-family換　　成是定義你自己的名字，然后給出它的文件的url地址。這樣在下面你就可以調(diào)用該字體了。

　　　　并且對(duì)于自體你不僅能夠直接使用還可以選擇一些“修飾”。暫時(shí)支持的屬性有：font-stretch、font-style、font-weight、unicode-　　　　　range（這個(gè)是用來定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"）

　　當(dāng)然以上的這些都是比較通用的屬性，其他還是有不少的個(gè)別屬性的。另外好的字體其實(shí)都是能夠組合利用各種字體所營(yíng)造出來的遠(yuǎn)非一種屬性所能達(dá)到，具體就要看個(gè)人的藝術(shù)細(xì)胞了。另外個(gè)人感覺最近其實(shí)還是有一種繪制文本的方式，就是利用canvas的畫圖api，這樣理論上是可以得到任意形態(tài)的字體的，而且支持性也很好只是工作量很大，是不是采用就得看著辦了。

如果你覺得內(nèi)容對(duì)你有幫助，請(qǐng)點(diǎn)個(gè)贊

本作品采用知識(shí)共享署名-非商業(yè)性使用-相同方式共享 2.5 中國(guó)大陸許可協(xié)議進(jìn)行許可。

總結(jié)

以上是生活随笔為你收集整理的怎样设置网页中的文字样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。