Chinese web font technology and solutions

In our daily needs, we often encounter the visual designer of a Chinese font effect very persistent situation, because the page is tall, font selection is a very important factor, choose the right font can make the page more elegant. In the face of this problem, we typically design a restore in the following ways:

Use the picture background to restore the design, which uses Photoshop to export the text layer separately into a Web page background image.

problems that Arise

1. Production and maintenance costs are high. Transduction cumbersome, high-definition screen suitable for cumbersome, combined with sprite map more cumbersome, late modification more cumbersome.

2. User experience is poor. Causes the page to not support check, copy, search, translate, vector zoom, also affects the visually impaired user to use the Reader action webpage.

3. Bring more bandwidth consumption. The exported picture volume increases with the text area, and the glyph cannot be reused, which consumes a lot of server resources

Webfont technology provides the possibility of using special fonts on Web pages, thereby avoiding the use of images. It is implemented using CSS @font-face to introduce fonts. Many internet companies have pioneered this approach, such as using their own fonts on Apple's website. Google also launched a free Webfont cloud hosting service, custom fonts in foreign websites are well applied.

In Chinese, the custom font has not been widely used, what is the reason?

ChineseWebfont's Dilemma:

1. Large Chinese font size

English font text part consists of 26 letters, so the font file is usually not too large, and the number of Chinese characters is about 90,000, GB (GB) font has 6763 characters, and according to the "Modern Chinese characters commonly used table" statistics, commonly used Chinese characters also have about 3,500. Chinese font files are usually a few m in size and are clearly not suitable for use in a project, referring to the current network environment in China.

2. Browser support

Different browser support for fonts is different, there is no one can support all browser fonts, which requires us to different browsers to make different fonts. (N=not supported, p=partial support, y=supported)

To solve the above problems, we can conclude that the problem to be solved in Chinese Webfont is: Compression and transcoding.

font-spider Chinese Webfont solution was born:

In order not to allow the project and experience to restrict the designers to the font choice and the realization of the creative, we use spare time to solve the Chinese webfont two major problems namely compression and transcoding, so there is the birth of Font-spider (Word spider). As the industry's first Chinese Webfont local automation compression and transcoding tool, the problem of Chinese font Web is solved. It is a Web font tool that uses automation technology to compress and transcode Chinese fonts across platforms, making it possible for Web pages to embed Chinese fonts freely.

principle

1. Crawling local HTML documents, parsing all CSS statements

2. Record the @font-face font of the statement declaration, and record the CSS selector that uses the font

3. Find the node of the current HTML document through the rules of the CSS selector , and record the text on the node

4. Locate the font file and delete the characters that are not used

5. Encoding a font format for cross-platform use

Code 0 Intervention

There is no need to change the existing coding habits of Web engineers, and engineers can @font-face define and apply fonts directly through CSS and selectors.

Compression and transcoding

Excluding unused characters, you can typically compress a number of megabytes into dozens of KB size, solve problems with large Chinese fonts, and encode them into a cross-platform compatible format.

http://font-spider.org/

Original address: http://isux.tencent.com/font-spider.html

Chinese web font technology and solutions