When designing a network application, you must decide how to edit the font. There are a lot of options when using CSS, and every developer has their own preferences. This article mainly discusses the font size and operations in network applications. When developing a network application, nothing is more important than appearance. So I am not surprised if I find that the designer is very concerned about the font and font size!
Font Size
CSS2 specifications define fonts Based on the length-horizontal and vertical dimensions. This length is a numerical value, which may be preceded by an optional plus (+) or minus (-) Mark. In addition, this value may have an optional unit identifier.
In addition, the CSS2 standard defines two unit types: absolute unit and relative unit. The absolute value specifies the Unit, while the relative unit specifies the value proportional to the other value. The following list lists the relative unit identifiers:
Em: height of the element font. It is equivalent to the font size attribute of the element that uses the font. When it appears in the font size attribute value itself, an exception occurs. In this case, it refers to the font size of the parent element.
Ex (x-height): CSS2 Standards describe it as the height of lowercase letter x.
Px (pixel): it is related to the background or screen resolution. Different pixels are output based on the display resolution. The display resolution may vary greatly depending on your preferences.
The following is a valid absolute unit identifier:
In (INCHES)
Cm (cm)
Mm (mm)
Pt (point, 1 point = 1/72 inch)
Pc (12 o'clock, 1 pc = 12 o'clock)
Another way to measure the absolute size is to use the proportional factor to measure a value and apply the following keywords: Minimum, small, small, medium, large, large, and minimum. Is the base value. If the value is smaller, a factor is subtracted. If the value is larger, a factor is increased. The ratio defined in the CSS2 specification is 1.2. This value may also vary with the browser.
You can also use the percentage value to format the text. A percent value is an optional identifier, that is, a percent sign (%) after a number ). The percentage value is always proportional to another value. In terms of font, It is proportional to the basic font size of the webpage.
As you can see, there are many ways to complete the seemingly simple task of rendering text. The following HTML text (in section elements) applies various unit identifiers. All values are equal and displayed at 72dpi.
<Html>
<Head>
<Title> Font Sizing-equal values </title>
</Head>
<Body>
<P style = "font-size: 36pt;"> Point </p>
<P style = "font-size: 3 pc;"> Pica </p>
<P style = "font-size: 0.5in;"> Inches </p>
<P style = "font-size: 1.27;"> Centimeters </p>
<P style = "font-size: 12.7;"> Millimeters </p>
<P style = "font-size: 300%;"> Percentage </p>
</Body>
</Html>
You can add a pixel value to this list, but its value depends on the environment. For example, a laptop with a resolution of 1280X1024 will display text that is consistent with the 50-pixel value used in the preceding table.
Read the CSS2 specification carefully to learn more about font size. Now I will discuss how to decide which method to use in network applications.
Method To select
There are many font-related options in CSS, but which one is the most suitable for your network applications? Absolute size has many defects, especially in consistency, flexibility and access. Compared with the absolute font size, users with any visual impairment can use the relative font size to expand the text on the page, which is easier to read. Therefore, developers often use relative sizes.
Let's take a closer look at the relative size:
Pixels are the most common size values. Most browsers support it, but not always. Browsers often treat pixels as screen pixels rather than CSS pixels. One disadvantage of pixel is that it ignores or denies users' preferences and cannot be adjusted in IE.
Many developers prefer to use vertices to measure the font size. However, vertices are mainly used in desktop printing systems and cannot be transplanted to the network. The operating system or browser uses pixels by default when rendering text.
The most common method is to use em or percentage size. EM can be adjusted in all browsers that support resizing. Em is also related to the default user preferred size. The results of applying em in IE are unpredictable. In IE, it is best to use percentages to set the text size.
The following example uses em and percentage values to format the text. The basic text is set with the percentage value, and then adjusted with em.
<Html>
<Head>
<Title> Display Test </title>
<Style type = "text/css">
Body {font: Sans Serif, Arial; font-size: 110%}
</Style> <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>
All related to appearance
The existing standards provide many ways to format and present text in network applications. Developers can easily break down text into relative and absolute identifiers. The key lies in consistency and thorough detection of solutions.
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
