Use @ font-face to implement special characters on the webpage (provide the Character Library compiled by myself)

I wrote an article a few days ago, that is, using css to implement the triangular arrow. Although it has achieved the desired effect, there are still some problems. For example, I still need to rely on position to locate the arrow. At present, you can only use arrow triangles. If you want to use other characters, you still need to use images. So I have been searching for a better solution recently and finally found it ......

First, go to the Fonts folder on drive C to find the WEBDINGS. TTF font and copy it to the desktop. Next, we need a software called "fontforge", which can be used to create custom fonts. We will use it to create a library suitable for ourselves.

Decompress the downloaded package, copy the WEBDINGS. TTF font to it, run fontforge. bat, select the font file, and the page appears:

There are a lot of graphic characters. Have you found that many characters have been used before, but they were not implemented by images at that time?

Next, we need to select the desired characters and store them in another font file, because WEBDINGS. most characters in the TTF file are not available, so we can use this file directly to make our character library a little large, so we only need to select what we need, in the operation, we first create a blank font File, click File-> New, select the desired character, and copy it to the New font File, for example:

Save and select Generate Fonts:

Then set the file to be saved as the end of. ttf:

In this way, our font files are ready. However, it is not over yet, because IE only knows. eof, don't know. ttf, so we still need to generate other font files. For this question, I wrote an article very early, and the operation methods are described. I will not discuss it in detail. The article link: actual operations on using any font on the webpage.

Finally, if you think the operation is too troublesome, you can download a character library that I have organized, mainly by arrows, because it is too common. : Http://files.cnblogs.com/hooray/webchar.zip

In general, although this will increase the total size of page files, if you have your own character library, the operability will be more diversified. Because we can control the character size, color, and even shadow, flip, and other css3 effects, and if you want to change the color of an image, you must modify it, or recreate it, which is not plastic.

PS: In my EonerCMS, the buttons on the right and bottom right of the window have been replaced with characters, and the effect is quite good.

PS2: Thanks to @ cubs for providing ideas. Since css3 and filter can be used for character rotation, we can record only one arrow in four directions when creating a character library, use code to rotate it to reduce the size of the character library file.