CSSのvoice-familyプロパティとは？使い方と指定例をわかりやすく解説

CSSのvoice-familyプロパティとは

voice-familyプロパティは、テキストを音声読み上げする際に使用される音声（ボイス）ファミリを指定するためのCSSプロパティです。値はカンマ区切りの優先順位付きリストとして記述し、先頭の候補から順に、環境で利用可能な音声が自動的に選択されます。

指定できる値

• generic-voice − 汎用的な音声ファミリを指定します。指定可能な値は「male」（男性）、「female」（女性）、「child」（子供）の3種類です。
• specific-voice − 特定の音声インスタンス名を指定します（例：comedian、trinoids、carlos、lani など）。

使用例

以下のコードは、voice-familyプロパティを実装する際の具体的な例です。要素ごとに異なる音声を割り当てることができます。

<style>
    <!--
        h1 { voice-family: announcer, male }
        p.part.romeo { voice-family: romeo, male }
        p.part.juliet { voice-family: juliet, female }
    -->
</style>

ポイント

voice-familyは、フォントを指定するfont-familyプロパティと同じ考え方で設計されています。複数の候補をカンマ区切りで列挙しておくことで、最初の音声が利用できない環境でも、次の候補へフォールバックされ、意図した読み上げスタイルに近い形で再生されます。この例では、見出しh1にはアナウンサー風の男性ボイス、ロミオの台詞部分にはromeo、ジュリエットの台詞部分にはjulietという女性ボイスを割り当てています。