CSS3的字型和文字相關屬性

阿新 • • 發佈：2018-12-18

CSS3其中一個重要變化就是增加了伺服器字型功能，這樣避免了我們瀏覽頁面時因為字型缺失導致網頁效果變差的問題。通過CSS3的伺服器字型功能，可以控制瀏覽器使用伺服器包含的字型，這樣可以保證即使我們的電腦上沒有安裝任何字型，也可以呈現出統一的頁面。

字型相關屬性

CSS為控制文字的字型提供了很多的屬性，這些字型相屬性關的屬性主要用於控制文字的字型、顏色、修飾等外觀。字型相關屬性如下所示：

font	控制文字的樣式、字型粗體、大小等屬性。為了更好的進行控制，通常不使用該屬性。
color	控制文字的顏色，屬性值可以是顏色名、十六進位制的顏色值、rgb函式、CSS3提供的HSL顏色值（色相、飽和度、明度）
font-family	設定文字的字型，可以設定多個顯示字型（以，號隔開）。
font-size	設定文字的字型，可以是相對字型，也可以是絕對字型。支援xx-small、x-smallengthl、small、medium、large、length等屬性值
font-size-adjust	用於控制對不同字型的尺寸進行微調，可以指定none（不進行任何調整）。
font-stretch	改變文字橫向的拉伸，預設值為normal（表示不拉申），還有兩個屬性值，narrower（橫向壓縮）和wider（橫向拉伸）
font-style	設定文字的風格，是否使用斜體等。屬性值：normal、itlic、oblique，設定文字正常、斜體、傾斜字型。
font-weight	設定字型是否加粗，可以用100、200、300、900來控制字型的加粗程度。
text-decoration	用於控制文字是否有修飾線，如下畫線等，屬性的值有none、blink、underline、line-through、overline，意思分別為無修飾、閃爍、下畫線、中畫線和上畫線等。
font-variant	設定文字的大寫字母格式。該屬性支援normal、small-caps兩個屬性，分別代表正常字型、小型的大寫字母字型。
text-shadow	設定文字是否有陰影效果。
text-transform	設定文字的大小寫。該屬性支援none、small-capitalize、uppercase和lowercase，分別代表不轉換、手寫字母大寫、全部大寫。全部小寫。
line-height	設定字型的行高，即字型最底端與字型內部頂端之間的距離，為負值的行高可以實現陰影效果。
letter-spacing	設定字元之間的間隔，最後一個文字不會受到影響，該屬性支援normal和資料+長度單位（如11pt、14px等）兩種屬性。
word-spacing	設定單詞之間的間隔，該屬性支援normal和資料+長度單位（如11pt、14px等）兩種屬性。

下面程式碼寫了對上面各種屬性進行了示範，頁面左邊是設定的屬性值，右邊則是設定後的效果。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 字型相關屬性設定 </title>
</head>
<body>
color:#888888：
<span style="color:#888888">測試文字</span><br />
color:red：
<span style="color:red">測試文字</span><br />
font-family:隸書：
<span style="font-family: '隸書'">測試文字</span><br />
font-size:20pt：
<span style="font-size:20pt">測試文字</span><br />
font-size:xx-large：
<span style="font-size:xx-large">測試文字</span><br />
font-stretch:narrower：
<span style="font-stretch:narrower">測試文字</span><br />
font-stretch:wider：
<span style="font-stretch:wider">測試文字</span><br />
font-style:italic：
<span style="font-style:italic">測試文字</span><br />
font-weight:bold：
<span style="font-weight:bold">測試文字</span><br />
font-weight:900：
<span style="font-weight:900">測試文字</span><br />
text-decoration:blink：
<span style="text-decoration: blink;">測試文字</span><br />
text-decoration:underline：
<span style="text-decoration:underline">測試文字</span><br />
text-decoration:line-through：
<span style="text-decoration:line-through">測試文字</span><br />
font-variant:small-caps ：
<span style="font-variant:small-caps">hello</span><br />
text-transform:uppercase：
<span style="text-transform:uppercase">hello</span><br />
text-transform:capitalize：
<span style="text-transform:capitalize">hello</span><br />
line-height:30pt：
<span style="line-height:30pt">測試文字</span><br />
letter-spacing:5pt：
<span style="letter-spacing:5pt">hello world</span><br />
letter-spacing:15pt：
<span style="letter-spacing:15pt">hello world</span><br />
word-spacing:20pt：
<span style="word-spacing:20pt">hello world</span><br />
word-spacing:60pt：
<span style="word-spacing:60pt">hello world</span><br />
</body>
</html>

