Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use @ font-face to achieve web page special characters, the article is very detailed, has a certain reference value, interested friends must read it!

A few days ago, I wrote an article, that is, to use css to achieve triangular arrows. Although it has achieved the desired effect, there are still some problems, such as still need to rely on position to locate the location of arrows. And at present, you can only achieve triangular arrows, if you want to use some other characters, you still have to use pictures. So recently I have been looking for a better way, and I finally found it.

First of all, let's go to the C disk Fonts folder to find the WEBDINGS.TTF font and copy it to the desktop. Next, we need a software, which is "fontforge", which can make custom fonts, and we will use it to make a font library for ourselves.

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

A lot of graphic characters, do you find that many characters have been used before, but not in pictures at that time?

The next thing we need to do is to select the characters we need and save them in another font file. Because most of the characters in the WEBDINGS.TTF file are not needed, we can use this file directly when our character library is a little larger, so we just need to choose what we need. In operation, we first create a new blank font file, click File- > New, and then select the characters we need. And copy it to the newly created font file, such as:

Then save and select Generate Fonts:

Then set the file saved at the end of .ttf:

In this way, our font file is ready. However, it is not over, because IE only knows .eof, not .ttf, so we also need to generate other font files, on this issue, I wrote an article a long time ago, the method of operation is explained, and there is no specific introduction. Article link: "the actual operation of using any font in the web page".

Finally, if you think the operation is too troublesome, you can download a character library I organized, mainly with arrows, because it is too commonly used.

Download address

In general, although this thing will increase the total size of the loaded page file, it will be more diversified if you have your own character library. Because we can control the size and color of characters, and even shadow, flip and other css3 effects, and if the picture wants to change color, it must be modified, or make a new one, the plasticity is not strong.

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

The above is all the content of the article "how to use @ font-face to implement web page special characters". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.