Good programmer web front-end share mainstream CSS image comparison in the restoration of the design, it will inevitably encounter some style image reference. How to optimize these images? This article has combed a few more commonly used ways at present. Note:




　　


　　


　　


This is the most commonly used method at present. I personally think it’s a relatively optimal solution. Of course, optimal here refers to specific circumstances. Mobile clients, for example, don’t have to do this.





use
Start by integrating small images into a larger image


Convert the image resource to


Such as:


use

1. data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOw CAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

　　

1. < p > < font size = “3” > icon {< / font > < / p >

2. < p > < font size = “3” > width: 30 px; height: 30px; </font></p>

3. < p > < font size = “3” > background – image:

4. url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOw CAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC); </font></p>

5. < p > < font size = “3” >} < / font > < / p >

Tag syntax:


　　


advantages
To reduce


Put it all together,


　　


　　


Online conversion tool


Because mobile devices have different resolutions,


using


because


advantages
Small file
Good loading performance
support


This can be done manually using the font tool
It can also be generated automatically using an online tool
in


Introducing font files


　
　

1. < p > < font size = “3” > SRC: url (‘ iconfont. Eot); /* IE9*/</font></p>

2. < p > < font size = “3” > SRC: url (‘ iconfont. Eot? #iefix’) format(’embedded-opentype’), /* IE6-IE8

3. */</font></p>

4. < p > < font size = “3” > url (‘ iconfont. Woff) format (‘ woff), chrome, firefox * / / * < / font > < / p >

<p><font size=”3″>url(‘iconfont. TTF ‘) format(‘ trueType ‘), /* Chrome, Firefox, Opera, Safari,

6. Android, iOS 4.2 + * / < / font > < / p >

7. < p > < font size = “3” > url (‘ iconfont. Svg# uxiconfont ‘) format (‘ SVG); IOS 4.1 – / * * / < / font > < / p >

8. < p > < font size = “3” >} < / font > < / p >


Let me define another one


　
　

1. < p > < font size = “3” > display: inline – block; </font></p>

2. < p > < font size = “3” > speak: none < / font > < / p >

3. < p > < font size = “3” > the font-family: “iconfont”; </font></p>

4. < p > < font size = “3” > the font size: 16 px; </font></p>

5. < p > < font size = “3” > line – height: 1; </font></p>

6. < p > < font size = “3” > the font – style: normal; </font></p>

7. < p > < font size = “3” > / * * the fonts icon appear jagged question: * / < / font > < / p >

8. < p > < font size = “3” > – its – the font – smoothing: antialiased; </font></p>

9. < p > < font size = “3” > – moz – osx – the font – smoothing: grayscale. </font></p>

10. < p > < font size = “3” >} < / font > < / p >


And finally use


　　

1. < p > < font size = “3” > content: “003432 \”; </font></p>

2. < p > < font size = “3” >} < / font > < / p >

3. < p > < font size = “3” > icon – search: before {< / font > < / p >

4. < p > < font size = “3” > content: “003433 \”; </font></p>

5. < p > < font size = “3” >} < / font > < / p >