1.使用text-shadow新增陰影

字型相關屬性提供了一個text-shadow屬性，該屬性值形如color xoffset yoffset length，或xoffset yoffset radius color。

color：指定陰影的顏色，如果省略指定陰影顏色，在Firefox、Opera中直接使用字型顏色作為陰影顏色，在IE和谷歌不會顯示陰影。
xoffset ：指定陰影在橫向上的偏移。
yoffset ：指定陰影在縱向上的偏移。
radius：指定陰影的模糊半徑。模糊半徑越大，陰影看上去越模糊。

下面頁面程式碼示範了設定陰影的幾個引數的意思：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 陰影 </title>
</head>
<body>
text-shadow:red 5px 5px 2px：
<p style="text-shadow:red 5px 5px 2px">測試文字</p>
text-shadow:5px 5px 2px（省略陰影顏色）：
<p style="text-shadow:5px 5px 2px;color:blue;">測試文字</p>
text-shadow:-5px -5px 2px gray（向左上角投影）：
<p style="text-shadow:-5px -5px 2px gray">測試文字</p>
text-shadow:-5px 5px 2px gray（向左下角投影）：
<p style="text-shadow:-5px 5px 2px gray">測試文字</p>
text-shadow:5px -5px 2px gray（向右上角投影）：
<p style="text-shadow:5px -5px 2px gray">測試文字</p>
text-shadow:5px 5px 2px gray（向右下角投影）：
<p style="text-shadow:5px 5px 2px gray">測試文字</p>
text-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）：
<p style="text-shadow:15px 15px 2px gray">測試文字</p>
text-shadow:5px 5px 10px gray（模糊半徑增加，模糊程度加深）：
<p style="text-shadow:5px 5px 10px gray">測試文字</p>
</body>
</html>

2.新增多個陰影

如果希望為文字新增多個陰影，則可以為text-shadow屬性設定幾組陰影，多組陰影之間用逗號隔開，例如下面程式碼所示：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 多個陰影 </title>
	<style type="text/css">
		span{
			display: block;
			padding: 8px;
			font-size:xx-large;
		}
	</style>
</head>
<body>
text-shadow:5px 5px 2px #222,<br/>
	30px 30px 2px #555 ,<br/>
	50px 50px 2px #888（多個陰影）：
<span style="text-shadow:5px 5px 2px #222,30px 30px 2px #555
	,50px 50px 2px #888">測試文字</span>
</body>
</html>

3.使用font-size-adjust屬性微調字型大小

對於西方文字來說，相同字號、不同字型的字母也是不同的，例如以下程式碼：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> text-size-adjust </title>
	<style type="text/css">
		#div1 {
			font-size: 16pt;
			font-family: "Courier New";
			font-size-adjust: 0.41;
		}
		#div2 {
			font-size: 16pt;
			font-family: "Roma";
			font-size-adjust: 0.66;
		}
		#div3 {
			font-size: 16pt;
			font-family: "Impact";
			font-size-adjust: 0.93;
		}
	</style>
</head>
<body>
<div id="div1">Our domain is www.crazyit.org</div>
<div id="div2">Our domain is www.crazyit.org</div>
<div id="div3">Our domain is www.crazyit.org</div>
</body>
</html>

CSS3支援的顏色表示方法

CSS2已經提供了多種顏色表示的方法，如字串形式的顏色名、十六進位制的顏色值等。但CSS2不允許為顏色設定透明度，因此顯得不夠完善。CSS則提供了更多的顏色表示方法，總結起來有如下幾種：

