diff options
Diffstat (limited to 'files/zh-cn/web/css/@counter-style/speak-as/index.html')
| -rw-r--r-- | files/zh-cn/web/css/@counter-style/speak-as/index.html | 123 |
1 files changed, 123 insertions, 0 deletions
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 +--- +<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> |