页面上一些小icon的制做方法及技术选择

时间 2019-11-16

标签页面上一些小 icon 制做方法技术选择繁體版

原文原文链接

咱们常常切片的时候，看到一些小图标,都有些心头小烦。固然咱们通常为了兼容多款浏览器。选择保守的切图拼成雪碧图。而后经过background-position去定位到你想要用的图标.css

随着咱们一步步摒弃兼容性差的浏览器。咱们也能够经过不一样的技术手段去实现小图标。接下来。我将总结我曾用过的各类方法。实现页面小图标的方法html

1. 切下小图标而后拼成位置合理的雪碧图；前端

经过background-position样式来定位到你想要用的方法。这是最经常使用的方法；css3

劣势：当初在wap版运用该方法时遇到了问题。每一个小图标呈如今页面上老是有部分其余图标卡在页面上。以下图web

这是chrome浏览器开发工具所呈现的效果，不细看是看不出来的。但只在iphone4下观看，会发现图标严重没对齐。chrome

思考方向：我认真排查html及css的问题。最后我本身从新写demo,运用淘宝的移动端运用的技术flexible.js，获得解决。后端

总结：之因此形成这种缘由，是由于咱们的页面模板中设置根字体的大小精度不够，对于紧凑的背景图定位就会放大这个问题。浏览器

固然临时解决方案，就暂时就全部小图标拆开来引用。前端工程师

优点：这种背景图定位方法，在web端运用是很是好的。页面加载，只须要下载一张背景图片就好。对优化页面加载性能是很好的。iphone

2. 经过html+css实现一些图标

当咱们拿到以下图的设计稿：

对于右边的大于符号图标,咱们真心懒得切图。固然咱们的确能够经过 html+css来实现

html:
<span>></span>

css:
span{
    font-size:20px;
    font-family: "宋体"；      
}

　实现效果仍是挺好的：

分析：这种方案在web端是可实现的，可是移动端是没法实现，手机版本太多了，浏览器种类也太多。估计每款手机都不太能渲染出咱们要的宋体。

总结：根据自身项目的开发平台和需求，咱们能够选择这种方法制做图标

3.css3属性实现

咱们依旧参照上图设计稿制做出一个箭头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>narrow</title>
</head>
<style>
    div{
        width: 50px;
        height: 50px;
        border:1px solid #fff;
        border-right:1px solid #333;
        border-bottom:1px solid #333;
        transform:rotateZ(-45deg);
        margin-top:50px;
    }
</style>
<body>
    <div></div>
</body>
</html>

实现效果：

总结：一看就知道。ie8及如下浏览器是不能支持css3属性的。这个运用仍是要看需求方对浏览器的要求了

4. 插入特殊字符实现图标

仍是参照以上的设计稿--制做箭头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>narrow</title>
</head>
<style>
    body{
        background: pink
    }
    div.narrow{
        width: 50px;
        height: 50px;
        border:1px solid transparent;
        border-right:1px solid #333;
        border-bottom:1px solid #333;
        transform:rotateZ(-45deg);
        margin-top:50px;
    }
    .box{
        position: relative;
        width:200px;
        height: 200px;
    }
    .box div{
        font-size:100px;
        position: absolute;
        left:0;
        top:0;
    }
    .box div.black{
        left:2px;
        top:0;
        z-index: 8
    }
    .box div.white{
        z-index: 9
    }
</style>
<body>
    <div class="narrow"></div>
    <div class="box">
        <div class="white">◆</div>
        <div class="black">◇</div>
    </div>
</body>
</html>

实现效果：

图上标题4就是经过特殊字符实现的。

总结：一直以为前端工做相比后端开发，老是多了不少想象力。每一个人写出来的页面老是有本身的特点。可能这就是我为何成为前端工程师并一直坚持下去的魅力所在吧

5.icon-font实现页面图标，不用加载一张图片。

待续：....................