Use of the logo in the page-for meals

Use of the logo in the page-I want to sort out the content and share it with you for work reasons until now, so I can quickly sort it out and share it with you.

CSS sprite)
The so-called sprite graph is actually to combine several images into one. In this way, the content can be quickly transmitted and presented in a low-concurrency browser (reducing requests ).

• When using these images, You need to reference the entire image and then set the coordinates to the desired small image.
• In addition, images are grouped by color into multiple files. Each image has only one color, which makes each image smaller.
• Of course, this selects a suitable solution based on the current project. The following two attributes are used to process the sprite:

1 background-image: url (".../*. png"); 2 background-position: 0px 0px; 3 4/* Note: negative value of position. */

First, I will go to several icon websites, because we will introduce the font icons below:

• > [Fortawesome. github. io]
• > [Icomoon. io]
• > [Alibaba icon library]
• & Gt; [Font Awesome 3.0]

Use of font icons in html

1
Bytes
2
 

1 @ font-face {2 font-family: "my-icon" 3 src: url (".. /*. eot "); 4/* Add '? 'Otherwise, Error 404 may be returned */5 src: url (".../*. eot? ") Format (" embedded-opentype ") 6, url (".. /*. woff ") format (" woff ") 7, url (".. /*. ttf ") format (" truetype ") 8, url (".. /*. svg ") format (" svg "); 9 font-weight: normal; 10 font-style: normal; 11} 12. i-icon {13 font-family: "my-icon"; 14 font-style: normal; 15 font-weight: normal; 16 font-size: 26px; 17-webkit-font-smoothing: antialiased;/* */18-moz-osx-font-smoothing: grayscale;/* */19}

Use of font icons in css

1
2
 

@font-face {    font-family: "myfont";    src: url("../ *.eot");    src: url("../ *.eot?#iefix") format("embedded-opentype"),          url("../ *.woff") format("woff"),          url("../ *.ttf") format("truetype"),          url("../ *.svg") format("svg");    font-weight: normal;    font-style: normal;  }  .icon {    font-family: "myfont";    font-weight: normal;    font-style: normal;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;  }  .icon-magic:before {    content: "\c210";  }

Comparison of various methods

	Sprite	In html	In css
Principle	Use Image Positioning	@ Font-face	@ Font-face
Compatible	+	+	Earlier IE versions are not supported
Maintenance Cost	Relatively difficult	Simple	Simple
Color	Rich	Single Color	Single Color
Zoom	Distortion	Clear	Clear