1. Web
  2. CSS
  3. speak-as

speak-as

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

speak-as CSS 属性用于定义 HTML 内容的朗读方式。一个到三个枚举关键词决定了元素和文本通过听觉技术（如屏幕阅读器和数字助手）渲染的方式。

此属性适用于所有内容，包括伪元素，但通过定义了 speak-as 描述符的 @counter-style 构建的 ::marker 伪元素除外，后者优先于任何继承的 speak-as 属性值。

语法

css
/* single value syntax */
speak-as: normal;
speak-as: spell-out;
speak-as: literal-punctuation;
speak-as: digits;
speak-as: no-punctuation;

/* multiple value syntax */
speak-as: spell-out literal-punctuation;
speak-as: spell-out no-punctuation;
speak-as: digits literal-punctuation;
speak-as: digits no-punctuation;
speak-as: spell-out digits literal-punctuation;
speak-as: spell-out digits no-punctuation;

值

normal

正常的发音规则，标点符号用停顿代替。例如，“Hello, world!”将发音为“Hello（停顿）world（停顿）”。这是默认值。

spell-out

内容逐字拼读。例如，“role”将发音为“r”“o”“l”“e”。

literal-punctuation

标点符号按字面意思拼读。例如，“Hello, world!”将发音为“Hello 逗号 world 感叹号。”

digits

数字按单个数字发音。例如，“31”将发音为“三 一”。

no-punctuation

内容正常发音，不带任何标点符号。例如，“Hello, world!”将发音为“Hello”“world”。

注意：speak-as 属性的支持有限，并且在不同的辅助技术（如屏幕阅读器或语音合成器）中实现不一致。为确保任何依赖发音的关键信息对广泛受众来说仍然用户友好和可访问，请不要仅仅依靠此 CSS 属性来定义此信息内容的听觉呈现方式。

正式定义

初始值auto
应用于所有元素
继承性是
计算值指定值
动画类型离散

正式语法

speak-as = 
  normal                                              |
  spell-out || digits || [ literal-punctuation | no-punctuation ]

示例

HTML

html
<p class="normal">Hello, world! I'm 25.</p>
<p class="spell-out">Hello, world! I'm 25.</p>
<p class="literal-punctuation">Hello, world! I'm 25.</p>
<p class="no-punctuation">Hello, world! I'm 25.</p>
<p class="digits">Hello, world! I'm 25.</p>
<p class="multi">Hello, world! I'm 25.</p>

CSS

css
.normal {
  speak-as: normal;
}

.spell-out {
  speak-as: spell-out;
}

.literal-punctuation {
  speak-as: literal-punctuation;
}

.no-punctuation {
  speak-as: no-punctuation;
}

.digits {
  speak-as: digits;
}
.multi {
  speak-as: literal-punctuation digits;
}

规范

规范
CSS Speech Module Level 1
# speaking-props-speak-as

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面由 MDN 贡献者 最后修改于 。

在 GitHub 上查看此页面 • 报告此内容的问题