说话

Avatar of Geoff Graham
Geoff Graham 发布

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!

CSS 中的 speak 属性用于指定浏览器是否应该朗读它所读取的内容,例如通过屏幕阅读器。

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

speak 的值

  • auto:只要元素不是 display: block 且是 visibility: visible,文本就会被声音朗读。
  • never:文本不会被声音朗读。
  • always:文本将被声音朗读,无论 display 值或 speak 的祖先值如何。

speak-as 的值

speak 相关,因为它涉及文本的朗读方式。

  • normal:采用浏览器的默认 speak 设置。
  • spell-out:指示浏览器拼写属性内容,而不是说出完整单词。
  • digits:逐个朗读数字,例如 69 将被朗读为“六 九”。不错。
  • literal-punctuation:拼写出标点符号(例如分号),而不是将其视为停顿。
  • no-punctuation:完全跳过标点符号。

如何“样式化”语音?

speak 属性与其说是为屏幕阅读器样式化语音,不如说是调整使用屏幕阅读器时网站可访问性的体验。

我们很容易将语音样式化联想到性别、音调、口音以及我们自己在现实生活中说话的其他方式,但 speak 并非如此。 这种级别的控制正是 CSS 语音模块中正在考虑用于 voice 的内容。

更多信息

浏览器支持

截至撰写本文时,尚不支持。 似乎 Opera 曾经原生支持该属性,使用 -xv- 前缀,然后再与 Chrome 使用的 Blink 渲染引擎合并。

MDN 谈到了与计数器样式相关的 speak-as

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;    
}

在更新本文时,Firefox 支持该功能