CSS設置字體大小、字體粗細、字體風格

font-size:設置字體大小:

該屬性值的單位可以使用相對單位和絕對單位，推薦使用px。(瀏覽器能夠識別的最小像素是12px)

    p{
      font-size:20px;
    }

常見尺寸單位：

font-family:設置字體:

如果需要設置多個字體樣式，則屬性值可以寫多個中間用逗號隔開即可，需要知道的是瀏覽器會從第一個字體屬性值找，直到找到自己設備有的字體顯示，自己設備沒有的字體，按設備默認字體顯示,推薦系統默認字體。


    p{
      font-family:"微軟雅黑",Arial;
    }

font-weight:設置字體粗細:

其屬性值有：normal正常不加粗、bold加粗、bolder更粗、lighter更細、number（整百的數字）、inherit繼承父級元素字體粗細

p {
  font-weight:700;
}

font-style:設置字體風格:

如設置斜體、傾斜或正常字體，其屬性值：normal默認值，標準字體、italic斜體、oblique傾斜

font:綜合設置字體樣式（字體樣式連寫）:

字體樣式連寫是有順序的，必須是嚴格遵循順序，其中不需要設置的屬性可以省略，font-size和font-family屬性值必須寫，否則字體連寫失效。


    p{
      /*font:font-style font-weight font-size/line-height font-family;*/
      font:italic bolder 20px/10px Arial;
    }

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

ont 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫，或將元素的字體設置為系統字體。

字體修改

font-family 屬性：設置HTML頁面中的字體
font-size 屬性：設置字體大小
font-weight 屬性：設置字體的粗細程度
font-style 屬性：設置指定字體樣式

font-family寫法示例：

 <style>
         p{
             font-family: "幼圓";
         }
     </style>
 </head>
 <body>
     <p>19級啟嘉班</p>
 </body>

效果：

、CSS字體樣式

定義字體系列，大小，粗細和文字樣式

（一）字體系列（font-family）

（二）字體大小（font-size）

（三）字體粗細（font-weight）

（四）字體樣式（font-style）

（五）字體復合屬性（font）

 p {
    font: font-style font-weight font-size/line-height font-family;
  }

不能更換順序，必須保留font-size和font-family

二、CSS文本屬性

定義文本外觀，如：文本顏色，對齊文本，裝飾文本，文本縮進，行間距等

（一）文本顏色（color）

（二）對齊文本（text-align）

(三）裝飾文本（text-decoration）

（四）文本縮進（text-indent）

（五）行間距（line-height）

三、格式化代碼

Emmet語法
前身為Zen coding,它使用縮寫來提高html/css的編寫速度，VSCode內部已經集成該語法，快速生成HTML結構語法和CSS樣式語法

2. 快速生成HTML結構語法

生成標簽，直接輸入標簽按Tab鍵即可
生成多個相同的標簽，標簽加星號*鍵按Tab鍵
父子級關系的標簽，可以用大于號>和enter鍵
兄弟關系的標簽，可以用加號+和enter鍵
生成帶有類名或id名字，可寫成標簽加.類名/#名加Tab鍵（p.one生成
）
生成.div類名是有順序的，可用自增符號￥
生成標簽的內部寫內容，可用{}表示

3.快速生成CSS樣式語法

CSS基本采取簡寫形式即可（w 200 加Tab生成width: 200px;）
單詞首字母加Tab鍵

4.快速格式化代碼

Shift+Alt+F/右鍵-格式化代碼
保存頁面時自動格式化代碼（在設置中的文本編輯器中找到格式，勾選Format On Save即可，也可把Format On Type勾選上）

5.去掉li前面的項目符號

在線咨詢

上一篇：推薦幾個個人精美網站響應式html5網站模板
下一篇：網頁開發中的提示詞

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商