자바스크립트를 활성화 해주세요

스타일 구분 기호

분음 부호의 굵게, 색상 추가 및 글꼴 변경!

 ·  ☕ 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"; /* 현재 DejaVu Sans는 분음 부호 위치에서 가장 높은 정확도를 가지고 있다. */
      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 지점에서 간단한 테스트 페이지를 복제할 수 있습니다.



주의사항 : 네이버 파파고 신경번역

공유하기

마음에 드셨나요? 이 게시물을 공유하고 아래에 댓글을 남기고 선물을 보내주세요! (새 탭/창에서 열립니다)