用顏色名錶示，例如white（白色）、red（紅色）、blue（藍色）等。
用十六進位制表示，這是典型的三原色混合原理，例如：#FF0000，其中前兩位FF表示紅光的值——也就是把紅光分成0~255個色階，其中00表示滿意紅光，#”開頭的6位十六進位制數值表示一種顏色。6位數字分為3組，每組兩位，依次表示紅、綠、藍三種顏色的強度。
用rgb(r，g，b)函式表示，這也是三原色混合原理。例如rgb(255,255,0)，紅光的值為255（最大值）、綠光也是255（最大值），藍光的值為0，混合出來就是黃色。在RGB 顏色模式，顏色由表明紅色，綠色，和藍色各成分強度的三個數值表示。從極小值0到最大值255，當所有顏色,都在最低值被顯示的顏色將是黑色，當所有顏色都在他們的最大值被顯示的顏色將是白色。但是，一個纏擾不清的方面在RGB 顏色模式是，所有這些顏色可能代表以各種各樣的方法。
用hsl（Hue，Stauration，Lightness）函式表示，用色調、飽和度、亮度控制的顏色，例如hsl(120,100%,100%)其中色調為120，也就是綠色（色調0代表紅色、色調120代表綠色、色調240代表藍色），飽和度、亮度都是100%，所以就是綠色。
rgba(r，g，b，a)函式表示，跟rgb函式相似，比它多了個a，就是透明度的意思。a引數可以在0~1之間的任意數，其中0代表完全透明。
hsla函式跟hsl相比多了個alpha引數，用於指定顏色的透明度，alpha引數可以在0~1之間的任意數，其中0代表完全透明。

下面程式碼示範了各種顏色表示的方法：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 顏色表示方式 </title>
	<style type="text/css">
		div>div{
			width: 400px;
			height: 40px;
		}
	</style>
</head>
<body>
<script type="text/javascript">
	for (var i = 0; i < 110 ; i++)
	{
		document.write("測試文字");
	}
</script>
<div style="position:absolute;top:0px">
	<div style="background-color:gray;">background-color:gray</div>
	<div style="background-color:#aaa;">background-color:#aaa;</div>
	<div style="background-color:#ffff00;">background-color:#ffff00;</div>
	<div style="background-color:rgb(255, 0 , 255);">
		background-color:rgb(255, 0 , 255);</div>
	<div style="background-color:hsl(120, 80%, 50%);">
		background-color:hsl(120, 80%, 50%);</div>
	<div style="background-color:rgba(255, 0 , 255 , 0.5);"></div>
	<div style="background-color:hsla(120, 80%, 50% , 0.5);"></div>
</div>
</body>
</html>

文字相關屬性

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

1.text-indent：用於設定段落文字的縮排，預設值為0.被另外一個元素（如br）斷開的元素不能應用本屬性。

2.text-overflow：用於控制溢位文字的出來方法。該屬性支援如下兩個屬性值。

clip：如果該元素指定了overflow：hidden屬性值，該元素中文字溢位時，clip指定只要簡單裁切溢位的文字（不顯示超長的部分）。
ellipsis：如果該元素指定了overflow：hidden屬性值，該元素中文字溢位指定，ellipsis指定裁切溢位的文字，並顯示溢位標記（...）顯示。

3.vertical-align：用於設定目標元素內容的垂直對齊方式，通常有頂端對齊，底對齊等方式。

auto：對元素的文字內容執行自動對齊。
baseline：預設值，將支援valign屬性的元素的文字內容與基線對齊。
sub：將元素的內容與文字下標對齊。
super：將元素的內容與文字上標對齊。
top：預設值，將支援valigin屬性的元素文字內容與元素頂端對齊。
middle：預設值，將支援valigin屬性的元素文字內容對齊到元素的中間。
bottom：預設值，將支援valigin屬性的元素文字內容與元素底端對齊。
length：指定文字內容相對於基線的偏移距離。

4.text-align：用於設定目標元素中文字的水平對齊方式。該屬性支援left、right、center（居中對齊）、justify（兩端對齊）。

5.direction：用於設定文字流入的方向，該屬性的合法值有ltr（從左向右）和rtl（從右向左）。該屬性不會影響拉丁文字母、數字字元，它們總是以ltr值呈現。但此屬性會作用於拉丁文的標點符號。

6.white-space：用於設定目標元素對文字內容中空白的處理方式。

