字体样式font-style的介绍

最新推荐文章于 2024-04-06 20:41:17 发布

Q _Q

最新推荐文章于 2024-04-06 20:41:17 发布

阅读量1.1w

点赞数 12

分类专栏： CSS3 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124460514

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

字体样式font-style的介绍

1 字体样式（是否倾斜）

属性名：font-style

取值：1 默认取值：normal(正常) 2 italic(倾斜)

2 字体粗细

属性名：font-weight

取值：

1 关键字 normal(正常) bold(加粗)

2 纯数字 100~900的整百数 400(正常) 700(加粗)

注意：

1 不是所有字体都提供九种粗细，因此部分取值页面中无变化

2 实际开发中常用正常、加粗两种取值

3 字体大小

属性名：font-size

取值：数字+px

注意：

1 谷歌浏览器默认文字大小为16px

2 单位需要设置，否则无效

4 字体系列

属性名：font-family

取值：具体字体1，具体字体2...字体系列

具体字体：微软雅黑、宋体、黑体、宋体等等

字体系列：sans-serif、serf、monospace等

常见字体系列(了解)：

1 无衬线字体(sans-serif)

特点：文字笔画粗细均匀，并且首尾无装饰

使用场景：网页中大多采用无衬线字体

常见该系列字体：黑体、Arial

2 衬线字体(serif)

特点：文字笔画粗细不均匀，并且首尾有笔锋装饰

使用场景：报刊书籍中广泛应用

常见该系列字体：宋体、Times New Roman

3 等宽字体(monospace)

特点：每个字母或文字的宽度相等

使用场景：一般用于程序代码编写，有利于代码的阅读和编写

常见该系列字体：Consolas、fira code

渲染规则：

1 从左到右，如果电脑未安装该字体，则显示下一个

2 如果都不支持，电脑会根据操作系统显示默认字体

注意：

1 如果字体名称中存在多个单词，推荐使用引号包裹

2 最后一项字体系列不需要引号包裹

3 网页开发时，尽量使用常见字体，保证不同浏览器显示正常

5 字体font相关属性的连写

属性名：font

取值：顺序 style weight size family

注意：style weight可以省略，如果省略则默认取值

例题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* 字体样式 */
            font-style: italic;
            /* 字体粗细 */
            font-weight: 700;
            /* 字体大小 */
            font-size: 50px;
            /* 字体系列 */
            font-family: 黑体;
            /* 连写复合属性 */
            /* font: italic normal 100px 微软雅黑; */
        }
    </style>
<body>
    <p>这是p标签</p>
</body>
</head>

效果图：