文字是網頁展示的重要內容之一，所以對文字的修飾也是CSS重點關注的一部分， CSS提供了以下常用的樣式屬性來修飾文字。
color 屬性
color 用來設定文字顏色。
設定方式支援以下幾種格式
- 英文顏色單字形式，如: red（紅）、black（黑）、orange（橘色）等。
<style> .box { color: red; }</style><div class="box">文字顏色</ div>- 十六進位表示法， 設計軟體中通用的表示方法。
- 例如：ff00000; ff 即為十進位255 ；每種顏色分成0~255的數字。
- 如果表示顏色值重複例如：#ffaabb可以簡寫為#fab.。
- 黑色為#000 ，白色為#fff 。
- 以#ff0000為例，兩兩分組，分別表示三原色：紅、綠、藍。
<style> .box { color: #ff0000; } .box1 { color: #f00; }</style><div class="box">文字顏色</div> <div class="box1">簡寫形式</div>- RGB 表示
- 例如: color: rgb(255,0,0); rgb 內部的三個值，依序代表三原色紅、綠、藍。
- 其中rgb(0,0,0)代表黑色， rgb(255,255,255) 表示白色。
<style> .box { color: rgb(255, 0, 0); }</style><div class="box">文字顏色</div>- RGBA 表示法， 在RGB的表示方法的基礎上增加了透明度（最後一個參數代表透明度）。 0-表示透明 1-表示實心。透明度是介於[0,1]之間的值。
- RGBA 從 IE9開始相容。
<style>.box { color: rgba(255, 0, 0, 0.5);}</style><div class=" box">文字顏色</div>font-size 屬性
font-size 屬性用來設定字體大小，單位通常為px 也可以為em,rem
單位的解釋
- px：像素
- em: 相對元素字體的倍數
- rem：相對html字體的倍數， 例如：html標籤設定為font-size為100px ， div 設定font-size為1.5 rem 實際表現為：150px。
<style> .box { font-size: 30px; }</style><div class="box">文字大小< ;/div>font-weight 屬性
設定字體的粗細程度，常用的屬性有normal 和bold 兩個值。
可以用下列數值表示，也可以用數字表示。
值 | 意義 |
normal | 正常粗細，和400值相等 |
bold | 加粗，與700數值相等 |
lighter | 比 正常粗細還細， 不常用 |
bolder | 比 加粗還粗，不常用 |
100 200 300 400 500 600 700 800 900 | 使用數字定義字體粗細 |
inherit | 從父元素繼承字體粗細 |
<style>.box_normal { font-weight: normal;}.box_bold { font-weight: bold;}.box_lighter { font-weight: lighter;}.box_bolder { font-weight: bolder;} .box_number { font-weight: 600;}</style><body> <div class="box_normal">font-weight示範：正常粗細</div> <div class="box_bold"> ;font-weight演示，加粗</div> <div class="box_lighter">font-weight演示，更細</div> <div class="box_bolder">font-weight演示，更粗</div> <div class="box_number">font-weight演示，數字</div></body>font-style 屬性
設定字體的傾斜程度
值 | 意義 |
normal | 正常字體， 不含傾斜效果 |
italic | 傾斜字體（常用，使用傾斜字體） |
oblique | 傾斜字體（用常規字體模擬傾斜，不常用） |
<style> .box1 { font-style: normal; } .box2 { font-style: italic; } .box3 { font-style: oblique; }</style><body> < ;div class="box1">正常字體</div> <div class="box2">傾斜字體</div> <div class="box3">傾斜字體2</div> </body>text-decoration 屬性
設定文字的修飾線的樣式
範例 | 意義 |
none | 無線(a標籤移除底線會用到) |
underline; | 下劃線 |
line-through; | 刪除線 |
…等等 | 還有很多，可自行百度 |
<style> .decoration-none { text-decoration: none; } .decoration-underline { text-decoration: underline; } .decoration-line-through { text-decoration: line-through; } </style><body> <div class="decoration-none">無線修飾</div> <div class="decoration-underline">下劃線</div> <div class ="decoration-line-through">刪除線</div></body>font-family 屬性
指定使用的字體族，作業系統一般自帶很多字體；
例如：window作業系統中的 ‘微軟雅黑’ ，黑體等。
字型檔的格式很多，像是eot,woff2,woff,ttf,svg等。
font-family 可以一次指定多個字體， 後面的字體屬於後備字體，只有前面的字體沒有找到，才會使用後面的字體。
<style> div { "Time New Roman", "微軟雅黑" }</style><body> <div>字體</div></body>自訂字型
某些時候，我們的字體比較個性化，或者我們的字體是一個圖示字體（一種以符號表示圖片的方式）。那麼此時，需要我們使用 @font-face 自訂字體
自訂的字型一般是隨著網頁發佈在伺服器端，作業系統中並沒有。
推薦一個比較好用的字型庫網站：https://www.iconfont .cn/（具體使用方式請自行百度）。
// 下載字型位址: https://www.iconfont.cn/ 並複製到專案中的某個資料夾下// 使用@font-face 定義字型// 使用"引用字型"< ;style> div { "站酷高端黑Regular" } /* CDN 服務僅供平台體驗和調試使用，平台不承諾服務的穩定性，企業客戶需下載字體包自行發布使用並做好備份。 */ @font-face { "站酷高端黑Regular"; font-weight: 400; src: url("font/DrRgEiqsUPAuu85aZrGPH.woff2") format("woff2"), url("font/DrRgEiqsUPAAuu85aZuuoff2"), url("font/DrRgEiqsUPAAuu85aZuu. format("woff"); font-display: swap; }</style>文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/CSS-ji-chu-wen-zi-yang-shi.html
支付宝扫一扫 
评论列表（196条）
测试