15.7 Font size: the 'font-size' property
- 'font-size'
-
Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit Initial: medium Applies to: all elements Inherited: yes Percentages: refer to parent element's font size Media: visual Computed value: absolute length
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares. Values have the following meanings:
- <absolute-size>
- An <absolute-size> keyword is an index to a table of font sizes computed and kept by the UA. Possible values are:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The 'medium' value is the user's preferred font size and is used as the reference middle value.
CSS absolute-size values xx-small x-small small medium large x-large xx-large HTML font sizes 1 2 3 4 5 6 7 Note: implementation experience has demonstrated that a fixed ratio between adjacent absolute-size keywords is problematic, and this specification does NOT recommend such a fixed ratio, in contrast to previous specifications (CSS1 suggested 1.5, and CSS2 suggested 1.2).
Implementors should build a table of scaling factors for absolute-size keywords relative to the 'medium' font size and the particular device and its characteristics (e.g. the resolution of the device).
Different media may need different scaling factors. Also, the UA should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.
Note 1. To preserve readability, a UA applying these guidelines should nevertheless avoid creating font-size resulting in less than 9 pixels per EM unit on a computer display.
Note 2. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large. In CSS2, the suggested scaling factor for computer screen between adjacent indexes was 1.2 which still created issues for the small sizes. The new scaling factor varies between each index to provide better readability.
- <relative-size>
- A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [ larger | smaller ]. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the UA is free to interpolate between table entries or round off to the closest one. The UA may have to extrapolate table values if the numerical value goes beyond the keywords.
Length and percentage values should not take the font size table into account when calculating the font size of the element.
Negative values are not allowed.
On all other properties, 'em' and 'ex' length values refer to the computed font size of the current element. On the 'font-size' property, these length units refer to the computed font size of the parent element.
Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.
Examples:
p { font-size: 16px; } (이부분을 추가 하면 수정 됨.)
@media print {
p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }