How to Use Special Font_Shang pin China focuses on high quality website construction - 上海1314龙凤鲜花坊_上海419贵族宝贝

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 you select a font, the website will provide you with a javascript script. You don't need to submit an article. You can directly import the script into</body>and then</html>. 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.

How to use special fonts in website production

Date：2014-12-24 Source: Shangpin China Type: website encyclopedia
Word Size： small medium big

+86 10-60259772