字体相关属性

最新推荐文章于 2024-08-13 20:57:25 发布

满天星的开始！

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量133

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_56233059/article/details/123245115

版权

本文详细介绍了前端开发中的字体样式设置，包括color、font-size、font-family等属性的使用，以及图标字体的引入和应用。重点讲解了如何通过font-awesome库来使用图标字体，包括下载、引入和修改图标样式的方法。此外，还展示了如何利用伪元素将图标字体设置为列表前标，以及注意事项。

摘要由CSDN通过智能技术生成

1、字体相关样式

color 用来设置字体颜色
font-size 字体的大小
font-size相关单位：

em 相当于当前元素的一倍font-size
rem 相当于根元素的一倍font-size

font-family字体族
（可以同时指定多个字体，多个字体间使用逗号分开。字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace等宽字体

  <style>
        p{
            font-family: 微软雅黑;
            font-size: 18px;
            color: pink;
        }
    </style>
</head>
<body>
    <p>那个男生真帅气！</p>
</body>
</html>

在这里插入图片描述

2、图标字体

图标字体（iconfont）
-在网页中经常需要使用一些图标，可以通过图片来引入
但是图片大小本身比较大，并且非常的不灵活
-所以在使用图标的时候我们可以直接设置为字体
然后通过font-face的形式来对字体进行引入
-这样我们就可以通过使用字体形式来使用图标

    fontawesome 使用步骤：
        1、在浏览器中搜索下载
        2、解压至电脑
        3、将其中的css和webawesome 移动到项目中
        4、将all.css引入到网页中
        5、使用图标字体（直接通过类名来使用图标字体，
        可在zeal文档中找到自己需要的图标字体进行引用）

使用i属性来引用图标字体:

  <i class="fas fa-bell"></i>
     <i class="fas fa-bell-slash"></i>

在这里插入图片描述

在all.css里面有多种图标字体但是只有fas和fab是免费的，所以在使用的时候需要注意。
若想改变图标字体的样式。可以通过style来显示

<i class="fas fa-bell" style="font-size: 30px;color: pink;"></i>
     <i class="fas fa-bell-slash" style="font-size: 3em; color: aquamarine;"></i>

在这里插入图片描述

2、1 图标字体的其他用法

通过伪元素将其设置为前标，例如：

   <link rel="stylesheet" href="./css/all.css">
    <style>
       li {
           list-style: none; 
        }
        li::before{
            content: '\f717';
            /*content 里面写的是图标的编号，可以在zeal离线文档里面查找到相关的知识*/
            /* font-family: 'Font Awesome 5 Free'; */
            
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;

        }
    </style>
</head>
<body>
    <ul>
        <li>姓名</li>
        <li>年龄</li>
        <li>爱好</li>
        <li>性别</li>
        <li>学号</li>
    </ul>
</body>

在这里插入图片描述

注意：当要使用的标签市fab里面的就要使用font-family: 'Font Awesome 5 Free';来表示，否则图标不出现。同理当使用的是fas里面的图标时，则需使用 font-family: 'Font Awesome 5 Free'; font-weight: 900;当自己不知道是哪个时就可以两个都试一下，这些可以在all.css里面查找。

在这里插入图片描述