整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
體
1、使用CSS屬性指定和改變字體外觀，常見的屬性有：
font-style: italic; 定義字體的風格
font-weight: bold; 定義字體粗細
font-size: 20px; 定義字體大小
line-height: 30px; 定義一段文字的行高
還可以使用簡寫形式，把所有屬性值放到font屬性中，如：
p {
font: italic bold 20px/30px 微軟黑體;
}2、Font-family 屬性可以設置文字字體樣式，比如常用的中文字體有：微軟雅黑，黑體，宋體等；常用的英文字體有：Verdana，arial，Times New Roman等。Font-family 后面可以定義一個字體，也可以定義一個字體列表。為什么需要使用字體列表呢？因為我們無法控制用戶計算機上安裝什么字體，不僅如此，往往操作系統也不一樣，比如在蘋果的Mac電腦上有的字體，在微軟的Windows上就不一定有，所以最好為字體指定一個可選的字體列表。字體列表實際上就是一個字體有限列表，如下，第一個微軟雅黑是我希望使用的，瀏覽器會盡力加載這個字體，如果用戶電腦上沒有這個字體就使用第二個備用字體，依次類推，字體列表最后面應該制定一個通用字體系列。
p{
font-family: 微軟雅黑, 黑體, Arial, Helvetica, sans-serif;
}3、什么是通用字體系列？在CSS中定義了5個通用字體系列：
· Sans-serif字體系列：無襯線字體，筆畫粗細一致，在計算機屏幕上更容易閱讀
· Serif字體系列：有襯線字體，筆畫末端有裝飾性的線條或凸起，報紙正文中使用的字體
· Monospace字體系列：等寬字體，每個字母寬度一致，用于顯示軟件代碼示例
· Cursive字體系列：手寫體
· Fantasy字體系列：裝飾性字體，設計感較強
所以，候選字體列表中的字體通常來自于同一個字體系列，這樣當瀏覽器找不到優先定義的字體使用備用字體時，頁面展示的效果不會有太大的變化。如果前面指定的特定字體都沒有找到，瀏覽器就從sans-serif字體系列中找一個默認的字體。
4、font-size 調整字體大小的方法有三種：
1）使用像素px，如：
字體大小
注意：20和單位px之間不能有空格，文字的大小就是文字的最低部分和最高部分之間時20像素
2）使用%定義字體大小就是相對于父元素的字體大小，如：p標簽時body的子標簽，body定義的字體大小是20px，所以子標簽p的字體大小是父標簽的150%即30px。
字體大小
3）使用em調整字體大小，類似于百分數，也是一個相對的度量單位，使用em的時候要指定一個比例因子，p標簽是父標簽字體大小的1.2倍即24px。
字體大小
5、font-weight 屬性可以改變字體的粗細，bold為粗體，normal為去掉粗體的樣式。
字體粗細
字體的粗細還有lighter為稍細，bolder稍粗，或者使用數字100、200-900，但是這些都沒有得到字體和瀏覽器的廣泛支持，通常并不適用，了解即可。
6、font-style為字體增加風格
字體風格
有三個可能的值：normal（正常），italic（斜體字符），oblique（傾斜文本）；其中italic是專門為正常字體設計的斜體字符，oblique沒有專門的斜體字符，由瀏覽器負責把正常的字體傾斜顯示，因為不是所有的字體定義了斜體字符，所以使用italic定義字體風格時，瀏覽器找不到這個字體的斜體字符，就通過oblique把正常的字體傾斜顯示，有時候看著是一樣的，有時候則不同，除非非要區分斜體和傾斜文本，不然可以選擇一種使用。
7、line-height 調整行高，定義一個盒子內每一行文字之間的距離。
字體行高
每天進步一點點，跟著教頭學開發。
節我們來講字體樣式，之前我們學習 HTML 的時候學過一些用于字體加粗、傾斜的標簽，但是使用標簽來實現的效果肯定沒有我們通過 CSS 中的樣式來的方便。
接下來我們會給大家介紹下面這幾個屬性的使用：
通過學習上述這幾個 CSS 屬性，我們可以實現給 HTML 中的文字設置字體、大小、風格、傾斜、加粗等。
font-family 屬性用于設置一個元素的字體，字體就是像宋體、楷體等。
通過 font-family 屬性，可以同時聲明多種字體，字體之間使用逗號分隔。根據字體的調用原則，會優先調用第一種字體，如果沒有找到，則會嘗試調用下一個字體，如果都找不到則調用默認字體。
示例：
例如為下面這個 <p> 標簽中的文本設置字體：
<p>Hello，俠課島</p>
可以使用標簽選擇器，然后在 font-family 屬性中設置：
p{
font-family:'Times New Roman','sans-serif', 宋體, 楷體;
}
在聲明字體時，我們應該分別聲明英文字體和中文字體，且英文字體的聲明應該在中文字體之前。因為絕大部分中文字體里包含英文字母，但是不是很好看，而英文字體里不包含中文字符。所以如果我們不希望用中文字體來顯示英文，就一定要記得先聲明英文字體。先聲明的會先調用。
常用英文字體：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字體：宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。
font-size 屬性用于設置字體的大小，常用的單位為 px，即像素。
px 是 Pixel 的縮寫，是可以在數字顯示設備上顯示和表示的數字圖像或圖形的最小單位。像素是數字圖形中的基本邏輯單元，像素也稱為圖像元素。
示例：
例如我們來看下面這段代碼（其他HTML結構代碼沒有展示出來）：
<body>
<h1>斷句</h1>
<p>近水樓臺先得月，向陽花木易為春。</p>
</body>
在瀏覽器中的演示效果為：
然后此時，我們通過 font-size 來將其中的 <h1> 標簽中的字體設置為 14px，<p> 標簽中的字體設置為 20px：
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在瀏覽器中演示效果就變為了下圖所示：
很明顯，通過 CSS 中的 font-size 屬性可以設置任意標簽中的字體大小。
font-style 設置字體的風格，可以將字體設置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。
此屬的常用屬性值如下所示：
示例：
將下面三個 <p> 中的內容設置為不同的字體風格，可以使用類選擇器：
<body>
<p class="normal">將字體設置為標準的字體樣式</p>
<p class="italic">將字體設置為斜體的字體樣式</p>
<p class="oblique">將字體設置為傾斜的字體樣式</p>
</body>
CSS 樣式代碼：
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在瀏覽器中演示效果如下所示：
font-weight 屬性用于設置顯示元素的文本中所用的字體加粗。
此屬性的常用屬性值如下所示：
示例：
將下面的 <p> 標簽的粗細分別設置為 normal、bold、700、900：
<p class="w1">將字體設置為:normal</p>
<p class="w2">將字體設置為:bold</p>
<p class="w3">將字體設置為:700</p>
<p class="w4">將字體設置為:900</p>
CSS 樣式代碼：
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在瀏覽器中演示效果：
font 屬性用于在一個聲明中設置所有的字體屬性，各個屬性之間使用空格隔開。也就是上述幾個屬性的綜合簡寫屬性。
如果我們使用 font 屬性來設置字體樣式，設置順序分別是：font-style、font-variant、font-weight、 font-size/line-height、font-family?？梢圆辉O置其中的某個值，未設置的屬性會使用其默認值。
示例：
<p class="p1">草長鶯飛二月天，拂堤楊柳醉春煙。</p>
<p class="p2">留連戲蝶時時舞，自在嬌鶯恰恰啼。</p>
CSS 樣式代碼：
.p1{
font: italic bold 20px 'sans-serif', 楷體;
}
.p2{
font: bold 14px 'Arial', 宋體;
}
在瀏覽器中演示效果：
注意，在使用 font 屬性時，font-size 和 font-family 的值是必需的，如果沒有設置這兩個屬性值，則不會生效。
本節學習的幾個屬性值都是 CSS 中最基本的屬性，特別是 font-size 屬性，我們會經常用到。一般瀏覽器會有一個默認的字體大小，例如 16px，而編寫頁面時如果我們希望大部分頁面內容正文字體大小為 12px 或 14px，就會在 <body> 標簽上設置，這樣就不用一個個標簽去設置。
background-color 屬性為元素定義了背景顏色：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
HTML樣式：好看的顏色字體是有方法的
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
