CSS之字体相关内容

最新推荐文章于 2023-05-16 16:33:54 发布

yanruo06280

最新推荐文章于 2023-05-16 16:33:54 发布

阅读量171

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_36594235/article/details/123977739

版权

1、与字体相关的样式

1.1 设置字体的颜色：color

1.2 设置字体大小：font-size

1.3 设置字体的格式（如微软雅黑）font-family：可以同时指定多个字体，多个字体用逗号隔开，字体优先前面生效

font-family的可选值：

serif：衬线字体

sans-serif：非衬线字体

monospace：等宽字体,字母的宽度保持一致

        p{  
            /*设置字体颜色*/
            color:red;
            /*设置字体大小*/
            font-size: 40pt;
            /*设置字体族*/
            font-family: '华文彩云','Courier New', Courier, monospace;
        }

2、服务器字体

2.1 将服务器中的字体提供给用户使用:@font-face:

       @font-face {
            /*指定字体名字，自己取的名字，给用户用*/
            font-family: 'myfont';
            /*服务器中字体的路径*/
            src: url('./字体');
        }

3、图标字体初使用

在某些网页中经常需要使用一些图标（如搜索的小放大镜等），可以通过图片来引入图标，但是使用图片会有存储比较大，且不灵活的缺点，因此可以使用将图标设置为字体，通过font-face形式对字体进行引用

通过类名使用图标

一般情况下： class='fas 需要使用的图标'或者class='fab 需要使用的图标'

    <i class="fas fa-bell" style="font-size: 100px;color: red;"></i>
    <i class="fab fa-bell" style="font-size: 50px;color: green;"></i>

4、图标字体其他使用

4.1 使用伪元素设置图标字体：

找到要设置图标的元素，通过before或after选中

在content中设置编码

设置字体的样式

<!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>
    <link rel="stylesheet" href="./fontasome/css/all.css">
    <style>
        li{
            list-style: none;
        }
    /*找到要设置图标的元素，通过before或after选中*/
        li::before{
            /*在content中设置编码*/
            content: "\f005";
            font-family: "Font Awesome 6 Free";
        }
    </style>
</head>
<body>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
    </ul>
</body>
</html>

4.2 使用实体来使用图标字体

使用方法：&x图标的编码

yanruo06280

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之字体相关内容

1、与字体相关的样式1.1 设置字体的颜色：color1.2 设置字体大小：font-size1.3 设置字体的格式（如微软雅黑）font-family：可以同时指定多个字体，多个字体用逗号隔开，字体优先前面生效font-family的可选值：serif：衬线字体sans-serif：非衬线字体monospace：等宽字体,字母的宽度保持一致 p{ /*设置字体颜色*/...
复制链接

扫一扫