7.word-break：用於設定目標元素中文字內容的換行方式。

8.word-wrap：用於設定目標元素中文字內容的換行方式。

下面的程式碼示範了上面我們常用到的文字相關屬性：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>文字相關屬性設定</title>
	<style type="text/css">
	/* 為div元素增加邊框 */
	div{
		border:1px solid #000000;
		height: 30px;
		width: 200px;
	}
	</style>
</head>
<body>
<!-- 縮排20pt -->
text-indent:20pt <div style="text-indent:20pt">測試文字</div>
<!-- 縮排20pt -->
text-indent:40pt <div style="text-indent:40pt">測試文字</div>
<!-- 居中對齊 -->
text-align:center <div style="text-align:center">測試文字</div>
<!-- 居右對齊 -->
text-align:right <div style="text-align:right">測試文字</div>
<!-- 文字從右邊流入 -->
direction:rtl <div style="direction:rtl">測試文字</div>
<!-- 文字從左邊流入 -->
direction:ltr <div style="direction:ltr">測試文字</div>
<!-- 當文字溢位時，只是簡單地裁切 -->
text-overflow:clip <div style="overflow:hidden;white-space:nowrap;
	text-overflow:clip;">測試文字測試文字測試文字測試文字測試文字測試文字</div>
<!-- 當文字溢位時，裁切之後顯示裁切標記 -->
text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap;
	text-overflow:ellipsis;">測試文字測試文字測試文字測試文字測試文字測試文字</div>
</body>
</html>

1.使用white-space控制空白的處理行為

white-space用於控制HTML元素對元素文字中空白的處理方式。該屬性支援以下幾個屬性值：

normal：預設值，瀏覽器忽略文字的空白。
pre：瀏覽器將保留文字中的所有空白，其行為類似於<pre>標籤。
nowrap：文字不會換行，文字會在同一行上繼續，直到遇到<br>標籤為止。
pre-wrap：保留空白符的序列，但可以正常的換行。
pre-line：合併空白符的序列，但保留換行符。
inherit：指定從父元素繼承white-space屬性的值。

下面程式碼將示範了white-space屬性對空白的處理行為：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> white-space </title>
	<style type="text/css">
	/* 為div元素增加邊框 */
	div{
		border:1px solid #000000;
		height: 80px;
		width: 240px;
	}
	</style>
</head>
<body>
<!-- 忽略文字中的空白、換行符 -->
white-space:normal <div style="white-space:normal">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 保留文字中所有空白、換行符 -->
white-space:pre <div style="white-space:pre">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 忽略文字中空白，換行符，強制不換行 -->
white-space:nowrap <div style="white-space:nowrap">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 保留文字中空白序列，換行符 -->
white-space:pre-wrap <div style="white-space:pre-wrap">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 合併文字中空白序列，保留換行符 -->
white-space:pre-line <div style="white-space:pre-line">
The root interface   in    
the     collection     hierarchy. </div>
</body>
</html>

2.文字自動換行：word-break

當HTML元素不足以顯示它裡面的文字時，瀏覽器將會自動換行顯示它裡面的所有文字。瀏覽器換行規則：對於西方文字來說，瀏覽器只會在半形空格、連字元的地方換行；對於中文來說，瀏覽器可以在任何一箇中文字元後換行。如果希望改變瀏覽器的預設換行行為，自己有需求的話，可以看看如下屬性值：

normal：靠瀏覽器的預設規則進行換行。（瀏覽器換行規則）
keep-all：只能在半形空格或連字元處換行。
break-all：設定允許在單詞中間換行。

如果想要讓瀏覽器在西方文字的單詞中間換行，則可將word-break屬性設定為break-all。下面程式碼將示範了word-break屬性功能：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> word-break </title>
	<style type="text/css">
	/* 為div元素增加邊框 */
	div{
		border:1px solid #000000;
		height: 50px;
		width: 240px;
	}
	</style>
</head>
<body>
<!-- 不允許在單詞中換行 -->
word-break:keep-all <div style="word-break:keep-all">
The root interface in the collection hierarchy. </div>
<!-- 指定允許在單詞中換行 -->
word-break:break-all <div style="word-break:break-all">
The root interface in the collection hierarchy. </div>
</body>
</html>

