CSS font 字型

admin發表於2018-12-07
CSS

本文不但介紹CSS font屬性的用法，也會介紹一些常用設定字型樣式的屬性。

一.非font相關屬性：

（1）.color屬性設定字型顏色：

[CSS] 純文字檢視 複製程式碼
color:#ccc;

上述程式碼可以將字型顏色設定為#ccc。

屬性值可以CSS種任意合法的顏色表示法，具體參閱CSS顏色值型別一章節。

（2）.line-height設定行高：

通過line-height屬性可以設定文字在元素中垂直位置。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css"> 
div{
  width:150px;
  height:40px;
  background-color:#ccc;
  line-height:40px;
}
</style> 
</head> 
<body> 
<div>螞蟻部落</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234407ecs7bswqxapq76jp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通常情況下，會將文字設定為垂直居中，只要將line-height與height設定同值即可。

（3）.text-align設定文字居中方式：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css"> 
div{
  width:150px;
  height:40px;
  background-color:#ccc;
  line-height:40px;
  text-align:center;
}
</style> 
</head> 
<body> 
<div>螞蟻部落</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234428hdacx63qyv1y8eic.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼設定文字水平居中，當然也可以設定左對齊或者右對齊。

（4）.text-transform設定為本大小寫：

利用此屬性可以設定字元的大小寫，具有如下幾個屬性值：

none : 不進行轉換。

capitalize : 將單詞的第一個字元轉換為大寫，其他字元不做轉換。

uppercase : 將所有字元轉換為大寫。

lowercase : 將所有字元轉換為小寫。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234451vib5fzy7iz5159mz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼僅演示轉換為大寫形式的效果，其他效果感興趣的朋友自行演示。

關於上述更多內容參閱CSS 設定文字樣式一章節。

二.font屬性：

此屬性用於設定字型的相關樣式，

font是一個複合屬性，可以分解為多個子屬性，此屬性具有眾多子屬性。

下面只介紹一下比較常用的，對於很少使用的子屬性不做介紹。

1.font-style屬性：

此屬性用來設定字型樣式，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {height: 30px;}
.ant-1 {font-style: normal;}
.ant-2 {font-style: italic;}
.ant-3 {font-style:oblique;}
</style>
</head>
<body>
  <div class="ant-1">螞蟻部落一</div>
  <div class="ant-2">螞蟻部落二</div>
  <div class="ant-3">螞蟻部落三</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234523dmg1497oiiyzbl3p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能的屬性值如下：

（1）.normal：預設值，正常的字型。

（2）.italic：固定文字為斜體，如果沒有斜體的特殊字型，應用oblique。

（3）.oblique：規定為文字為傾斜字型。

2.font-variant屬性：

此屬性用於設定文字以大寫形式展現，但是它的字型要比正常字型要小。

特別說明：此屬性對於漢字或者數字不適用。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{height:30px;}
.normal{font-variant:normal;}
.small-caps{font-variant:small-caps;}
</style>
</head>
<body>
  <div class="normal">螞蟻部落一</div>
  <div class="small-caps">螞蟻部落二</div>
  <div class="small-caps">I love antzone</div>
  <div class="normal">I love antzone</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234555ut7jeohyex7xjtcz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.對漢字沒有任何效果。

（2）.僅對小寫字元有效，對大寫字元沒有效果。

（3）.小寫字元雖然被轉換為大寫，但是字型整體卻變小了。

3.font-weight屬性:

用來設定文字的粗細，非常形象，可以類比於人的體重，體重越大人變得會越粗。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{height:30px;}
div{font-weight:bold;}
</style>
</head>
<body>
  <div>螞蟻部落</div>
</body>
</html>

程式碼執行效果如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234621nd8pjdooexmebp8c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能的屬性值如下：

（1）.normal：預設值，相當於400。

（2）.bold：設定文字為粗體，相當於700。

（3）.bolder：設定文字為特粗體，功能相當於strong和b的作用。

（4）.lighter：設定文字為細體。

（5）.<integer>：取值範圍:100|200|300|400|500|600|700|800|900。

屬性值挺有意思，數字好像設定文字的重量一般，數字越大，體重越大，自然就越粗。

4.font-size屬性:

此屬性用於設定字型大小，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{height:30px;}
.ant-1{font-size:12px;}
.ant-2{font-size:150%;}
.ant-3{font-size:smaller;}
.ant-4{font-size:2em}
</style>
</head>
<body>
  <div class="ant-1">螞蟻部落一</div>
  <div class="ant-2">螞蟻部落二</div>
  <div class="ant-3">螞蟻部落三</div>
  <div class="ant-4">螞蟻部落四</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/07/234649q214r2yswcy8wzs0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼說明如下：

（1）.屬性值可以是關鍵字比如smaller等，當然很少有這麼使用的。

（2）.更常用的是px、em或者百分比等單位。

5.font-family屬性:

此屬性可以設定字型的名稱，通常是一個字型名稱序列，用逗號分隔。

瀏覽器會從第一個開始嘗試查詢字型，如果沒有找到，則繼續向後查詢。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{font-family:Verdana, Geneva, sans-serif}
</style>
</head>
<body>
  <div>螞蟻部落</div>
</body>
</html>

上述程式碼設定的屬性值就是一個字型序列，瀏覽器會挨個查詢。

為了字型更加符合實際需求，可能會引入網路字型，具體參閱@font-face的用法一章節。

三.font的複合寫法：

font是一個複合屬性，可以將各個子屬性列出來設定文字字型。

當然也可以使用複合簡化形式，但是格式有一些注意點。

考慮到文章的篇幅問題，本文不做介紹，具體參閱CSS font 複合簡化格式一章節。

相關文章