CSS高级技巧（提高现有基础水平）

最新推荐文章于 2023-12-05 22:40:30 发布

相信光的奥特王小懒

最新推荐文章于 2023-12-05 22:40:30 发布

阅读量135

点赞数

文章标签： css css3 svg html

本文链接：https://blog.csdn.net/weixin_51415327/article/details/119840583

版权

在这里插入图片描述

1. 精灵图（缺点明显，故出现字体图标）

在这里插入图片描述

<!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>
        .box1 {
            width: 60px;
            height: 60px;   
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat   -182px 0;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

2. 字体图标

主要用于显示网页通用、常用的一些小图标。 在这里插入图片描述
有优点有缺点

网址是：https://icomoon.io

2.2 重点（字体文件的使用步骤以及注意事项）

在这里插入图片描述
页面在哪里fonts文件夹就放在哪里

四种字体格式的原因是因为兼容性
在这里插入图片描述

在demo.html中复制上图的小边框

完整体验代码为：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>字体图标的使用</title>
  <style>
    /* 字体声明 */
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  span {
    font-family: 'icomoon';
    font-size: 100px;
    color:pink;
  }
  </style>
</head>

<body>
    <span></span>
    <span></span>
</body>

</html>