RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/font-size below:

font-size · WebPlatform Docs

font-size Summary

font-size sets the font size of the text inside the element to which it is applied, and that of its descendants. You can size text using absolute measurements, or measurements relative to the affected element’s parent or root elements. CSS Text Styling Fundamentals provides an overview.

Overview table

Initial value: medium
Applies to: All elements
Inherited: Yes
Media: visual
Computed value: as specified, but with relative lengths converted into absolute pixel values.
Animatable: Yes
CSS Object Model Property: fontSize

Syntax

font-size: absolute keywords
font-size: inherit
font-size: length
font-size: percentage
font-size: relative keywords

Values

absolute keywords: A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser’s default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
relative keywords: A set of keywords interpreted relative to the parent element’s font-size — either smaller or larger.
length: An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal.
percentage: A percentage value specifies an absolute font size relative to the parent element’s font-size.
inherit: The inherit keyword causes the element to adopt its parent element’s font size.

Examples

A selection of examples showing some typical uses of the font-size property.

<p class="example-one">Example One: We ♥ WebPlatform Docs!</p>
<p class="example-two">Example Two: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eos, dicta nihil aliquid quia dolores labore nesciunt unde consectetur blanditiis ex eius consequatur qui incidunt voluptatem inventore fugit quos amet!</p>
<p class="example-three">Example Three: Eius, earum unde eum distinctio ex accusamus rem eligendi optio mollitia deleniti? Iure, accusamus, fuga ipsa quas doloremque enim velit sed est earum pariatur ab optio quia molestiae repellendus non.</p>

.example-one {
    font-size: 1.2em;
}

.example-two {
    font-size: small;
}

.example-three {
    font-size: 28px;
}

View live example

A redefinition of the typical 16px browser default font size medium value as 10px, followed by a resizing of the text that follows proportionate to that.

html { font-size: 62.5%; }


.example-one { font-size: 3.6rem }   
.example-two { font-size: 2.4rem }   
.example-three  { font-size: 1.4rem }

View live example

Usage

 Keywords such as large and medium, or relative em or percentage units, are generally safer to use than pixel measurements, especially for mobile web browsers that adjust their set of default font sizes for legibility. Use of percentage values, or values in  ems, leads to more robust and cascadable style sheets.

Otherwise, pixels offer the safest way to specify measurements, since CSS pixels are adjusted for variations in display pixel density.

While the initial medium size applies widely, browsers apply a default style sheet that modifies it for various semantic elements, boosting the size of headings, for example. Browsers also automatically resize fonts when zooming the page, stepping by values that may not correspond exactly to the zoom factor. Unless disabled using text-size-adjust, fonts also resize when tipping between portrait and landscape orientations on mobile browsers. For an overview of the issue, see The Mobile Viewport and Orientation.

The value of font-size also affects the value of line-height when using its default or relative measurements.

Along with many other CSS properties, font-size can also be applied directly as an SVG attribute:

<text x="12px" y="12px" font-family="sans-serif" font-size="120%"/>

Related specifications

CSS Fonts Module Level 3: Working Draft
CSS Values and Units Module Level 3: Candidate Recommendation
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: W3C Recommendation