---
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: &lt;counter-style-name&gt;;
</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>&lt;counter-style-name&gt;</code></dt>
 <dd>The name of another counter style, specified as a {{cssxref("&lt;custom-ident&gt;")}}. 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("&lt;custom-ident&gt;")}}。使用了这个值后，计数器将以被指定的样式名的形式读出，和声明了 {{cssxref("fallback")}} 的效果类似。如果被指定的样式不存在，<code>speak-as</code> 将回退为<code>auto</code>。 </dd>
</dl>

<h3 id="语法_2">语法</h3>

{{csssyntax}}

<h2 id="例子">例子</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;ul class="list"&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
  &lt;li&gt;Five&lt;/li&gt;
&lt;/ul&gt;</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>