Use custom fonts to implement small icon icons in HTML (not the original work, just a research note)_html/css_WEB-ITnose

When I was working on a project recently, I studied the front-end of Sina Weibo. Did you see that icon on the homepage? In the past, the first reaction when seeing this kind of effect was to use a gif or something like that. The icon was made!!

But during the research process, I discovered a little trick. Note that the text in the em tag is E, but an icon similar to ICON is displayed.

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

There are basically no problems with other css, and I understand them all, but only this font-family is forcibly set to "wbficonregular". Generally, there should be no font with this name in the operating system!!

I randomly clicked on Google’s debugger and found that a font file was loaded!! And in one of the font files, I found something with the same shape as the homepage icon!!

After searching on Baidu, woff is a font file!!

So I thought there should be software to make my own font file. After searching on Baidu, I found a file called woff FontCreator software!!

File-> New

Character set, font I set the style and predefined outline according to the default values. The predefined outline selection includes the outline, so that the newly created font file will have a few characters by default. Generally, I just modify it directly!!

For example, if I modify the numeric character 0, right-click on the numeric character 0 -> Edit

In the window that appears, click on the middle of 0 and drag Select the box and modify its shape (just for example)

=>

Okay, save!!

Next, The font I just made is used in HTML writing!!

Just as an example, let’s write css into HTML

The effect of Google Chrome

Don’t think about finishing at this time, open it with the evil IE and take a look

Can’t get the effect?? Baidu looks at the compatibility issues of css custom fonts

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

1. TrueTpe (.ttf) format:

.ttf font is the most common font for Windows and Mac. It is a RAW format, so it is not used for websites Optimized, browsers that support this font include [IE9, Firefox3.5, Chrome4, Safari3, Opera10, iOS Mobile Safari4.2];

2. OpenType (.otf) format:

.otf font is considered an original font format, which is built on the basis of TrueType, so it also provides more functions. Browsers that support this font include [Firefox3.5, Chrome4.0, Safari3.1, Opera10.0, iOS Mobile Safari4.2];

3. Web Open Font Format (.woff) format:

. The woff font is the best format among Web fonts. It is a compressed version of open TrueType/OpenType and also supports the separation of metadata packages. The browsers that support this font include [IE9, Firefox3.5, Chrome6, Safari3. 6, Opera11.1];

4. Embedded Open Type (.eot) format:

.eot font is a special font for IE, and this format can be created from TrueType Font, browsers that support this font include [IE4];

5. SVG (.svg) format:

.svg font is rendered based on SVG font A format, the browsers that support this font include [Chrome4, Safari3.1, Opera10.0, iOS Mobile Safari3.2].

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

(Here, I am a little lazy, I still use ttf, because I have not found a better ttf to woff software)

Among them, converting ttf to eot requires a small software. The download address is http://download.csdn.net/detail/u010488325/6235387

next to f.ttf There is one more f.eot,

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

Look at the effect

To summarize,

Use this method to add an icon to the li tag in some a tags ul. In fact, It is very convenient, and as long as the content of the font file produced is not much, its size is only a few kilobytes. In some cases, it is better than the icon of the picture.

In addition, the icon made by this method is only Can it be a solid color, like some icons with a gradient effect, or is it better to use pictures? You can measure this by yourself during development!!