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/letter-spacing/index.html | 139 ++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/zh-cn/web/css/letter-spacing/index.html (limited to 'files/zh-cn/web/css/letter-spacing') diff --git a/files/zh-cn/web/css/letter-spacing/index.html b/files/zh-cn/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..9178182664 --- /dev/null +++ b/files/zh-cn/web/css/letter-spacing/index.html @@ -0,0 +1,139 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - SVG + - 参考文档 +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

CSS 的 letter-spacing 属性用于设置文本字符的间距表现。

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

语法

+ +
/* Keyword value */
+letter-spacing: normal;
+
+/* <length> values */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Global values */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

值

+ +
+
normal
+
此间距是按照当前字体的正常间距确定的。和 0 不同的是，{{glossary("user agent", "用户代理")}}根据此属性来确定文字的默认对齐方式。
+
{{cssxref("<length>")}}
+
指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="normal">letter spacing</p>
+<p class="em-wide">letter spacing</p>
+<p class="em-wider">letter spacing</p>
+<p class="em-tight">letter spacing</p>
+<p class="px-wide">letter spacing</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

结果

+ +

{{ EmbedLiveSample('Examples', 440, 185) }}

+ +

可解决的问题

+ +

一个很大的正或负的 letter-spacing值会将应用这个样式的单词变为不可读的。给文本 letter-spacing 属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本 letter-spacing 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

+ +

最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

+ +

可访问性考量

+ +

A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

+ +

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}没有变化
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}定义可动的间距
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}没有变化
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}初始化 SVG
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Initial specification
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf