font字型的樣式設定
阿新 • • 發佈：2022-04-14
2022年4月14日19：45分
在學習HTML中看了一眼自己的部落格，發現自己又變得十分頹廢，整理一下這個學期學的內容
1、字型font標記
font-size:20px/50%/larger 設定字號
font-family:'宋體'/‘黑體’ 設定字型（多個字型可以用','進行分割，從第一個字型開始找，如果找不到就使用預設字型，要注意如果字型名出現了空格要用""來括起來）
font-style:italic/oblique/inherit 設定字型風格（斜體，italic是用該字型下的斜體來顯示，oblique可以讓該字型變成斜體顯示）
font-weight:lighter/bold/border 設定字型加粗
font-variant:small-caps 設定小型大寫字型（將小寫字母轉為大寫字母，並將轉換後的字母字號縮小）
line-height:0.5/1/2/20px/20%(%是在原本的基礎上) 設定字型行間距
.size{ font-size: 50px; } .size\%{ font-size: 150%; } .family{ font-family: '宋體'; } .family1{ font-family: '黑體'; } .weight{ font-weight: lighter; } .weight1{ font-weight: bold; } .weight2{ font-weight: border; } .variant{ font-variant: small-caps; } .style{ font-style: italic; } .style1{ font-style: oblique; } .style2{ font-style:inherit; } .height{ line-height: 20px; }
<!DOCTYPE html> <html> <head> <title>CSS樣式屬性</title> <link rel="stylesheet" type="text/css" href="./web02css/web3.css"> </head> <body> <div class="size">設定字號50px</div><br> <div class="size%">設定字號150%</div><br> <div class="family">設定字型宋體</div><br> <div class="family1">設定字型黑體</div><br> <div class="weight">字型樣式(粗細) lighter</div><br> <div class="weight1">字型樣式(粗細) bold</div><br> <div class="weight2">字型樣式(粗細) border</div><br> <div class="style">字型風格 italic</div> <div class="style1">字型風格 oblique</div> <div class="style2">字型風格 inherit(從父類繼承的)</div><br> <p>AAAAAAAAA</p> <div class="height">行間距20px</div> <p>BBBBBBBBBB</p> <div class="variant">設定小型大寫字型（就是將小寫的字母變為大寫並且將原本的大寫字號變小）例如：<br>原本大寫LLLL 小型大寫字型lllllllllllll</div><br> </body> </html>