3.用word-wrap控制長單詞或URL地址換行。

有時候文字內容包含了特別長的單詞或特別長的URL地址——URL地址既不包含半形空格，也不包含連字元，因此當瀏覽器視窗比較窄時，將會出現滾動條。如果需要改變預設行為，就需要通過word-wrap屬性設定，該屬性有如下兩個值：

normal：靠瀏覽器的預設規則進行換行。
break-word：設定單詞允許中間換行。

為了讓瀏覽器控制文字的內容在長單詞、URL地址中間換行，可以通過word-wrap屬性，設定為brea-word即可，如下所示：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> word-wrap </title>
	<style type="text/css">
	/* 為div元素增加邊框 */
	div{
		border:1px solid #000000;
		height: 70px;
		width:140px;
	}
	</style>
</head>
<body>
<!-- 不允許在長單詞、URL地址中間換行 -->
word-wrap:normal <div style="word-wrap:normal;">
Our domain is http://www.crazyit.org</div>
<!-- 允許在長單詞、URL地址中間換行 -->
word-wrap:break-word <div style="word-wrap:break-word;">
Our domain is http://www.crazyit.org</div>
</body>
</html>

注意：work-break和work-wrap屬性的作用是不同的。work-break設定為break-all，可以讓元素內每一行文字最後一個單詞自動換行；work-wrap則會盡量讓長單詞、URL地址不要換行。即使設定為break-word，也會盡量讓其單獨佔一行，只有當一行文字不足以顯示這個長單詞、URL地址時，才會在其中間換行。

CSS3新增的伺服器字型

在CSS3以前，我們只能使用最普通的字型，有些網頁甚至根本不會設定字型，這是因為網頁上使用某種字型後，除非我們電腦上存在這種字型，否則顯示將無效。CSS3的出現改變了這種現狀，CSS3允許使用伺服器字型，如果客戶端沒有安裝這種字型，客戶端將會自動去下載這種字型。

1.使用伺服器字型

使用伺服器字型很簡單，只要使用@font-face定義伺服器字型即可。大家是不是感覺很簡單，@font-face語法如下：

@font-face {
	font-family: name;
	src: url(url) format(fontformat);
        sRules
}

font-familt：伺服器字型的名稱，可以隨意定義。src：通過URL指定該字型檔案的路徑，format指的是字型的格式。為了使用伺服器字型，步驟如下（需要字型檔案的可以網上下載也可以在我的資源庫中下載）：

下載需要使用伺服器字型對應的字型檔案（在網上搜一搜，會有大量的字型讓我們下載）。
使用@font-face定義伺服器字型。
通過font-family指定伺服器字型。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 伺服器字型 </title>
	<style type="text/css">
		/* 定義伺服器字型，字型名為CrazyIt
		伺服器字型對應的字型檔案為Blazed.ttf */
		@font-face {
			font-family: CrazyIt;
			src: url("Blazed.ttf") format("TrueType");
		}
	</style>
</head>
<body>
<!-- 指定CrazyIt字型，這是伺服器字型 -->
<div style="font-family:CrazyIt;font-size:36pt">
Our domain is http://www.baidu.com
</div>
</body>
</html>

2.定義粗體、斜體字

我們在網頁上除了定義字型外，還會定義粗體、斜體。但在使用伺服器字型時，需要為粗體、斜體、粗斜體使用不同的字型檔案。在@font-face中增加了font-weight，font-style等定義（字型檔案需要下載）。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 伺服器字型 </title>
	<style type="text/css">
		/* 定義普通的伺服器字型 */
		@font-face {
			font-family: CrazyIt;
			src: url("Delicious-Roman.otf") format("OpenType");
		}
		/* 定義粗體的伺服器字型 */
		@font-face {
			font-family: CrazyIt;
			src: url("Delicious-Bold.otf") format("OpenType");
			font-weight: bold;
		}
		/* 定義斜體的伺服器字型 */
		@font-face {
			font-family: CrazyIt;
			src: url("Delicious-Italic.otf") format("OpenType");
			font-style: italic;
		}
		/* 定義粗斜體的伺服器字型 */
		@font-face {
			font-family: CrazyIt;
			src: url("Delicious-BoldItalic.otf") format("OpenType");
			font-style: italic;
			font-weight: bold;
		}
	</style>
