Web フォントで音楽記号を表示する

2018年3月8日
- 楽譜

楽譜に使われる記号を Web で表示するには、これまで画像 (SVG 含む) を使うのが一般的でしたが、Cubase や Dorico でおなじみ Steinberg 社が、無償で使える Web フォントを配布していたので、これを使って表示してみます。

https://www.smufl.org/fonts/ から Download Bravura 1.204 (.zip) をクリックして、zip を展開します。その中の woff/BravuraText.woff を Web サーバにコピーします。

記号を表示したいページで、下記のような CSS を記述します。

@font-face {
  font-family: "BravuraText";
  src: url(/blog/fonts/BravuraText.woff); /* 上記でコピーしたファイルの URL */
}
.bravura {
  font-family: "BravuraText";
  font-size: 130%;
  margin: 0 0.3em;
  vertical-align: text-top;
}

では Web ページで <span class="bravura"></span> と書いてみましょう。二分音符が表示されましたか?

記号は https://w3c.github.io/smufl/gitbook/ の 4. Glyph tables で定義されています。

上記の二分音符は 4.13. Indivisual notes に定義されており、ここで U+E1D3 と書かれているので、HTML では  と書きます。

記号の組み合わせは難しそうですが、連桁つきの音符の表示ができたりもします。

 は   や  と同じ音価を持ちます。