How to troubleshoot using custom Chinese fonts in Web pages

English font customization

Chinese font customization

The above two picture examples show the application of custom fonts in the Web page, this is not a browser font, nor is the client computer installed fonts, nor pictures or other ways, but also in the way of text display, the advantages of doing so is some, the simplest good-looking ah, and then, for example, can be easily modified, The important thing is to facilitate SEO optimization. The benefits are not many, let's talk about how to achieve.

　　 First, to prepare the font, use the three file formats of the font to ensure that the font is displayed correctly in the mainstream browser.

The following are some of the major browsers ' support for font formats:

. TTF or. OTF, suitable for Firefox 3.5, Safari, Opera

. EOT, for use with internet Explorer 4.0+

. SVG, suitable for Chrome, IPhone

When you get to a three-format font file, you can use the @font-face property of the CSS to invoke the font.

The code is as follows:

@font-face {
font-family: ' Fontnameregular ';
Src:url (' Fontname.eot ');
Src:local (' FontName Regular '),
Local (' FontName '),
URL (' fontname.woff ') format (' Woff '),
URL (' Fontname.ttf ') format (' TrueType '),
URL (' fontname.svg#fontname ') format (' SVG ');
}

This is a simple two-step implementation, not complicated, but if you really think this is done, then there is no need for this article.

There is a problem here, how to get these three kinds of format files of a font? Generally, we use the special fonts that are downloaded, most commonly. TTF files, through TTF files we can obtain through the online font conversion service provided by the website font squirrel or the Web font converter. I am using the font Squirrel, which allows us to select the characters needed to generate font files, which greatly reduces the size of the font file, so that the site performance is stronger. The web site does not support font file conversion above 1M. As for how to use this website, the Internet has a lot of, to see it yourself.

Note that the font file here cannot exceed 1M, so there is no problem with English fonts, after all, the English font on 26 letters, plus some symbols, dozens of KB can be done, but for Chinese fonts, I am afraid this method is not applicable, Chinese fonts are always a few m, some even more than 10M , for Chinese font squirrel is powerless, even if it can be converted, a Web site because of a custom font, and increase the flow of a few m is very unwise choice.

So in this case, for Chinese fonts, we need to pick out the text from the font of the site, and then make their own fonts, generally Bailai Chinese characters almost.

From the font to pick out the text we need, font editing software, the typeface creator is essential, first look at what the software looks like.

　　This is the last word I have to pick out. How to find these words from a font file is the next question. Select the editor here-Find or direct ctrl+f, you will see the following interface

　　Select Unicode, where you can locate the text you want based on the Unicode of the Chinese character. As for the Chinese character of Unicode, online but a lot of resources can be found, casually Baidu a http://www.nengcha.com/soucha/code/unicode/class/, such as I find "Fang", The corresponding Unicode is "65b9", that in the dollar sign after the "65B9", point lookup, you can navigate to the side, so we want to which word, you can quickly find, you may copy out to create a new font, you can also font files in the other do not delete the font. We can first find all the words we need, and then according to the Unicode order, how to sort, I am afraid there is this problem, the simplest, is through the Web site just mentioned http://www.nengcha.com/soucha/code/unicode/ class/, here at a maximum can Enter 100 words, come out is sorted by Unicode, very convenient, one to find, the middle part of all deleted, is not much easier.

here basically a thin body. TTF's font file is done, and then back to site font Squirrel to generate other formats of the file bar. There's nothing left to say about the back.