이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The font-stretch CSS property selects a normal, condensed, or expanded face from a font.

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 0%;
font-stretch: 50%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

Some font families offer additional faces in which the characters are narrower than the normal face (condensed faces) or wider than the normal face (expanded faces).

You can use font-stretch to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.

To see the effect of this property on some sample fonts, see the Font face selection section below.

Syntax

This property may be specified as a single keyword value or a single <percentage> value.

Values

normal
Specifies a normal font face.
semi-condensed, condensed, extra-condensed, ultra-condensed
Specifies a more condensed font face than normal, with ultra-condensed as the most condensed.
semi-expanded, expanded, extra-expanded, ultra-expanded
Specifies a more expanded font face than normal, with ultra-expanded as the most expanded.
<percentage>
A <percentage> value. Negative values are not allowed for this property.

In earlier versions of the font-stretch specification, the property accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a <percentage> value as well. This enables variable fonts to offer something more like a continuum of character widths. For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying widths.

However, note that the <percentage> syntax is not yet supported by all browsers: check the Browser compatibility table for details.

Keyword to numeric mapping

The table below shows the mapping between keyword values and numeric percentages:

Keyword Percentage
ultra-condensed 50%
extra-condensed 62.5%
condensed 75%
semi-condensed 87.5%
normal 100%
semi-expanded 112.5%
expanded 125%
extra-expanded 150%
ultra-expanded 200%

Font face selection

The face selected for a given value of font-stretch depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.

The table below demonstrates the effect of supplying various different percentage values of font-stretch on two different fonts:

  50% 62.5% 75% 87.5% 100% 112.5% 125% 150% 200%
Helvetica Neue
League Mono Variable
  • Helvetica Neue, which is installed by default on macOS, has a single condensed face in addition to the normal face. All values of font-stretch less than 100% select the condensed face, while all other values select the normal face.
  • League Mono Variable is a variable font that offers something like a continuous range of widths for different percentage values of font-stretch.

Formal syntax

<font-stretch-absolute>

where
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

Example

Percentage syntax

Note that this example will only work in browsers that support <percentage> values.

HTML

<div class="container">
    <p class="condensed">an elephantine lizard</p>
    <p class="normal">an elephantine lizard</p>
    <p class="expanded">an elephantine lizard</p>
</div>

CSS

/*
This example uses the League Mono Variable font, developed by
Tyler Finck (https://www.tylerfinck.com/) and used here under
the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
  font-family:'LeagueMonoVariable';
  font-style: normal;
}

.container {
  border: 10px solid #f5f9fa;
  padding: 0 1rem;
  font: 1.5rem 'LeagueMonoVariable', sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

Result

Specifications

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-stretch' in that specification.
Working Draft Adds the <percentage> syntax for variable fonts.
CSS Fonts Module Level 3
The definition of 'font-stretch' in that specification.
Candidate Recommendation Initial definition.

Note: The font-stretch property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea font stretch
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 60Edge Full support 12Firefox Full support 9IE Full support 9Opera Full support 47Safari Full support 11WebView Android Full support 60Chrome Android Full support 60Edge Mobile Full support 12Firefox Android Full support 9Opera Android Full support 47Safari iOS ? Samsung Internet Android ?
<percentage> syntaxChrome No support NoEdge ? Firefox Full support 61IE No support NoOpera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 61Opera Android No support NoSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown