浏览器常用的图片优化雪碧图/实体字符/svg

谁借莪１个温暖的怀抱￠ 2022-05-19 00:39 335阅读 0赞

> 雪碧图唯一的优点是减少请求数，HTTP/1.1下浏览器同时加载资源的数量是一定的，IE6个，chrome 6个，firefox 8个，而HTTP2 下是没有数量限制的

雪碧图的制作方法：node 的一个包 css-sprite ，制作方便，只要将图标做好放到对应的文件夹里，写好配置文件运行就能生成相应图片的css

### 雪碧图的缺点 ###

1.  高清屏失真
2.  不方便变化
    
    雪碧图是一张静态图片，生成的时候就注定只能用固定的方式展示，不能动态的改变他的大小、颜色

# 图标字体 icon font #

> 图标字体就是将图标做成一个字体，使用时与普通字体无异，可以设置字号大小、颜色、透明度、等等，最大的优点是它是矢量图，不会失真，可以兼容到IE6还有一个优点是文件特别小185个图标生成的ttf字体才37kb woff2 格式才19kb

### 图标字体的制作方法 ###

1.  需要准备PS和AI，在ps中打开ui图，选中图标图层(使用合并路径组件合并路径【字体只支持单路径】) —> 文件 —> 导出 —> Illustrator （生成一个AI文件）—> 用AI打开 —> File —> Scripts —> SaveDocsAsSVG
2.  使用ps CC 有个直接导出SVG的功能，在图层上右键 —> 导出来 –> 选择svg

接下来，借助第三方网站icomoon.io制作图标，进入app页面，选择导入icon，将刚刚的svg上传上去

问题处理：  
1. 生成的svg填充可能置为none

有时候遇到生成了svg，但是上传上去是空的，需要检查下svg文件，是否有fill：none，这里需要手动将none改为任意的一个色值就好了

## 图标字体的使用 ##

生成字库后每个图标都对应一个字号，使用伪类引入就好了（缺点：字体只能使用单色）

@font-face{ /* 顺序一定要正确，woff2要写在ttf前，支持woff2的就不会再加载ttf，svg格式的字体基本没什么用，没有什么浏览器支持，但是它可以用来导入到另外一个icomoon的工程，或者用来恢复工程 */ font-family:'qiphon-font', src:url('fonts/1.eot'), src:url('fonts/1.eot#iefix?20180718') format('embeded-opentype'), url('fonts/1.woff2') format('woff2'), url('fonts/1.ttf') format('truetype'), url('fonts/1.woff') format('woff'), url('fonts/1.svg#icon-font') format('svg'), font-weight:normal; font-style:normal; }
    
    .qiphon-font{ font-family:'qiphon-font'; -weikit-font-smoothing:antialiased; -moz-font-smoothing:grayscale; }
    
    .qiphon-search:before{ content:'\e9d3'; /* 每个符号都有自己的实体字符 （在普通的英文或中文字体里，“0”的编码是0x30，即48，这个其实是0的ASCII或者Unicode编码，同样的图标的字体也会给他每个’字‘一个编码然后用伪类的content加上反斜杠转义，如普通字体content:"\48" 和 content:"0" 效果是一样的）*/ }

#### 可能会遇到的问题 ####

--------------------

1.  weikit浏览器会在边缘加粗一个px，这个问题在间距比较小的时候比较明显，解决方案是加上一个font-smoothing的属性
2.  注意缓存  
    后续如果加入了新的字体如果不做处理的话，已经加载过的字体可能有缓存不会加载新的字体，解决办法：在@font-face导入的url里写入版本号,更彻底的方式是：更改路径名，或文件名
3.  多人协作  
    icomoon免费版的数据是储存在浏览器的本地数据库的，商业版的交点钱可以把数据存储在云端

# svg #

对于多色图标，可以在页面插入一个svg，svg除了IE8不兼容其他浏览器兼容都很好  
几个使用svg的方法:

--------------------

1.  直接copy到页面，就是把svg当成一个html标签直接嵌入页面，当成内联的，这样有个缺点，会导致html的文件太大，html是不会被缓存的，也会阻塞页面加载  
    `<div> <svg></svg> </div>`
2.  使用 embed / object / img  
    `<embed src="1.svg" width="100" height="100"> <img src="1.svg" width="100" height="12">`
3.  img的兼容要比embed差，这样做缺点是由于是一个外链，没有办法用css控制它当svg过多的时候可以考虑把多个svg合并成一个svg像雪碧图那样
4.  合并svg  
    通过用一个个的symbol将多个svg合在一起，同时给每个svg一个id，使用的时候就会用到
    
        <svg>
                <symbol viewBox="0 0 101.5 57.9" id="active-triangle">
                <path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/>
                <symbol viewBox="0 0 101.5 57.9" id="logo">
                <path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z">
            </svg>
        
        
           ///使用方式
           <svg viewBox="0 0 100 100">
                <use xlink:href="icon.svg#logo">
           </svg>
    
    IE不支持svg，但是有人用插件实现了，原理是检测到浏览器不支持的时候将其外链替换成相应的svg内容，详见[svg for everybody][]

[svg for everybody]: https://css-tricks.com/examples/svg-for-everybody