ウェブ上で英語の発音記号を表示する方法について、いまだ決定版はないように思います。
発音記号の表記方法には、辞書ごとにざまざまな流儀があり、特にアクセントの表示方法に、外国の辞書(英英辞典)などに多い「音節の前に短い縦棒を置く」方法(国際音声記号 (IPA) 方式)と、日本の英和辞典に多い、「母音の上にアクセント記号を打つ」方法がありますが、後者の方法(日本式)の場合が特に問題となります。
発音記号として使えそうな文字は、Unicode上に散在してますが、わかりやすくまとまっているわけではありません。フォントによっては意図通りにきれいにそろわないこともあります。
また私の見た限り、母音の上に第一アクセント、第二アクセントを付した文字が、すべての母音記号について完備されているわけではないようです。
アクセント記号については、コード番号で U+0300,0301 があって、これをアクセントなしの記号に続けて入力すると、フォント(と表示環境)によってはうまくアクセント付きの記号になります。「弾き音の t(t̬) 」については U+032C です。
WSD に使用した発音記号などを、Unicodeで表現しようとした一覧を試しに示してみました。
abdefghɪjklmnoprstʊvwxz əʌɑæɔiu ɚ áàéèíìóòúùǽὰά ʃʒθðŋ
Unicodeにある文字です。
ɪ と ʊ をIPA式に置き換えています。私にとっては、ʊ という文字には形に若干違和感があります(WSDでは、大文字のUをそのまま小文字にしたような形を採用しています)。
úː:˸ 長音記号の例です。環境にもよりますが、本来の記号 ː できれいに表示されないときは、長音は半角コロン : にしてもよいと思います。
ʤʧ dʒtʃ 前者は2文字、後者は4文字です。
ˈˌ 国際音声記号 (IPA) のアクセント記号。英英辞典スタイルです。
以下がきれいに見えるかは環境に依存すると思います。
t̬ U+032C
ʌ́ʌ̀ U+0301,0300
ʊ́ʊ̀ U+0301,0300
ɔ́ɔ̀ U+0301,0300
ǽæ̀ U+0301,0300
ɚ́ː ɚ̀ː U+0301,0300
ə́ːr ə̀ːr U+0301,0300 r はエディタでイタリックにしています。
ɪ́ɪ̀ U+0301,0300 ɪ と i の区別ですが、アクセントがつくと、どちらも í ì を使って、たとえば í(ɪ の第一アクセント表示)と íː(iː の第一アクセント表示)でなんとなく区別できそうです。
はじめからイタリック体になっている文字はないようなので、「斜めの ə」などは、エディタでフォントをイタリックにするか、あるいは括弧に入れることになります。
エディタでイタリックにした例です。
dhjkprtə
これも環境により、エディタでイタリックにしても、うまく斜め表示されないことがあります(私の環境では、「斜めの ə」は、うまく表示されていないようです)。
ちなみに WSD(印刷版)の発音記号は、自作のフォントによります。独自フォントなので、「弾き音の t のイタリック体」などもあらかじめ用意されていますが、入力編集にはPCにフォントがインストールされている必要があります。
<追記>
Unicodeの組み合わせ文字や、ə のイタリック体などがどう表示されるかは、入力者側の選んだフォントと、各端末の表示環境の両者に依存するようです。
上記の記事中の発音記号フォントは、すべてエディタのデフォルトの Open Sans です。
参考までに、エディタで Helvetica を選んだ場合、次のようになります。
t̬ U+032C
ʌ́ʌ̀ U+0301,0300
ʊ́ʊ̀ U+0301,0300
ɔ́ɔ̀ U+0301,0300
ǽæ̀ U+0301,0300
ɚ́ː ɚ̀ː U+0301,0300
ə́ːr ə̀ːr U+0301,0300
ɪ́ɪ̀ U+0301,0300
dhjkprtə
当ブログでは、発音記号の表示において、原則的に Open Sans の採用を維持しつつ、私の環境でとくに表示に不満のある、/ə/ /t̬/ /ʊ́, ʊ̀/ について、個別にフォントを Helvetica の /ə/ /t̬/ /ʊ́, ʊ̀/ に置き換えて、レイアウトの崩れを改善することとしました。
<追記2>
/ɪ/ のアクセント表記 /ɪ́/ /ɪ̀/ についても、従来の/í/ / ì/ 表記に替えて、Helvetica を用いて /ɪ́/ /ɪ̀/ と表記することとしました。
(2020年8月20日)