Use custom fonts in HTML to implement Small icons icon (not the original, just a research note)

Recently in a project, study the front end of Sina Weibo, see the homepage in the icon, the first reaction to see this kind of effect is to use a GIF and other icons to make!!

But in the course of the study, a little trick was found, noting that the text in the EM tag is E, but it shows an icon that resembles icon.

Since it is written by html+css, it should be controlled by the CSS to show the effect.

Some other CSS basic no problem, all understand, but only this font-family, mandatory set to "Wbficonregular", the general operating system should not have the name of the font it!!

And disorderly point of Google's debugger, found to have loaded font files!! And in one of the font files, find the same shape of things as the homepage icon!!

Baidu a bit, Woff is a font file!!

So I think there should be software to make their own font files. Baidu a bit, found the name of Fontcreator software!!

FILE-New

Character sets, font styles, and predefined outlines I have the default value, where the predefined contour selection includes the outline, is to let the new font file by default There are a few characters, and generally I will directly modify the line!!

For example, I changed the number character 0 To edit on the numeric character 0 right-click

In the window that appears, you can drag the marquee in the middle of point 0 to modify its shape (just for instance)

=

All right, save it!!

Next, use the font you just made for HTML writing!!

Just make an example, or write the CSS in HTML.

The effect of Google Chrome

This time do not want to finish, with the evil IE open to see

the effect does not come out? Baidu a bit of CSS custom font compatibility issues

SOURCE Http://www.w3cplus.com/content/css3-font-face

One, Turetpe (. ttf) Format:

The. TTF font is the most common font for Windows and Mac, is a raw format, so he is not optimized for websites, and browsers that support this font have "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile Safari4.2+ ";

Second, OpenType (. OTF) Format:

The. OTF font is considered to be an original font format, built on a turetype basis, so it also provides more functionality, and browsers that support this font have "Firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+ ";

Third, Web Open Font format (. Woff):

The. Woff font is the best format for Web fonts, he is a compressed version of an open Truetype/opentype, and also supports the separation of meta-packages, browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+ , opera11.1+ ";

Iv. Embedded Open Type (. EoT) Format:

. EOT fonts are IE-specific fonts that can be created from TrueType fonts and browsers that support this font have "ie4+";

V. SVG (. svg) Format:

The. svg font is a format based on SVG font rendering, and browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+".

This means that at least we need to be in the @font-face. Woff,.eot two format fonts, and even require. svg and other fonts to support more than one browsing version.

(Here, I stole a little lazy, I still use TTF, because I have not found a good TTF transfer Woff software)

Here, TTF turns EOT, requires a small software, http://download.csdn.net/detail/u010488325/6235387

Next to the F.ttf, there was one more f.eot,

Add the F.eot file to the previous font reference with CSS hack

See Effect

To summarize,

In this way to some of the A label UL Li Tag plus an icon, in fact, very convenient, and as long as the production of the font file content, its size is a few K bar, in some cases relative to the image of the icon better.

In addition, this method to do the icon, can only be solid color, like some icon has a gradient effect, or with a picture will be better, this in the development of the time to measure Bai!!

Use custom fonts in HTML to implement Small icons icon (not the original, just a research note)