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

This article will explain in detail how to use any font on the web page. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I have done a little research on "embedding non-system built-in fonts in web pages". Although it can be realized technically, it does not have much practical significance for China, because a Chinese style file is at least 20MB, and the font files supported by different browsers are different, that is to say, there must be 2-3 font files in different formats on the server side to cope with each browser. You can take a look at the corresponding picture below.

I thought that this small study I had done before would not be used for future work, but it was really used. A customer asked for the time to be displayed, but the font of the time must be the font of an electronic watch, as shown in the figure:

First of all, we need to find this font, because this font is only in ttf format, so we need to convert to other different formats. As for how to convert, there is software, there is online, I do not specify which one must be used here.

After the conversion, you can write css code

The code is as follows:

@ font-face {

Font-family: 'hooray'; / * name custom fonts * /

Src: url ('http://demo.jb51.net/js/2013/webfontry/hooray.eot');

Src: url ('http://demo.jb51.net/js/2013/webfontry/hooray.eot?#iefix') format (' eot'))

Url ('http://demo.jb51.net/js/2013/webfontry/hooray.woff') format (' woff'))

Url ('http://demo.jb51.net/js/2013/webfontry/hooray.ttf') format (' truetype'))

Url ('http://demo.jb51.net/js/2013/webfontry/hooray.svg#webfontjKg17VrE') format (' svg'))

}

As for the invocation, as usual, define the font-family where you need it, and the font name is the name you just named:

The code is as follows:

Font-family: 'hooray'

Many of the contents of the article I did not specifically explain the reasons, because there are a lot of information on the "use of arbitrary fonts in the web page", but there are few examples, if you do not understand, go to Baidu Google, you will be able to understand.

This is the end of this article on "how to use any font on a web page". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.