</head>
<body>
<div style="font-family:CrazyIt;font-size:30pt">
Our domain is http://www.baidu.com</div>
<div style="font-family:CrazyIt;font-size:30pt;font-weight:bold">
Our domain is http://www.baidu.com</div>
<div style="font-family:CrazyIt;font-size:30pt;font-style:italic;">
Our domain is http://www.baidu.com</div>
<div style="font-family:CrazyIt;font-size:30pt;font-weight:bold
;font-style:italic;">Our domain is http://www.baidu.com</div>
</body>
</html>

3.優先使用客戶端字型

雖然CSS3提供了伺服器字型功能，但也不能動不動上來就用伺服器字型，因為它需要從遠處伺服器下載字型檔案，效率感覺並不好。所以儘量使用客戶端字型，當客戶端不存在這種字型時，才考慮用伺服器字型進行代替(url可以是本地也可以是網頁伺服器上的檔案)。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 優先使用客戶端字型 </title>
	<style type="text/css">
		/* 定義伺服器字型：CrazyIt
		該字型優先使用客戶端字型：Goudy Stout
		當客戶端字型不存在時，使用Blazed.ttf作為替代字型。
		*/
		@font-face {
			font-family: CrazyIt;
			src: local("Goudy Stout"), url("Blazed.ttf") format("TrueType");
		}
	</style>
</head>
<body>
<div style="font-family:CrazyIt;font-size:24pt">
Our domain is http://www.baidu.com
</div>
</body>
</html>

指定src屬性時，優先使用local("Goudy Stout")客戶端字型，當不存在時， url("Blazed.ttf")才會去替代它。

CSS3服務字型檔案可以在我的資源庫中進行下載：連結地址

----------------------------------------------------學會選擇和堅持，就贏得了人生的主動權。----------------------------------------------------

CSS3的字型和文字相關屬性

字型相關屬性

1.使用text-shadow新增陰影

2.新增多個陰影

3.使用font-size-adjust屬性微調字型大小

CSS3支援的顏色表示方法

文字相關屬性

1.使用white-space控制空白的處理行為

2.文字自動換行：word-break

3.用word-wrap控制長單詞或URL地址換行。

CSS3新增的伺服器字型

1.使用伺服器字型

2.定義粗體、斜體字

3.優先使用客戶端字型

CSS3的字型和文字相關屬性

一些常用的字型和文字的屬性

css3知識點和新的屬性

關於聯合喚醒詞檢測和文字相關說話人驗證的卷積LSTM建模

HTML-CSS 文字相關屬性

web 背景圖片屬性background和文字顏色屬性text

CSS樣式連結和文字常用屬性

CSS字型和文字樣式設定筆記

從零玩轉HTML5前端+跨平臺開發——文字相關屬性(掌握)

CSS設定字型和文字樣式

CSS之對字型和文字的修飾

CSS學習筆記(二) 字型和文字

按鈕相關屬性設置（按鈕文字位置和圖片位置設置）

css中文字（text）和字型（font）屬性

CSS3的盒型別和相關屬性

第95天：CSS3 邊框、背景和文字效果

Android系統的桌面圖示文字——調整字型大小、圖示和文字間的間隔

echarts相關屬性設定（2）--折線圖和柱狀圖的結合使用

用於文字相關說話人驗證的J-Vector提取器和聯合貝葉斯模型的聯合學習

CSS屬性（字型與文字屬性）

CSS3的字型和文字相關屬性

字型相關屬性

1.使用text-shadow新增陰影

2.新增多個陰影

3.使用font-size-adjust屬性微調字型大小

CSS3支援的顏色表示方法

文字相關屬性

1.使用white-space控制空白的處理行為

2.文字自動換行：word-break

3.用word-wrap控制長單詞或URL地址換行。

CSS3新增的伺服器字型

1.使用伺服器字型

2.定義粗體、斜體字

3.優先使用客戶端字型

相關推薦