JavaScriptを有効にしてください

スタイリング·ダイアクリティックス

ダイアクリティックスの太字、色の追加、フォントの変更!

 ·  ☕ 3 読む分  · 
❄️ 謝雪矢(ゆきや)
Fediverse Follow

アクセント記号とも呼ばれる発音区別符号に色を付ける方法があるかどうか気になるなら、あなたは正しい場所にいます!なぜなら、答えは「はい」で、方法をお教えします。

  1. 次のようなCSSスタイルを作成します。

    1
    2
    3
    4
    5
    6
    
    .diacritics {
      color: hsla(0deg, 100%, 50%, 1);
      color: hwb(0deg 0% 0% / 100%);
      font-family: "DejaVu Sans"; /* 現在、ダイアクリティカルマークの位置決めの精度はDejaVuSansが最も高い。 */
      font-weight: bold;
    }
    
  2. diacriticsクラス内にダイアクリティカルを配置します。

    1
    
    <span class="diacritics"></span>
    

できました!

次に例を示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
bata<span class="diacritics">̀</span>
panibugho<span class="diacritics">̂</span>
ara<span class="diacritics">́</span>w–a<span class="diacritics">́</span>raw
ke<span class="diacritics">̈</span>tke<span class="diacritics">̈</span>t
sag<span class="diacritics">̃</span>nay or sagn<span class="diacritics">̃</span>ay
pan<span class="diacritics">͠</span>gulo
a<span class="diacritics">̄</span>so
h<span class="diacritics">͞</span>oy
pu<span class="diacritics">̱</span>sà
trab<span class="diacritics">͟</span>aho
  • batà [ba·tà]
  • panibughô [pa·ni·būg·hô]
  • aráw–áraw [a·ráw–á·raw]
  • këtkët [kët·kët]
  • sag̃nay or sagñay [sa·ñgay]
  • pan͠gulo [pa·n͠gu·lo]
  • āso [ā·so]
  • h͞oy [h͞oy]
  • pu̱sà [pu̱·sà]
  • trab͟aho [tra·b͟a·ho]

CodePen経由でも利用できます。 または、私のtest-repo: Noto Diacriticals Gitブランチから簡単なテストページを複製することもできます。



注意:ネイバーPapago神経翻訳

気に入りましたか? この投稿を共有し、下にコメントを残して、 私に贈り物を送ってください! (新しいタブ/ウィンドウで開きます)