From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/@counter-style/speak-as/index.html | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 files/zh-cn/web/css/@counter-style/speak-as/index.html (limited to 'files/zh-cn/web/css/@counter-style/speak-as') diff --git a/files/zh-cn/web/css/@counter-style/speak-as/index.html b/files/zh-cn/web/css/@counter-style/speak-as/index.html new file mode 100644 index 0000000000..5a2031972a --- /dev/null +++ b/files/zh-cn/web/css/@counter-style/speak-as/index.html @@ -0,0 +1,123 @@ +--- +title: speak-as +slug: Web/CSS/@counter-style/speak-as +tags: + - '@counter-style' + - CSS + - CSS Decriptor + - Reference +translation_of: Web/CSS/@counter-style/speak-as +--- +
{{CSSRef}}
+ +

当已明确定义 {{cssxref('@counter-style')}} 后，可以用 speak-as 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定，当计算机读出这篇文章时，是以数字序号表示 counter，还是仅仅用语音提示。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+speak-as: auto;
+speak-as: bullets;
+speak-as: numbers;
+speak-as: words;
+speak-as: spell-out;
+
+/* @counter-style name value */
+speak-as: <counter-style-name>;
+
+ +

值

+ +
+
auto
+
如果 speak-as 的值是 auto，那么它的实际值是由  {{cssxref("system")}} 的值决定的： +
    +
  • 如果 system 的值是 alphabetic，speak-as 的值是 spell-out。
    • +
  • 如果 system 的值是 cyclic，speak-as 的值是 bullets。
    • +
  • 如果 system 的值是 extends，当被继承的样式上也定义了 speak-as: auto，那么 speak-as 的值就和被继承样式的值相同。
    • +
  • 其他场景下，表现都与 speak-as: numbers 相同。
    • +
+
+
bullets
+
用于表示无序的列表项，具体的发音由{{Glossary("user agent")}}决定。
+
numbers
+
根据文档语言的规范，读出计数器标明的数字的值。
+
words
+
在显示上，由用户代理决定计数器的值，读的时候以单词为单位。
+
spell-out
+
依然是用户代理决定了计数器，但它将会以逐个字母的形式被读出。如果遇到某个计数器，用户代理不知道要如何读时，会将它当做 numbers 处理。
+
<counter-style-name>
+
The name of another counter style, specified as a {{cssxref("<custom-ident>")}}. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the {{cssxref("fallback")}} descriptor. If the specified style does not exist, speak-as defaults to auto.它的另一个名称是 {{cssxref("<custom-ident>")}}。使用了这个值后，计数器将以被指定的样式名的形式读出，和声明了 {{cssxref("fallback")}} 的效果类似。如果被指定的样式不存在，speak-as 将回退为auto。 
+
+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style speak-as-example {
+  system: fixed;
+  symbols:     ;
+  suffix: " ";
+  speak-as: numbers;
+}
+
+.list {
+  list-style: speak-as-example;
+}
+ +

结果

+ +

{{ EmbedLiveSample('例子') }}

+ +

无障碍问题

+ +

这个属性的无障碍支持度不太友好。请别指望靠它能正确地传递出页面的核心信息。

+ +

Let's Talk About Speech CSS | CSS Tricks

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}{{Spec2('CSS3 Counter Styles')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.counter-style.speak-as")}}

+ +

参考

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