Detailed explanation of the use of iconfont in CSS

This tutorial explains the use of iconfont in CSS in detail

First introduction to iconfont

Even if we don’t understand this English at first and don’t understand what it does, for iconfont, when read from back to front in English, it should be called: font icon. This already contains two concepts, first it must be the font, and second, it must be the icon. We all know that we can control the size, style, deformation, stretching, default font and other attributes of fonts on web pages, so this iconfont must be embedded in the style as text, so the font that comes to mind must be; since it is an icon, it must There is a path to introduce it. First of all, we first thought of the img tag. Since it is both text and icon, the only thing we can think of is the @font-facecss3 attribute.

There is also the later word iconfont, which did not appear at the beginning. It is a presentational layer given by web page producers or scholars who want to make it sound more pleasant.

So, when we see Alibaba’s iconfont icon tutorial as follows:

Step 1: Use font-face to declare the font

@font-face {font-family: 'iconfont';
src: url('iconfont .eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format ('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url(' iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

Step 2: Define the style using iconfont

.iconfont{
font-family:"iconfont" !important ;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

Step 3: Select the corresponding icon and get the font encoding, apply it to the page

#x33

The effect is as follows

However, Iconfont has some disadvantages:

The browser treats it as text and resists With aliasing optimization, sometimes the results are not as sharp as expected. In particular, different anti-aliasing algorithms for text under different systems may lead to different display effects.
Icon Font As a font, the size and position of Icon display may be affected by font-size, line-height, word-spacing and other CSS properties. The CSS style of the container where the Icon is located may affect the position of the Icon, making it inconvenient to adjust.
There are inconveniences in use. First, loading an Icon Font that contains hundreds of icons but only using a few of them wastes loading time. It is also very inconvenient if you make your own Icon Font and integrate the icons used in multiple Icon Fonts into one Font. Of course, using the Alibaba UX vector icon library can solve this problem
In order to achieve maximum browser support, at least four different types of font files may be provided. Includes TTF, WOFF, EOT and a font defined using SVG format. If you make it yourself, you may have a headache

The above is the detailed explanation of the use of iconfont in CSS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!