- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS @font-face - font-stretch
The font-stretch CSS descriptor permits the authors to give a normal, condensed, or expanded font face for the specified fonts in the @font-face at-rule.
font-stretch descriptor is used exclusively to specify the font face'e stretch. These font faces correspond to the different styles of the same font family.
The descriptor font-stretch takes the same values as that of its corresponding font-stretch property.
The font-stretch descriptor should not to be confused with the font-stretch property. The font-stretch descriptor is used solely with the @font-face at-rule to explicitly select expanded or narrow font faces for that rule. The font-stretch property is then used elsewhere in the style sheet to apply that font width to an element.
Possible Values
The font-stretch CSS descriptor can have one of the following values:
normal: Specifies a normal font face.
semi-condensed, condensed, extra-condensed, ultra-condensed: Specifies a condensed font face than normal, where ultra-condensed is the most condensed form.
semi-expanded, expanded, extra-expanded, ultra-expanded: Specifies an expanded font face than normal, where ultra-expanded is the most expanded form.
<percentage>: A percentage value, which can be 50% to 200% (inclusive). Negative values are not permitted.
Syntax
font-stretch = "normal" | <'font-stretch'>;
Few ways in which font-stretch> is declared is as follows:
/* single values */ font-stretch = "normal"; font-stretch = "semi-condensed"; font-stretch = "condensed"; font-stretch = "extra-condensed"; font-stretch = "ultra-condensed"; font-stretch = "semi-expanded"; font-stretch = "expanded"; font-stretch = "extra-expanded"; font-stretch = "ultra-expanded"; font-stretch = 75%; font-stretch = 200%; /* multiple values */ font-stretch = 50% 120%; font-stretch = semi-condensed ultra-condensed;
Keyword to numeric mapping
The following table explains the mapping of keyword values and their corresponding percentage values:
Keyword | Percentage |
---|---|
normal | 100% |
semi-condensed | 87.5% |
condensed | 75% |
extra-condensed | 62.5% |
ultra-condensed | 50% |
semi-expanded | 112.5% |
expanded | 125% |
extra-expanded | 150% |
ultra-expanded | 200% |
Variable fonts
Many of the fonts have a specific width, corresponding to one of the keyterm values. But there are some fonts that support a range of stretching with fine granularity to a great extent, these are called the variable fonts. They give the user much more control over the font-weight that they are choosing. And for specifying the stretching of these fonts, percentage values are useful.
The wdth variation of TrueType or OpenType variable fonts, is useful in implementing the varying glyph widths.
Accessibility concerns: Fonts that are too condensed, especially in the case of fonts with low contrast color ratio, might not be very clear to the people with dyslexia and other cognitive conditions.
CSS font-stretch - Percentage Value
Following example demonstrates the setting of stretch value for a font face, using the percentage range 50% and 200% used inside the @font-face at-rule:
<html> <head> <style> @font-face { src: local("monospace"); font-family: "f1"; font-style: normal; font-stretch: 50% 200%; } .container { font: 2rem "f1", sans-serif; } .font-condensed { font-stretch: 50%; } .font-normal { font-stretch: 100%; } .font-ultra-expanded { font-stretch: 200%; } .font-semi-condensed { font-stretch: semi-condensed; } .font-extra-condensed { font-stretch: extra-condensed; } .font-ultra-condensed { font-stretch: ultra-condensed; } .font-semi-expanded { font-stretch: semi-expanded; } .font-extra-expanded { font-stretch: extra-expanded; } </style> </head> <body> <div class="container"> <p class="font-condensed">ultra-condensed (50%)</p> <p class="font-normal">normal (100%)</p> <p class="font-expanded">ultra-expanded (200%)</p> <p class="font-semi-condensed">semi-condensed</p> <p class="font-ultra-condensed">ultra-condensed</p> <p class="font-semi-expanded">semi-expanded</p> <p class="font-extra-expanded">extra-expanded</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google