Introduction to the implementation principle of Google font API

In the previous article "using Google font API to make the web page more beautiful"ArticleI will show you how to use the Google font API to use beautiful English fonts in the Google font directory. I have summarized two questions from comments:

1. the estimation of the Chinese font size is insufficient. The Chinese font size is indeed not very large. It is difficult to provide a complete Chinese font in Google's open font directory, based on the current bandwidth, even if it can be provided, users do not want that long time.

2. I am very curious about the implementation principle of Google font API.

@ Font-face format

The implementation of the Google font API benefits from the ability of the browser to load server-side font files. This function is used by defining the @ font-face attribute in the style. The description of this attribute is as follows:

@ Font-FACE: loads the font files on the server to display fonts not installed on the client. [Microsoft's ie 5 has started to support this attribute, but only supports Microsoft's own. EOT (Embedded Open Type) format. other browsers have not yet supported this field format. However, since safari 3.1, web page reconstruction engineers have been able to set. TTF (TrueType) and. otf (OpenType) fonts as custom fonts .]

Google font API loads the font files in the Google open font directory. For Reenie beeni fonts, Google defines the following methods:

 
@ Font-face {font-family: 'reenie beine'; SRC: URL ('HTTP: // themes.googleusercontent.com/font? Kit = ljpkc6cdxusl1cngusamx_ccqibwlboqp4ecflnqtq0 ');}
 

AboveCodeThe font-family attribute defines the font name so that the font can be used in subsequent styles. the src attribute defines the path of the font file, you can directly access the property value in the browser to download the font file.

Font file compatibility

It is worth mentioning that because different browsers support different font file formats, Google will provide different font files based on the browser type, I have used IE and Firefox for testing, ie downloads the EOT file, and Firefox downloads the TTF file.

The compatibility of various font file formats is described as follows:

. EOT format

. TTF format

Text Files in other formats cannot be described because no relevant information is found.

Summary

The above is a two-point explanation of the question in the previous article. I hope that the person who asked the question can be satisfied with my reply and help me a little.

References:

1. css3 quick query manual