当前位置：首页 > news >正文

【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

news 2025/6/6 9:45:37

文章目录

一、 CSS 2.0手册使用
- 1、按照文档层次查找
- 2、搜索关键字查找文档
二、 font-weight 字体粗细设置
- 1、语法简介
- 2、代码示例
三、 font-style 字体斜体设置
- 1、语法简介
- 2、代码示例
四、 font 字体样式综合写法
- 1、语法简介
- 2、代码示例
- - ① 不使用综合字体样式的代码
  - ② 使用综合字体样式的代码
  - ③ 执行效果

一、 CSS 2.0手册使用

1、按照文档层次查找

CSS 的使用方法可在 CSS 2.0 手册中查询 ;

在这里插入图片描述
这里以查询 font-weight 字体粗细设置为例 , 在文档左侧的 " 属性 | 字体 | font-weight " 中 , 可以找到该文档 ;

在右侧的语法和参数中 , 详细的说明了属性的作用 , 以及属性值如何设置 ;

在这里插入图片描述

2、搜索关键字查找文档

此外 , 还可以在 CSS 2.0 手册的搜索栏 , 搜索该属性 ;

在这里插入图片描述

二、 font-weight 字体粗细设置

1、语法简介

在 HTML 中可以使用

b
strong ( 推荐使用 )

标签 , 实现文本粗体显示 ;

如果使用标签粗体显示 , 则可以使用 CSS 设置其不加粗 ;

在 CSS 中 , 可使用 font-weight 设置字体粗细 ;

font-weight 属性值设置 :

normal : 默认不加粗样式 ;
bold : 粗体 ;
1000 ~ 900 之间的数值 : 推荐使用数字进行粗体设置 ;
- 400 是默认的 normal 样式 ,
- 700 是 bold 粗体样式 ;

在这里插入图片描述

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font-size:16px; font-family:"宋体";<!--font-weight:normal;-->font-weight:400;}.tittle {font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";<!--font-weight:bold;-->font-weight:700;}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

运行效果 :

在这里插入图片描述

三、 font-style 字体斜体设置

1、语法简介

在 HTML 中可以使用

i
em ( 推荐使用 )

标签 , 实现文本斜体显示 ;

如果使用标签斜体显示 , 则可以使用 CSS 设置其不倾斜 ;

在 CSS 中 , 可使用 font-style 设置字体粗细 ;

body {font-style:italic;
}

font-style 属性值设置 :

normal : 默认没有斜体的样式 ;
italic : 斜体 ;

在这里插入图片描述

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font-size:16px; font-family:"宋体";<!--font-weight:normal;-->font-weight:400;font-style:italic;}.tittle {font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";<!--font-weight:bold;-->font-weight:700;}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

显示效果 :

在这里插入图片描述

四、 font 字体样式综合写法

1、语法简介

font 字体样式综合写法语法 :

选择器 { font:font-style font-weight font-size/line-height font-family;}

上述字体样式的顺序 , 不能打乱 , 必须严格遵守 ;

字体样式属性值之间 , 使用空格隔开 ;

font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;

2、代码示例

① 不使用综合字体样式的代码

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font-size:16px; font-family:"宋体";<!--font-weight:normal;-->font-weight:400;font-style:italic;}.tittle {font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei";<!--font-weight:bold;-->font-weight:700;font-style:italic;}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

② 使用综合字体样式的代码

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>body {font: italic 400 16px "宋体"}.tittle {font: italic 700 20px "黑体"}</style></head><body><p class="tittle">静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>