Use a Custom font in HTML to implement a small icon (not the original, but a research note ).

Use a Custom font in HTML to implement a small icon (not the original, but a research note ).

Recently, when I was working on a project, I studied the front-end of Sina Weibo. Have you seen the icon on the homepage, in the past, the first response to this kind of effect was to use a gif or another icon !!

However, during the study, I found a trick. Note that the text in the em tag is E, but an ICON similar to the ICON is displayed.

 

Since it is written in HTML + CSS, the display effect should be controlled by css.

 

 

I understand other css statements, but only this font-family is required to be set to "wbficonregular". Generally, this font should not be used in the operating system !!

Click Google's debugger again and find there are loaded font files !! In addition, in one of the font files, something in the same shape as the Home Page icon is found !!

 

 

Baidu, woff is a font file !!

So I thought I should have software to make my own font file. Baidu found the software named FontCreator !!

 

File> New

 

The character set, font style, and pre-defined outline are all set by default. The pre-defined outline includes the outline, which allows the new font file to have several characters by default, generally, you just need to modify it !!

For example, right-click the digit 0 and choose Edit from the context menu.

 

In the window that appears, you can drag the selection box in the center of point 0 to modify its shape (for example only)

=>

Okay, save it !!

 

Next, we will use the font we just made in html !!

 

Just make an example, or write css to html.

 

Effect of Google Chrome

 

Don't try to finish it at this time. Open it with Internet Explorer.

Why ?? Compatibility with css custom Fonts

Source http://www.w3cplus.com/content/css3-font-face

I. TureTpe (. ttf) format:

. The ttf font is the most common font for Windows and Mac, and is a RAW format. Therefore, it is not optimized for websites. browsers that support this font include [IE9 +, Firefox3.5 +, chrome4 +, Safari3 +, Opera10 +, iOS Mobile Safari4.2 + ];

Ii. OpenType (. otf) format:

. Otf font is considered to be a primitive font format. It is built on the basis of TureType, so it also provides more features. browsers that support such fonts include [Firefox3.5 +, chrome4.0 +, Safari3.1 +, Opera10.0 +, iOS Mobile Safari4.2 + ];

Iii. Web Open Font Format (. woff) Format:

. Woff font is the best Web font format. It is an open TrueType/OpenType compressed version and also supports the separation of metadata packages. browsers that support this font include [IE9 +, firefox3.5 +, Chrome6 +, Safari3.6 +, Opera11.1 + ];

Iv. Embedded Open Type (. eot) format:

The. eot font is a dedicated IE font. You can create this font type from TrueType. browsers that support this font include [IE4 + ];

5. SVG (. svg) format:

. Svg fonts are based on the SVG font rendering format. browsers that support such fonts include [Chrome4 +, Safari3.1 +, Opera10.0 +, iOS Mobile Safari3.2 + ].

This means that in @ font-face, we need at least. woff and. eot fonts, And even. svg fonts to support more browser versions.

(Here, I'm a little thief, so I still use ttf, because I haven't found a good software for converting ttf to woff)

 

Which, ttf to eot, requires a small software, http://download.csdn.net/detail/u010488325/6235387

An f. eot is added next to f. ttf,

 

Use css hack to add the f. eot file to the previous font reference.

View results

 

To sum up,

Using this method to add an icon to the li tag of some a tag ul is actually very convenient, and as long as there is not much content in the prepared font file, its size will be several k, in some cases, it is better than the icon of the image.

In addition, the icons created in this method can only be solid colors. For example, some icons have gradient effects, or images may be better. This is measured by yourself during development !!