Use @font-face to implement special characters on web pages (create custom fonts)

First, we go to the Fonts folder on the C drive to find the WEBDINGS.TTF font and copy it to the desktop. Next, we need a software called "fontforge", which can realize the function of creating custom fonts. We will use it to make a font library suitable for our own.

After downloading, unzip it, copy the WEBDINGS.TTF font into it, run fontforge.bat and select the font file, and then this interface will appear:

There are a lot of graphic characters. Did you find that many of them have been used before, but they were implemented with pictures at that time?

The next thing we need to do is to select the characters we need and save them to another font file. Since most of the characters in the WEBDINGS.TTF file are not used, it is a bit too large to use this file directly as our character library. So we only need to select the ones we need. To operate, we first create a blank font file, click File->New, then select the characters we need and copy them to the newly created font file, such as:

Then save and select Generate Fonts:

Then save the file with the .ttf extension:

In this way, our font file is ready. However, it is not over yet, because IE only recognizes .eof and not .ttf, so we still need to generate other font files. Regarding this issue, I wrote an article a long time ago, and the operation methods are explained, so I will not introduce them in detail. The article link is: "The actual operation of using arbitrary fonts in web pages".

Finally, if you find the operation too troublesome, you can download a character library I compiled, which mainly focuses on arrows because they are so commonly used.
Download

In general, although this thing will increase the total size of the loaded page file, if you have your own character library, the operability will be more diversified. Because we can control the size and color of the characters, and even CSS3 effects such as shadows and flipping, but if we want to change the color of a picture, we have to modify it or make a new one, which is not very flexible.

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

PS2: Thanks to @小熊 for the idea. Since character rotation can be achieved through CSS3 & filters, when making the character library, we can only record one arrow in the four directions and rotate it through code to reduce the size of the character library file.