Font size
The CSS2 specification defines fonts based on length-horizontal and vertical dimensions. This length is a numeric value and may be preceded with an optional plus (+) or minus (-) marker. In addition, the value may have an optional unit identifier.
In addition, the CSS2 specification defines two unit types: absolute units and relative units. The absolute value specifies the unit, and the relative unit specifies a value that is proportional to another value. The following list lists the relative unit identifiers:
EM: The height of the element font. It evaluates to the same value as the font size property of the element that uses the font. When it appears in the font Size property value itself, an exception occurs, which refers to the font size of the parent element.
Ex (x-height): The CSS2 specification describes it as the height of the lowercase letter x.
PX (pixels): It is related to the resolution of the background or screen. Depending on the display resolution output of different pixels, due to user preferences, the display resolution may vary greatly.
The following are valid absolute unit identifiers:
In (inches)
CM (cm)
MM (mm)
PT (dot, 1 o ' =1/72 inches)
PC (12-point movable Type, 1pc=12 point)
Another way to measure absolute size is to apply the following keywords: minimum, small, small, medium, large, large, and minimum, using the proportional factor that measures a value. As the base value, smaller to subtract a factor, to increase a factor, and so on. The scale factor defined by the CSS2 specification is 1.2, and this value may vary depending on the browser.
You can also apply a percentage value to format text. The percent value is an optional marker, followed by a percentage sign (%). Percent values are always proportional to another value. In the case of a font, it is proportional to the basic font size of the Web page.
As you can see, there are many ways to do this seemingly simple task of rendering text. The following HTML-formatted text (in paragraph elements) applies various unit identifiers. All of these values are equal and are assumed to be displayed in 72dpi.
<html>
<head>
<title>font sizing-equal values</title>
</head>
<body>
<p style= "FONT-SIZE:36PT;" >Point</p>
<p style= "font-size:3pc;" >Pica</p>
<p style= "font-size:0.5in;" >Inches</p>
<p style= "font-size:1.27cm;" >Centimeters</p>
<p style= "font-size:12.7mm;" >Millimeters</p>
<p style= "font-size:300%;" >Percentage</p>
</body>
</html>
You can add a pixel value to the list, but its value depends on the environment. For example, my laptop with 1280x1024 resolution will display text that is consistent with the 50 pixel values used in the table above.
Read the CSS2 specification mentioned earlier to get more knowledge of font size. Now I'll talk about deciding which method to use in a Web application.
Choose which method
There are many fonts-related options in CSS, but which one is best for your network applications? There are many flaws in absolute size, especially in terms of consistency, flexibility, and accessibility. As opposed to absolute font size, any visually impaired user can use relative font size to enlarge the text on the page, making it easier to read. As a result, developers often use relative sizes.
Let's look at the relative size in detail:
Pixels are the most common size values. Most browsers support it, but not always. Browsers often treat pixels as screen pixels rather than as CSS pixels. One disadvantage of pixels is that it ignores or negates the user's preferences and cannot be resized in IE.
Many developers prefer to use points to measure font size, but the point is primarily for desktop printing systems that are not easy to migrate to the network. The operating system or browser uses pixels by default when rendering text.
The most common method is to use EM or percent size. EM can be adjusted in all browsers that support sizing. EM also depends on the default size of the user preference. The results of applying EM in IE are unpredictable. It is best to use percentages in IE to set the text size.
The following example uses the EM and percent values to format the text. The base text is set in percent values and then adjusted with EM.
<html>
<head>
<title>display test</title>
<style type= "Text/css" >
Body {Font:sans Serif, Arial; font-size:110%}
</style></head><body>
<p style= "FONT-SIZE:1.0EM;" >basic text.</p>
<p style= "FONT-SIZE:1.5EM;" >larger text.</p>
<p style= "FONT-SIZE:0.5EM;" >smaller text.</p>
</body>
</html>
It's all about appearances.
Existing standards provide many ways to format and render text in network applications. Developers can easily decompose text into relative and absolute identifiers. The key is to stay consistent and thoroughly detect the solution.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
