CSS3 about @font-face quoting Chinese font resolution

There are two ways, a simple, a more complex, can be implemented (note: The method here is only suitable for a small number of Chinese fonts, if the use of too large, please use other methods to solve)

The first type: simple

1. Download the. ttf format for the required Chinese fonts, this is not difficult to find, Baidu on a search a large, can be downloaded to.

2. Download FontForge software, this software can edit fonts, font file memory is generally relatively large, direct use will lead to slow loading speed, the purpose of using this font editing software is to extract the required fonts, you can solve the font memory is smaller, so that does not affect the loading speed.

3. Open the AI, write a text that you need, I use the founder Yao Body, the written font into the outline (in the font on the right-click-to-Create profile), and then save the text in the. svg format.

　　

4. Open the downloaded FontForge software, create a new blank font file, see the @font-face reference font source files should be aware that the font or icon in the code reference is replaced by symbols, that is, the font symbol here, In the new font file, it is recommended to start with a font from a, so that it is convenient to write in late code, double-click the box under a, pop up a font editing window, click File->import, import the. svg format file you just saved with AI, import fonts. (Note: Select Import font type)

　　

Import Font Succeeded

As the previous method, import all the required fonts into the. ttf format (click File->generate Fonts). (Note: 1. This is to be saved as a. ttf format, such as; 2. Edit the font suggested to save, convenient for late text modification to find the corresponding character)

The work of editing fonts ends here.

5. Use the Fontsquirrel online conversion software to convert the. ttf format to the required format. EoT. Woff. svg. xml format as required in the page. (Note: Fontsquirrel online conversion software URL: http://www.fontsquirrel.com/tools/webfont-generator), conversion complete Save the compressed package to the required files, Here the package will automatically generate a stylesheet.css file, the file has been referenced in the font, the direct use of it.

　　

The second type: complex

　1. Open the downloaded. ttf file with FontForge font editing software, create a new blank font file in FontForge, double-click the text you want in the open. TTF to open the edit window, and click File->export to export the font to. svg format. In the blank font file, double-click the box under a, pop up the font editing window, click File->import to import the font into the file, here to find the text you need may be a lot of time. (Note: It is not possible to copy fonts directly from the. ttf file to a new blank font file, so that the font size is smaller, it is recommended to pilot out, and then import).

2. As the above method, the required font is rearranged in the new file and saved in the. ttf format, which makes the font file memory smaller and easier to use.

3..ttf font file conversion methods in other formats see step 5 of the first method.

Both of these methods can be used to convert Chinese fonts, using the @font-face method as in English font references.

CSS3 about @font-face quoting Chinese font resolution