1. 程式人生 > >HTML5、CSS中字型的各類屬性值

HTML5、CSS中字型的各類屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            /*前面是字型族名稱  最後一個是類族名稱
            瀏覽器在顯示字型的時候,依次判斷是否支援當前的字型,知道最後的字體系列*/
font-family: "仿宋","宋體",sans-serif;
            /*bold加粗  bolder深度加粗  lighter細體(100-900*/
font-weight: bold
; /*font-size字型大小 取值:1、具體的px 2、百分比(預設字型大小16px*/ font-size: 150%; /*font-style字型斜體*/ font-style: italic; color: red; /*opacity 透明度(0是全透明)*/ opacity: 1;
            font-size: 30px;
            /*line-height行高:單行字型佔用的高度*/
line-height
: 45px; /*justify 兩端對齊 left=start:左對齊(預設) right=end:右對齊 ceenter: 居中對齊*/ text-align:justify; /*letter-spacing:控制字元間距(px normal*/ letter-spacing: normal; /*文字修飾 下劃線underline 中劃線line-through 上劃線over*/ text-decoration: none; /*三者配合使用:不換行,以...的形式顯示 (
三個屬性配合使用實現單行超出文字隱藏)*/ /*overflow: hidden; !*處理超出顯示屏的內容隱藏*! white-space: nowrap; !*不換行*! text-overflow: ellipsis; !*擷取還是以...的方式顯示*!*/ /*文字陰影顏色 x方向的偏移 y方向的偏移 陰影的顏色*/ text-shadow: 2px 2px #f2e78d; /*文字描邊 描邊的寬度 描邊的顏色*/ -webkit-text-stroke: 2px #ff7292; /*首行縮排*/ /*em:相對的字元單位(2倍的字型大小)*/ text-indent: 2em;
} </style> <title>字型</title></head><body><p> 的看法破什麼技能居民平均打什麼連線每年能理解來的房間裡是個美麗的方式</p></body></html>