[Reprint] Do you know about webpage font settings ?, Reprint font settings

[Reprint] Do you know about webpage font settings ?, Reprint font settings

In the previous project, similar fonts such as {font-family: arial, "microsoft yahei", simsun, and sans-self;} were set according to the settings of the gourd image watermark, however, when more devices and systems appear, the previous settings cannot meet the display requirements of webpages on various devices.

Take the simplest simsun for example. In Windows, the display is a relatively easy-to-read font, but it cannot be directly viewed on Mac, for example, compare the results of pages before and after optimization:

Source: http://ued.ctrip.com/blog

Therefore, for various reasons, I had to give a corresponding understanding of the font.

This article provides the following comments on website font settings:

Mobile project:

Font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;

 

Pc (including Mac) project:

Font-family: Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self;

 

Mobile and pc projects:

Font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-self;

First, let's talk about the Font types. There are five types of fonts. However, the support for each device is also different, for example,

Supported mobile device systems:

Five types of fonts	Android 4.0	IOS6.0	WP8
Sans-serif (unlined)	Supported	Supported	Supported
Serif)	Supported	Supported	Supported
Monospace (equal width)	Supported	Supported	Supported
Fantasy)	Not Supported	Supported	Not Supported
Cuisive)	Not Supported	Not Supported	Not Supported

 

Of course, this is only the support of various mobile devices. However, the support for pc browsers varies, for example:

Five types of fonts	IE Series	Chrome	Firefox
Sans-serif (unlined)	Supported	Not Supported	Not Supported
Serif)	Supported	Supported	Supported
Monospace (equal width)	Supported	Supported	Supported
Fantasy)	Supported	Supported	Supported
Cuisive)	Not Supported	Not Supported	Not Supported

 

The following describes the default fonts and common fonts of the next system:

System	Default Spanish font	Default Chinese font	Other commonly used Spanish Fonts	Other common Chinese Fonts
Windows			Tahoma, Arial, Verdana, Georgia	And
Less than Android 4.0	Droid Sans	Droid Sans Fallback	Arial	No, no
Android 4.0 and later	Roboto	Roboto	Arial	No, no
IOS	Helvetica Neue	Heiti SC ()	Tahoma (v7.0), Arial, Verdana, Georgia	STHeiti (v7.0), no, no
Mac OS X 10.6 or lower	Helvetica Neue	STHeiti (文)	Tahoma, Arial, Verdana, Georgia	, And
Mac OS X 10.6 and above	Helvetica Neue	Hiragino Sans GB (Simplified Chinese)	Tahoma, Arial, Verdana, Georgia	, And

 

References: iOS6 font list, iOS7 font list, Mac OS x 10.6 font list, Mac OS X 10.7 font list, etc. After reading some documents, we have a basic understanding of the fonts in the system and browser.

Many people may think of the conclusions in the above table: You can set only the Spanish font and not the Chinese font.

Can I set only the Spanish font and not the Chinese font? Of course, the answer is no. Because the default fonts of the above systems and browsers are only ideal settings, these default fonts are limited to the browser or the system's original default fonts. Currently, all mobile phones support font replacement, which is also true for browsers. Currently, browsers support font settings by users. Therefore, it is dangerous to set only the Spanish font and ignore the Chinese font settings.

 

For various fonts of the current Adroid system, such as font manager and font management. If the user downloads the relevant app font software to change the font, what should we do in this case?

If you replace the default system words, we can only use other Chinese fonts to replace the reality. However, currently, there are very few Chinese fonts (almost unique) on the Mobile End ), therefore, I have not found a solution, and I will share it later.

Webpage font settings

Method 1. Open IE-toolbar -- View -- text size (maximum, large, medium ......) After setting, restart IE.
Method 2: Create a notebook and enter the following content:
Body, td, tr, table, form, option, select, main, input, textarea, p
{
Font-size: 12px;
}

Save it as a sample file in css format. You can modify the value after "font-size". A larger value indicates a larger font.
In ie, select "do not use the font size of the webpage" for internet Options and auxiliary functions, select "use style sheet to orchestrate the document format", and click browse, select the css file you just created and click OK.

How can I change the font of some webpages? (The font in my webpage font settings is set to "" and "")

Open the IE browser, Click Tools> Internet Options> General tabs> auxiliary functions> and check whether a check box is found. If yes, remove it.