【Web前端学习笔记】-CSS3-字体属性(font)

Megan_Feng

已于 2023-04-27 13:31:28 修改

阅读量774

点赞数 1

分类专栏： Web前端学习笔记文章标签： css

于 2023-04-21 11:26:18 首次发布

本文链接：https://blog.csdn.net/weixin_46681936/article/details/130253309

版权

Web前端学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 学习内容概述

学习了CSS3中有关字体属性的五大知识点，包括：
- 颜色 color
- 字号 font-size
- 粗细 font-weight
- 样式 font-style
- 字体类型 font-family

2. 字体属性知识点

2.1. 颜色 color

颜色主要有四种表示方式，即：名称（如red），十六进制（如#ff0000），RGB，RGBA（A代表透明度）。示例如下：

p{color: red;}
p{color: #ff0000;}
p{color: rgb(255,0,0);}
p{color: rgba(255,0,0,0.3);}

2.2. 字号 font-size

p{font-size: 40px;}

❗ 注意：chrome浏览器中支持的最小字号为12px

2.3. 粗细 font-weight

CSS中的粗细有两种表示方法，一种是粗细的名称（如normal, bold, bolder, lighter），另一种是数字（100-900）。其中normal=400，bold=700。

粗细名称	对应效果
normal	常规
bold	较粗
bolder	特粗（比bold还粗）
lighter	较细

示例如下：

p{font-size: bold;}
p{font-size: 300;}

2.4. 样式 font-style

如斜体：

p{font-style: italic;}

2.5. 字体类型 font-family

字体类型就是如宋体、微软雅黑、Arial、Times New Roman等。

p{font-family: "Microsoft YaHei";}

CSS中可以设置多种不同的字体，字体类型间用逗号隔开。示例如下：

p{font-size: "Arial", "Microsoft YaHei", "Times New Roman", "Simsun";}

以上示例代表的意思是：优先使用Arial字体；若用户电脑未安装Arial，则使用Microsoft YaHei（微软雅黑）；若未安装Microsoft YaHei（微软雅黑），则使用Times New Roman……以此类推。值得注意的是，这样做也能实现中英文的不同字体显示。由于Arial无法显示中文字体，就会调用Microsoft YaHei（微软雅黑）来显示，因此就呈现出中英文字体不同的、较为美观的效果。

3. 写一段完整的代码跑跑试试

运用以上知识，同时搭配使用了内部样式、元素选择器、类选择器、合并选择器等知识点。

head标签下：

    <style>
        /* 在style标签下用**内部样式**定义整个文档的样式 */
        h1{
            color: black;
            font-size: 40px;
            font-weight: Bolder;
            font-style: italic;
            font-family: "Arial","Microsoft YaHei";
        }
        h2{
            color: blue;
            font-size: 50px;
            font-weight: 900;
            font-family: "Arial","Microsoft YaHei";
        }
        p{
            color:blueviolet;
            font-size: 30px;
            font-weight: bold;
            font-family: 'Times New Roman',"Simsun";
        }
        ol,ul{
            color:black;
            font-size: 25px;
            font-weight: normal;
            font-family: 'Times New Roman',"Simsun";
        }
        ol{
            font-weight: 800;
        }
    </style>

body标签下：

<body>
    
    <!-- 注释快捷键：Ctrl+/ -->
    <h1>2023年4月19日  星期三</h1>
    <h2>CSS5——字体属性</h2>
    <p>今天学习了字体属性。CSS5中的字体属性设置主要包括5种：</p>
    <ol>
        <li>字号  font-size
            <ul>
                <li>chrome接受的最小字号为12px</li>
            </ul>
        </li>

        <li>颜色  color
            <ul>四种表示方式
                <li>颜色名称，如red</li>
                <li>十六进制，如#ff0000</li>
                <li>RGB，如rgb(255,0,0)</li>
                <li>RGBA，如rgba(255,0,0,.5)，其中A为透明度</li>                
            </ul>
        </li>

        <li>粗细  font-weight
            <ul>主要四种
                <li>bold</li>
                <li>bolder</li>
                <li>lighter</li>
                <li>数字，范围100~900，其中normal为400，bold为700</li>
            </ul>
        </li>

        <li>样式（如斜体）  font-style
            <br>斜体：italic
        </li>

        <li>字体类型（如宋体）  font-family
            <ul>
                <li>每个值用“，”隔开</li>
                <li>若字体名称含空格，必须加引号！</li>
            </ul>
        </li>
    </ol>

</body>
</html>

Megan_Feng

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【Web前端学习笔记】-CSS3-字体属性(font)

学习了CSS3中有关字体属性的五大知识点，包括：颜色 color字号 font-size粗细 font-weight样式 font-style字体类型 font-family。
复制链接

扫一扫