浅谈雪碧图和字体图标

2017-11-13 本文已影响251人地主是我爸

起因

现在是前端技术的大时代。若干年过去之后，也许我们会感慨很多，当年阿当的一篇博文多么的犀利。vue和angular的闹剧。最近临危受命，要做几天的前端开发。说是前端开发，其实就是写html+css+JavaScript,真的，当你面对庞大的前端技术体系无所适从的时候,用最简单的技术来一场放松吧。

这一次开发，没有什么特别的，就是我在小图标展示的时候。在雪碧图和图标字体中徘徊了很久。于是，简单研究了一下，就当立一个flag,日后在深究一下。

雪碧图

除了叫雪碧图外，它还有很多名字，css sprite, css 精灵等。原理就是将一些小图标合并到一张图片上，然后用css的背景定位来显示需要显示的部分。

工具：

sprite-generator

栗子:

图片

image

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css sprite</title>
    <style>
        .bg{
            background: url("css_sprites .png");
        }
        .bg-9 {
            width: 262px; height: 156px;
            background-position: -10px -10px;
        }

        .bg-10 {
            width: 246px; height: 150px;
            background-position: -292px -10px;
        }
    </style>
</head>
<body>
    <div class="bg bg-9"></div>
    <div class="bg bg-10"></div>
</body>
</html>

效果