雪碧图

文字描边：

1. -webkit-text-stroke-color: rgb(144 126 78);
2.  -webkit-text-stroke-width:1px、

缺点是只有chrome可以

可以多设置一层

1. text-shadow: rgb(144 126 78) 2px 0 0, rgb(144 126 78) 0 2px 0, rgb(144 126 78) -2px 0 0, rgb(144 126 78) 0 -2px 0;

雪碧图为什么快：

CSS Sprite最大的好处就是节省请求数了，那么为什么节省请求数能快呢？每一次发出一个图片的http请求，除了单纯的下载该图片外，还要算进发送请求的时间，服务器端处理请求的时间和来回的网络延时（这个一般是大头），我们把这些额外耗时叫做request overhead。所以实际情况下，尤其是对于图标这样的小图片，这些overhead很可能远远超过超过文件本身下载的时间，比如下载1kb的图片只要30ms，但光网络延时就等待了100ms。把它们做进一张sprite sheet节省的主要就是这些额外耗时。

链接：https://www.zhihu.com/question/20647576/answer/15746294

【服务器端处理请求的时间和来回的网络延时（这个一般是大头），我们把这些额外耗时叫做request overhead。】

使用

1、github的包，利用wepack生成

包名 webpack-spritesmith 

var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: 'src/sprite-images',
                glob: '*.png'
            },
            target: {
                image: 'public/images/sprite.png',
                css: 'public/styles/sprite.css'
            },
            apiOptions: {
                cssImageRef: "../images/sprite.png"
            }
        })
    ]
}

参考

http://tongxu.tech/2018/09/29/Tool-%E7%94%9F%E6%88%90%E9%9B%AA%E7%A2%A7%E5%9B%BE%EF%BC%88sprite%EF%BC%89/

 

2、 压缩工具，20MB=>2MB

https://imagecompressor.com/zh/ Z这个地址，后续可以压成jpg

 

1 https://juejin.cn/post/6844903925611495437#heading-1

2 https://juejin.cn/post/6844903925473083400#heading-0 这两个是介绍链接

 

3、可以用第一条的链接 create-sprite-tool

然后 npm run sprite 就可以了

 然后把图片压缩一下，顺理成章变成.min

把css替换一下

background-position: 0px 0px;

不然有白框

之前这样有问题

background-image: url(../images/sprite.png);
background-position: -125px 0px;