Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)

It's the end of the year and there are fewer tasks. My manager must feel uncomfortable seeing me sitting idle. So I was given a task: to research the fonts supported by various browsers on iOS and Android devices. When I heard the word "research", I felt a headache. I'm just a small programmer, not a product developer, so I have never done such work. Well, take it as you understand it.

Even though I have been working on the front-end, I actually don’t even know the most basic types of fonts. After a day of research, I found that my knowledge had broadened a lot. I forgot which celebrity said this: In a field, no matter how small the thing is, if you persist for 10 years, you will become an expert in it. Without further ado, I will now share with you the information I know about web fonts.

1. In web coding , the web fonts used by CSS by default are limited, although in the new version of CSS3, we can introduce special browser-loaded fonts through the newly added @font-face attribute.

When the text content of a web page is displayed in a browser, the text fonts will be displayed in the order of the font families defined by the designer in CSS. What is a font family? A font family is a type of font name that you see in the "font-family" code in the CSS code, such as the following line of code:

Copy code

The code is as follows:

font-family:"Comic Sans MS","Youyuan","Heiti",sans-serif;

According to the W3C standard, when parsing a line of code, the browser will first search for the Comic Sans MS font in the system. If this font exists in the system, the browser will use the Comic Sans MS font. If not, it will then search for the Thin Round font, and so on until the browser can express the fonts that exist in the system.

Please note that "sans-serif" is not the name of a certain font, but a font that is finally selected when the fonts described above are invalid. It is called the browser universal font. It depends on the default universal font of the browser you are using. It may be "Arial" or "Helvetica".

2. Commonly used fonts on web pages are usually divided into five categories: serif, sans-serif, monospace, fantasy, and cuisive. These common names allow user agents to select a font from the corresponding collection.
Serif fonts have small details called serifs at the ends of character strokes. These details are particularly noticeable in uppercase letters.
Sans-serif fonts do not have any details at the ends of their character strokes, and their shapes are simpler than serif fonts.
A monospace font, in which each letter is of equal width, often used for typesetting code blocks in computer-related books.
Fantasy and cuisive fonts are not commonly used in browsers and have obvious differences between browsers.

3. Commonly used fonts on web pages

Sans-serif:

Helvetica: Voted as the favorite font of designers, it has a Realist style and simple and modern lines, and is very popular. It is considered the best web font on Mac, but displays poorly on Windows due to Hinting.
Arial: A "clone" of Helvetica, very similar to Helvetica, with slight differences in details such as R and G. If the font size is too small and there are too many words, it will be a bit tiring for the eyes. Win and Mac display are normal
Lucida Family: Lucida Grande is the standard font for Mac OS UI. It is humanist style and a little more lively. The display under Mac is better than that under Win.
Verdana: A font designed specifically for screen display, with a humanist style. It can still be clearly displayed at small sizes, but the font details are seriously lost, so it is best not to use it for titles.
Tahoma: Also in humanist style, the font is a bit like Verdana, but slightly narrower and with a slightly smaller counter. It was once the standard font for Windows and is also installed by default after Mac 10.5.
Trebuchet MS: A humanist-style font designed for Microsoft. I personally think its personality is too prominent and it will not fit in if not used properly.

Serif:

Georgia: Basically, the serif font suitable for body text display is Georgia. The strokes are thick, the serifs are bright, the outlines are large, the small fonts are clear, and the details are OK.
Times: Times is designed for newspapers. Its characteristic is that it can cram more text into a limited space. The strokes are weaker, and the small font size on the screen looks tiring to the eyes. When Engadget was revamped, it used Times as the main text, but after being severely criticized, it changed to Georgia.

Chinese:

Songti: The most common font for Windows. Small fonts are dot matrix, and large fonts are TrueType. However, large fonts are not good-looking, so it is best not to use it for titles.
Microsoft YaHei: A new font introduced after Vista. It has a good display effect after turning on Cleartype, but looks blurry without Cleartype.
Chinese Xihei: The default Chinese language for Mac.

4. I wrote a small demo and tested it on various browsers. There are still differences in the parsing of this font by various browsers.

Copy code

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*Reset{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*} Reset */
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--Web fonts are usually divided into 5 categories--
<div style="font-family: sans-serif;">Hello hello world    sans-serif (sans serif) </div>
<div style="font-family: serif;">Hello hello world    serif (serif) </div>
<div style="font-family: monospace;">Hello hello world    monospace (monospace) </div>
<div style="font-family: fantasy;">Hello world      fantasy(fantasy) </div>
<div style="font-family: cuisive;">Hello hello world    cuisive (cursive) </div>
<br/>
--Sans serif--
<div style="font-family: Helvetica, sans-serif;">Hello hello world    Helvetica </div>
<div style="font-family: Arial, sans-serif;">Hello hello world    Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">Hello hello world    Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">Hello hello world    Verdana </div>
<div style="font-family: Tahoma, sans-serif;">Hello hello world    Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">Hello hello world    Trebuchet MS </div>
<br/>
-- Serif Class --
<div style="font-family: Georgia, serif;">Hello hello world    Georgia </div>
<div style="font-family: Times, serif;">Hello hello world    Times </div>
<br/>
--Chinese fonts--
<div style="font-family: 宋体">Hello hello world    宋体</div>
<div style="font-family: Microsoft YaHei">Hello world    Microsoft YaHei</div>
<div style="font-family: Chinese Thin Black">Hello hello world    Chinese Thin Black</div>
<div style="font-family: 黑体">Hello hello world    黑体</div>
</body>
</html>

Results displayed on Chrome

Results displayed on IE8

Results displayed on Firefox

5. In this test, we found that :

The browsers on Android devices are not very powerful (I haven't tested iOS yet, so I don't think they will be much better). There are only three common fonts supported by the browsers on Android phones:

sans-serif (sans serif) class: Arial; //As long as it is set to the sans-serif class, no matter what font, it will look the same.
serif class: Georgia; //As long as it is set to the serif class, it will look the same no matter what font it is.
monospace (equal width) class //As long as it is set to monospace class, no matter what font, it will look the same.

Browsers on mobile devices still need some work.

<<: Solution to define the minimum height of span has no effect

>>: JavaScript ES new feature block scope