blob: 5a2031972a44f9f88845cb7bcee49a0d398a578b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
---
<div>{{CSSRef}}</div>
<p>当已明确定义 {{cssxref('@counter-style')}} 后，可以用 <code><strong>speak-as</strong></code> 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定，当计算机读出这篇文章时，是以数字序号表示 counter，还是仅仅用语音提示。</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* 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>;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>auto</code></dt>
<dd>如果 <code><strong>speak-as</strong></code> 的值是 <strong><code>auto</code></strong>，那么它的实际值是由 {{cssxref("system")}} 的值决定的：
<ul>
<li>如果 <code>system</code> 的值是 <code>alphabetic</code>，<code><strong>speak-as</strong></code> 的值是 <code>spell-out</code><strong>。</strong></li>
<li>如果 <code>system</code> 的值是 <code>cyclic</code>，<code><strong>speak-as</strong></code> 的值是 <code>bullets</code>。</li>
<li>如果 <code>system</code> 的值是 <code>extends</code>，当被继承的样式上也定义了 <strong><code>speak-as: auto</code></strong>，那么 <code><strong>speak-as</strong></code> 的值就和被继承样式的值相同。</li>
<li>其他场景下，表现都与<strong><code> speak-as: numbers</code></strong> 相同。</li>
</ul>
</dd>
<dt><code>bullets</code></dt>
<dd>用于表示无序的列表项，具体的发音由{{Glossary("user agent")}}决定。</dd>
<dt><code>numbers</code></dt>
<dd>根据文档语言的规范，读出计数器标明的数字的值。</dd>
<dt><code>words</code></dt>
<dd>在显示上，由用户代理决定计数器的值，读的时候以单词为单位。</dd>
<dt><code>spell-out</code></dt>
<dd>依然是用户代理决定了计数器，但它将会以逐个字母的形式被读出。如果遇到某个计数器，用户代理不知道要如何读时，会将它当做 <code>numbers</code> 处理。</dd>
<dt><code><counter-style-name></code></dt>
<dd>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, <code>speak-as</code> defaults to <code>auto</code>.它的另一个名称是 {{cssxref("<custom-ident>")}}。使用了这个值后，计数器将以被指定的样式名的形式读出，和声明了 {{cssxref("fallback")}} 的效果类似。如果被指定的样式不存在，<code>speak-as</code> 将回退为<code>auto</code>。 </dd>
</dl>
<h3 id="语法_2">语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">@counter-style speak-as-example {
system: fixed;
symbols: ;
suffix: " ";
speak-as: numbers;
}
.list {
list-style: speak-as-example;
}</pre>
<h3 id="结果">结果</h3>
<p>{{ EmbedLiveSample('例子') }}</p>
<h2 id="无障碍问题">无障碍问题</h2>
<p>这个属性的无障碍支持度不太友好。请别指望靠它能正确地传递出页面的核心信息。</p>
<p><a href="https://css-tricks.com/lets-talk-speech-css/">Let's Talk About Speech CSS | CSS Tricks</a></p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}</td>
<td>{{Spec2('CSS3 Counter Styles')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.at-rules.counter-style.speak-as")}}</p>
<h2 id="参考">参考</h2>
<ul>
<li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
<li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
</ul>
|
