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小时内与您取得联系。

整合营销服务商