MENU service case
Website construction website design Beijing website construction high-end website production company Shangpin China
We create by embracing change
360 ° brand value__
simplified Chinese character
Simplified Chinese English

Shangpin China Joins Hands with Beisheng Internet to Create a New Chapter in Website Construction

Type: Shangpin Dynamic Learn more

How to use special fonts in website production

Source: Shangpin China | Type: website encyclopedia | Date: December 24, 2013
about Website production company In order to ensure the display effect, the front-end professionals have had to use "safe fonts" for a long time. All English websites are Verdana, and all Chinese websites are Song typeface - because this is the font that must be installed in every computer browsing the web.
 
How to use special fonts in website production

This is intolerable to UI teachers who keep improving their design concepts. The font is the root of the page effect, just like the clothes of the models on the runway have changed thousands of types, but you can only use one or two models (for Chinese users, there is almost only one Song typeface)? How can I apply rich font effects to web pages?

Special font application scheme

There are three schemes at present:

1. When the customer opens the web page, prompt the customer to install the font.
2. Create a picture to embed into the web page.
3. Embed the font in the web page (upload the font file to the specified directory for CSS reference display).
The first scheme has obvious disadvantages. It uses a script program to identify whether the client contains the font, which increases the load of the program. And it seriously affects the user experience. The effect is the worst!
The second scheme generates pictures. The web page loads slowly, which is not conducive to Baidu's inclusion. The effect is poor!
The third scheme has the best effect with small flow and fast loading speed!
The third scheme refers to network font (web font, also known as "web page embedded font" or "web page external font"). By uploading font files to the specified directory, and then referencing them in the specified format in CSS, you can make font effects jump to your page, so that web page words are no longer affected by the browsing client.

Web font and browser support

Network font is implemented by @ font face statement in CSS. It is generally considered that network font is a module in CSS3. In fact, it has been in CSS2 for a long time. Even the old IE6 and even IE4 support it. Other browsers, including mobile browsers, are also perfectly supported (such as IE, 360, Sogou, Firefox, Chrome, Safari, Opera, etc.).

How to use network fonts

All browsers support @ font face statements, but the embedded font files are independent. To make all browsers display normally, you need to prepare font files of various formats for embedding (. eot,. woff,. svg,. ttf).
You can upload fonts to FontSquirrel and automatically generate all the required formats. Then upload the file to the space and reference it according to the @ font face statement specification.
How to use Chinese network fonts
Attention should be paid to Chinese fonts, because Chinese fonts are different from English fonts. A set of Chinese fonts is generally 4-6M. If the whole set is embedded, few visitors will have the patience to wait until the fonts are loaded. Before the fonts are loaded, the page has been closed.
Therefore, Chinese fonts need to be intercepted in advance, according to the words involved in the article content, and the small fonts after interception can be embedded for use.
Yes, Chinese is really too troublesome, which is why English web pages use so many network fonts, but Chinese is rarely encountered.

Simple operation of third-party platform

It is too troublesome to prepare files of various formats for operation, especially to intercept the small font library for Chinese.
It is difficult to achieve without professional tools, but don't worry. With the help of a third-party platform, it will be easy.
Now there are some good platforms on the Internet. For example, typekit, fontdeck and google font in English and Youziku.com in Chinese can greatly facilitate the use of network fonts.

Youzi font library is mainly used for Chinese network font reference. There are two main methods:

1. javascript

After the font is selected, the website will provide you with a javascript script. You don't need to submit an article. You can just import the script before it is introduced. The script will automatically generate font files of various formats based on the content of the current article and embed them in the current page.

2. CSS mode

After you select a font, you need to submit the content of the article. The website will cut it into a small font library according to the content of the article, automatically generate font files in various formats (. eot,. woff,. svg,. ttf), and return a link tag referenced by the css file. You just need to import this link tag into the page's head tag. Finally, don't forget to set the class on the tag referencing the network font.
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
TAG label:

What if your website can increase the number of conversions and improve customer satisfaction?

Make an appointment with a professional consultant to communicate!

* Shangpin professional consultant will contact you as soon as possible

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]

Communicate with professional consultants now!

  • National Service Hotline

    400-700-4979

  • Beijing Service Hotline

    010-60259772

Please be assured to fill in the information protection
Online consultation

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]