字體與文本相關屬性

2017-11-19
加入好友隨時分享有用經驗！

字體相關屬性

css中為控制文本的字體提供了大量的屬性，這些屬性主要用於控制文本的字體、顏色、修飾等外觀。

font：這是一個複合屬性，使用該屬性可同時控制文字的樣式、字體粗體、字體大小、字體等屬性。
color：該屬性用於控制文字顏色，該屬性的的值可以是任何有效的顏色值，包括顏色名、十六進位的顏色值，還可以使用rgb（）函數設置rgb值。
font-family：設置文字的字體，可以設置多個顯示字體，顯示的字體是瀏覽器優先找到的字體。
font-size：該屬性用於設置文字的字體大小，字體大小可以是相對的字體大小，也可以是絕對的字體大小。該屬性支持如下屬性值：
xx-small:最小字體。

Advertisements

x-small:較小字體。
small：小字體。
medium：正常大小字體，默認值。
large：大字體。
x-large：較大字體。
xx-larger：最大字體。
larger：相對於父組件中的字體進行相對增大。
smaller：相對於父組件中的字體進行相對減小。
length：直接設置字體大小。可以設置為百分比，也可以設置為數值+長度單位。
font-size-adjust:用於控制對不同字體的字體尺寸進行微調，該屬性可以指定為none或一個數值代表調整比例。
font-stretch：該屬性用於改變文字橫向的拉伸，默認值為normal，還有其他兩個屬性值，即narrower是橫向壓縮，wider是橫向拉伸。

Advertisements
font-style：用於設置文字風格，是否採用斜體。normal文字正常、italic斜體、oblique傾斜文字。
font-weight：用於設置字體是否加粗。加粗的程度可以用lighter、normal、bold、bolder、表示更細、正常、加粗、更粗。還可以用具體的值來控制字體的加粗程度。
text-decoration：該屬性用於控制文字是否有修飾線。它的值有none、blink、underline、line-through、overline分別對應修飾效果為無修飾、閃爍、下劃線、中劃線、上劃線。
font-variant：設置文字的大寫字母的格式。該屬性支持normal、small-caps分別對應正常的字體、小型的大寫字母字體。
text-shadow：該屬性用於設置文字是否有陰影效果。
text-transform：該屬性用於設置文字的大小寫。none、capitalize、uppercase、lowercase分別代表不轉換、首字母大寫、全部大寫和全部小寫。
line-height：用於設置字體的行高。
letter-spacing：用於設置字元之間的間隔。該屬性支持normal和數值+長度單位。
word-spacing：用於設置單詞之間的間隔。該屬性支持normal和數值+長度單位。
下面代碼是上面屬性的示範

添加陰影

在字體屬性中提過一個陰影屬性text-shadow屬性

color：指定該陰影的顏色，如果省略指定陰影顏色，將使用字體顏色作為引用顏色。
xoffset：指定陰影在橫向上的偏移。
yoffset：指定陰影在縱向上的偏移。
radius：指定陰影的模糊半徑，模糊半徑越大，陰影看上去越模糊。

添加多個陰影

添加多個陰影的可以為text-shadow屬性多設置幾組陰影，他們之間可以用逗號隔開。

使用font-size-adjust屬性微調字體大小

在英文中，有些相同字型大小、不同字體的字母大小是不同的。

在網頁布局是可能因為字體大小不同導致網頁內容錯亂，為了解決這個問題，可通過font-size-adjust屬性的值通常應設為該字體的aspect值。

css3支持的顏色表示方法

css支持如下幾種顏色表示方法

用顏色名表示，這種方式簡單、易用，但是能表示的顏色數量有限。
用十六進位的顏色值表示，如#FF0000，前兩位代表紅光值，中間兩位代表綠光值，後面兩位代表藍光值。
用rgb函數表示，如rgb（255,255,0）前面的為紅光值，中間的為綠光值，後面的為藍光值。
用hsl函數表示，它是用色調、飽和度、亮度控制的顏色。
用rgba函數表示，與rgb函數相似，只是多了個a參數，它用於指定顏色的透明度，參數是0~1之間的任意數，0代表完全透明。
用hsla函數表示，它的a也同上面的一樣，表示透明值。

文本相關屬性

文本相關屬性用於控制整個段或整個<div.../>元素的顯示效果，包括文字的縮進、段落內文字的對齊等顯示方式。

text-indent：用於設置段落文本的縮進。當被另一個元素斷開的元素不能應用本屬性。
text-overflow：用於控制溢出文本的處理方法。該屬性支持下面兩個屬性值。
clip：如果該元素指定了overflow：hidden屬性值，當該元素中文本溢出時，clip指定只是簡單地裁切溢出的文本。
ellipsis：如果該元素指定了overflow：hidden屬性值，當該元素中文本溢出時，ellipsis指定裁切溢出的文本，並顯示溢出標記（...）。
vertical-align：用於設置目標元素里內容的垂直對齊方式，有頂端對齊，底對齊等方式。
auto：對元素的文本內容執行自動對齊。
baseline：默認值。表示文本內容與基線對齊。
sub：將元素的內容與文本下標對齊。
super：將元素的內容與文本上標對齊。
top：默認值。文本內容與元素的頂端對齊。
middle：默認值。文本內容對齊到元素的中間。
bottom：默認值。文本內容與元素的低端對齊。
length：指定文本內容相對於基線的偏移距離。可以使用百分比形式，也可以使用絕對距離形式。
text-align：用於設置目標組件中文本的水平對齊方式。left（左對齊）、right（右對齊）、center（居中對齊）和justify（兩端對齊）。
direction：用於設置文本流入的方向，ltr（從左向右）和rtl（從右向左）。
Word-break：用於設置目標組件中文本內容的換行方式。
normal：靠瀏覽器的默認規則進行換行。
keep-all：只能在半形空格或連字元處換行。
break-all:設置允許在單詞中間換行。
white-space：用於設置目標組件中文本內容對空格的處理方式。
normal：這是默認值，文本自動處理換行。
nowrap：強制在同一行顯示所有文本，直到文本結束或遇到<br.../>元素。
Word-wrap：用於設置目標組件中文本內容的換行。
normal：靠瀏覽器的默認規則進行換行。
break-Word：設置允許在單詞中間換行。