CSS字型和文字樣式設定筆記
CSS字型和文字樣式設定
1.字型型別（風格） font-style
用於設定字型型別，可設定以下值：
① normal：普通字型
② italic：斜體
③ oblique：傾斜字型
2.字型粗細 font-weight
用於設定字型粗細，可設定以下值：
① normal：正常粗細
② bold：粗體
③ bolder：更粗的字型
④ lighter：更細的字型
⑤ 100~900：步長為100，
400 等同於 normal，而 700 等同於 bold
3.字型大小 font-size
用於設定字型大小的，可設定任意正整數和浮點數,預設情況下，幾乎所有的瀏覽器的預設字型大小都為16px。
擴充套件
常用單位有三種:px ,em , rem
① px（畫素，相對於顯示器螢幕解析度而言）
② em（相對當前元素內文字的字型尺寸，會繼承父元素大小）
③ rem （相對HTML根元素，最常 用的單位）
如果以em為單位時，當前設定的元素繼承的大小小於12px時，瀏覽器（谷歌、360等）接收的最小值為12px,會被強行變為為12px,大於12px，一切正常。如果直接設定px,就可以設定小於12px的值。
4.字體系列 font-family
1.使用中文字型，或帶空格的英文字型名，需要用“引號”將該字型名擴起來；
2.單個單詞的字型名稱則無需加上引號。
3.“font-family”可以有多個值，多個值設定的作用是，當瀏覽使用者本地計算機沒有找到設定的第一個值所表示的字型時，會去找第二個，以此類推，若找到最後一個值都沒有找到匹配的字型，瀏覽器則會用自己的預設字型。
4.考慮到網頁最終顯示效果在不同裝置上的一致性，我們通常使用的中文字型只有：“宋體”、“微軟雅黑”、“黑體”、“楷體”、“幼圓”等，而目前以“微軟雅黑”為最常用設計字型。
5.常用的英文字型有：“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。
html程式碼： <body> <div>字型樣式設定</div> <p>今天天氣真好</p> </body>
CSS程式碼：
<style>
div{
font-size: 32px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
}
p{
font-weight: bold;
font-size: 2rem;
}
</style>
組合值寫法
程式碼：
#e{
font:normal bold 48px "微軟雅黑";
}
省略字型型別或字型風格之一
1.由於字型型別（風格）和字型粗細，具有一定的相似性，如他們都有一個“normal”值，
2.所以在寫“font”屬性組合值的時候可以省略二者之一，以辨識到的值進行設定，另外一個自動為“normal”，
3.甚至還能省略掉第前兩個值，只保留“font-size”和“font-family”
4.在font內設定文字行高:“font”屬性組合值的寫法，除了以上所提到的，它還有一種比較不常見，卻還比較實用的寫法，即可直接在“font”屬性內設定文字的行高“line-height”。
程式碼：
.e{
font:normal bold 48px/100px "微軟雅黑";
}
line-height可設定```<span>和<button>等行內標籤的行高
注意：
在“font”組合值的寫法中，只有“font-size”和“font-family”這兩個的值是不能省略的，而且是缺一不可，否則瀏覽器會不認識該值，對該組合值進行報錯。
font-style和font-weight可以省略，font-size和font-family不可以省略和位置替換。
CSS文字樣式設定
1. 文字的顏色 “color”
文字的居中方式“text-align”
該屬性用於控制“行內塊元素”或“塊元素”內“行內元素”（文字元素）的居中方式的，包含三個值：
塊級元素元素文字居中：1、轉化為行塊級設定text-align，前提是設定寬度，且要大於自身的寬度，不然就佔滿空間了（塊級元素佔正行)。
2、設定margin:auto。
left（預設）文字左對齊
center文字居中對齊
right文字右對齊