From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/font-stretch/index.html | 156 ++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 files/zh-cn/web/css/font-stretch/index.html (limited to 'files/zh-cn/web/css/font-stretch') diff --git a/files/zh-cn/web/css/font-stretch/index.html b/files/zh-cn/web/css/font-stretch/index.html new file mode 100644 index 0000000000..8782c3a629 --- /dev/null +++ b/files/zh-cn/web/css/font-stretch/index.html @@ -0,0 +1,156 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +translation_of: Web/CSS/font-stretch +--- +

{{CSSRef}}

+ +

Summary

+ +

font-stretch 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如{{cssxref("font-feature-settings")}}和{{cssxref("font-variant")}}属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

+ +

The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.

+ +
+

Note: If the font provides several faces, the one fitting the best with the value of the font-stretch property is chosen. E.g. On OS X, in addition to the more common Bold, Regular, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrunk, characters: Condensed. Browsers supporting font-stretch will use the condensed faces for the value ultra-condensed to semi-condensed and the normal faces for the other (normal and all expanded values).

+Font-stretch results with a font having 2 faces, one condensed and one normal. +

If the font has no condensed or expanded faces, like the default "Times New Roman" on Mac OS, font-stretch will not have any visible effect as the only suitable face will be used in all cases.:
+ Font-stretch results with a font having 1 single face.

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* 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;
+
+/* Global values */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+
+ +

Values

+ +
+
normal
+
指定默认字体
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
小于默认字体，其中ultra-condensed是缩的最小的字体
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
大于默认字体的值
+
+ +

Interpolation

+ +

Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div class="ultra stretch"> This is text with the font extremely expanded</div>
+<div class="stretch"> This is text with the font stretched</div>
+<div class="normal"> This is text without font stretching</div>
+<div class="condensed"> This is text with the font condensed</div>
+<div class="ultra condensed"> This is text with the font extremely condensed</div>
+ +

CSS

+ +
.ultra.stretch{font-stretch: ultra-expanded;}
+.stretch {font-stretch: expanded;}
+.normal {font-stretch: normal;}
+.condensed {font-stretch: condensed;}
+.ultra.condensed {font-stretch: ultra-condensed;}
+ +

Result

+ +

{{ EmbedLiveSample('Example', '500', '', '', 'Web/CSS/font-stretch') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS3 Fonts') }}Initial definition
+ +

The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support48.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }}9.035.0{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
+
-- cgit v1.2.3-54-g00ecf