CSS中常用的字體屬性設(shè)置
·font-size 規(guī)定文本的字體尺寸
?通常使用px,百分比，em來(lái)設(shè)置字體的大小
■em是css中的相對(duì)單位，是相對(duì)于當(dāng)前對(duì)象內(nèi)的字體尺寸，若沒(méi)有制定文字大小尺寸，則為瀏覽器默認(rèn)字體大小
?xx-small、x-small、small、medium、large、x-large、xx-large把字體的尺寸設(shè)置為不同的尺寸，默認(rèn)值：medium。
?smaller 把 font-size 設(shè)置為比父元素更小的尺寸。
?arger 把 font-size 設(shè)置為比父元素更大的尺寸。
·font-variant:規(guī)定是否以小型大寫(xiě)字母的字體顯示文本。
?normal 默認(rèn)值。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。
?small-caps 瀏覽器會(huì)顯示小型大寫(xiě)字母的字體。
·font-style:規(guī)定文本的字體樣式。
?normal 默認(rèn)值。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。
?italic 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。
?oblique 瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式。暫時(shí)不作講解，了解即可
·font-weight:規(guī)定字體的粗細(xì)。
?normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。
?bold 定義粗體字符。
?bolder 定義更粗的字符。lighter 定義更細(xì)的字符。
?100-900;定義由粗到細(xì)的字符。400 等同于 normal，而 700 等同于 bold。
·font-family:規(guī)定文本的字體系列。
·font:在一個(gè)聲明中設(shè)置所有字體屬性。
?這個(gè)簡(jiǎn)寫(xiě)屬性用于一次設(shè)置元素字體的兩個(gè)或更多方面。
?至少要指定字體大小和字體系列
?可以按順序設(shè)置如下屬性：font-style/font-variant/font-weight/font-size/font-family
·@font-face:嵌入字體
·注：字體的設(shè)置還有其他幾個(gè)很少的用到的屬性，比如font-size-adjust為元素規(guī)定 aspect 值；font-stretch 收縮或拉伸當(dāng)前的字體系列。都很少用到或者多數(shù)瀏覽器不支持，就不作講解
CSS中常用的文本屬性設(shè)置
溫馨提示：對(duì)于一些目前瀏覽器支持度不是太好或者極不常用屬性不進(jìn)行講解
掌握
·color 設(shè)置文本顏色
·text-align 規(guī)定元素中的文本的水平對(duì)齊方式。
?left 默認(rèn)值/right/center/justify兩端對(duì)齊
?CSS3中新增了start和end屬性值，在通常情況下，start相當(dāng)于left，end相當(dāng)于right
·line-height 設(shè)置行高。
?normal/數(shù)字/百分比/px/em
·text-indent 設(shè)置文本的首行縮進(jìn)
?常用單位像素/百分比/em
·text-decoration 向文本添加修飾。
?none 默認(rèn)值。顯示標(biāo)準(zhǔn)的文本。
?underline 定義文本下劃線(xiàn)。
?overline 定義文本上劃線(xiàn)。
?line-through 定義穿過(guò)文本下的一條線(xiàn)。
?blink 定義閃爍的文本。
?CSS3中還有一些新增加的屬性值但是目前瀏覽器多不支持，不再介紹
·letter-spacing 設(shè)置字符間距。
?定義字符間的固定空間
?normal 默認(rèn)。/像素：（允許使用負(fù)值）
·word-spacing 設(shè)置字/單詞間距。
?增加或減少單詞間的空白
?normal 就等同于設(shè)置為 0。/如果指定為長(zhǎng)度值，會(huì)調(diào)整字之間的通常間隔；（允許使用負(fù)值）。
·text-transform 設(shè)置對(duì)象中的文本的大小寫(xiě)
?none默認(rèn)。標(biāo)準(zhǔn)的文本。/capitalize每個(gè)單詞以大寫(xiě)字母開(kāi)頭。/uppercase 轉(zhuǎn)換為大寫(xiě)字母。/lowercase轉(zhuǎn)換為小寫(xiě)字母
·text-shadow 向文本添加陰影。
熟悉
·white-space 設(shè)置元素中空白的處理方式。
?normal 默認(rèn)?？瞻讜?huì)被瀏覽器忽略
?pre 空白會(huì)被瀏覽器保留。其行為方式類(lèi)似 HTML 中的pre標(biāo)簽。
?nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到br標(biāo)簽為止。
?pre-wrap 保留空白符，但是正常地進(jìn)行換行。
?pre-line 合并空白符，但是正常地進(jìn)行換行。
·direction 設(shè)置文本方向
?ltr默認(rèn)。文本方向從左到右。/rtl 文本方向從右到左。
·word-wrap 允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行。
?normal默認(rèn)值/break-word:在長(zhǎng)單詞或 URL 地址進(jìn)行換行。
·word-break 規(guī)定非中日韓文本的換行規(guī)則。
?normal默認(rèn)值/break-all：允許在單詞內(nèi)換行。/keep-all 只能在半角空格或連字符處換行。
·text-fill-color 文本填充顏色，指定文字填充部分的顏色.目前多數(shù)瀏覽器不支持，暫不講解。
·text-stroke 文本邊框顏色，指定文字描邊部分的顏色。目前多數(shù)瀏覽器不支持，暫不講解。
?text-stroke-width文字的描邊寬度
?text-stroke-color文字的描邊顏色
?備注:使用該屬性需要使用瀏覽器私有前綴
·text-overflow 設(shè)置是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出
?clip： 默認(rèn)值當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記（...），而是將 溢出的部分裁切掉。
?ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）。
?溫馨提示:該屬性需要和over-flow:hidden屬性、white-space:nowrap配合使用，放到后邊章節(jié)再講解
了解
·text-outline 規(guī)定文本的輪廓
·text-justify 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對(duì)齊方法。
·text-align-last 設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行。
·text-emphasis 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。
·unicode-bidi 用于同一個(gè)頁(yè)面里存在從不同方向讀進(jìn)的文本顯示。與direction屬性一起使用
?normal/embed/bidi-override
?不常用，了解即可
·hanging-punctuation 規(guī)定標(biāo)點(diǎn)字符是否位于線(xiàn)框之外。
·punctuation-trim 規(guī)定是否對(duì)標(biāo)點(diǎn)字符進(jìn)行修剪。
·tab-size:設(shè)定一個(gè)tab在頁(yè)面中的顯示長(zhǎng)度
·text-wrap 規(guī)定文本的換行規(guī)則。注釋?zhuān)耗壳爸髁鳛g覽器都不支持 text-wrap 屬性。
#div1{font-size: 50px}
#div2{font-size: 100%}
#div3{font-size:x-large}
#div4{font-variant: small-caps;}
#div5{font-style: italic;}
#div6{font-family:黑體;font-size: 50px}
#div7{font:italic bold small-caps 60px 楷體;}
text-align: left;/ 文本方向
line-height: 2; 字體高度
text-indent: 30px; 設(shè)置文本的首行縮進(jìn)
text-decoration:none; 向文本添加修飾。
letter-spacing:1em; 設(shè)置字符間距。
word-spacing:1em; 設(shè)置字/單詞間距。
a{text-decoration:none;}
white-space:pre; 設(shè)置元素中空白的處理方式
#p1{
direction:rtl;
unicode-bidi:bidi-override; 用于同一個(gè)頁(yè)面里存在從不同方向讀進(jìn)的文本顯示。與direction屬性一起使用
}
聯(lián)系客服
