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 屬性來定義此資訊內容的聽覺呈現方式。
正式定義
正式語法
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 |
瀏覽器相容性
載入中…
另見
@counter-style規則speak-as描述符- CSS 計數器樣式模組
- CSS 列表和計數器模組
- Web Speech API