Music Theory Symbols

HTML

<p>
  Accidentals: B<span class="theorysymbol accidentalFlat"></span><span class="visuallyhidden">b</span> major , F<span class="theorysymbol accidentalSharp"></span><span class="visuallyhidden">#</span> minor, etc.
</p>
<p>
  Figured bass: V<span class="figbass"><span class="num">#6</span><span class="visuallyhidden">/</span><span class="num">&nbsp;4</span><span class="visuallyhidden">/</span><span class="num">&nbsp;3</span></span>, V<span class="figbass"><span class="num">6<span class="dashbefore"></span>5</span><span class="visuallyhidden">/</span><span class="num">4<span class="dashbefore"></span>3</span></span>, etc. ii<span class="figbass"><span class="num">6</span><span class="visuallyhidden">/</span><span class="num">5</span></span> chord
</p>
<p>
  Scale degrees: <span class="scaledegree">3</span> <span class="scaledegree">2</span> <span class="scaledegree">1</span>
</p>
<p>
Time signatures: <span class="timesig"><span class="num">3</span><span class="visuallyhidden">/</span><span class="num">4</span></span>
</p>

CSS

/* IMPORT FONTS (https://github.com/andremount/musictheorytutorial) */

@font-face {
     font-family: BravuraText;
     src: url('https://cdn.rawgit.com/andremount/musictheorytutorial/c7d0ff75/BravuraText.woff') format('woff');
}
@font-face {
     font-family: BravuraText_figuredbass;
     src: url('https://cdn.rawgit.com/andremount/musictheorytutorial/c7d0ff75/BravuraText_figuredbass.woff') format('woff'), url('https://cdn.rawgit.com/andremount/musictheorytutorial/c7d0ff75/BravuraText_figuredbass.ttf') format('truetype');
}
@font-face {
     font-family: TimesNewRoman_scaledegrees;
     src: url('https://cdn.rawgit.com/andremount/musictheorytutorial/c7d0ff75/TimesNewRomanScaleDegrees.woff') format('woff'), url('https://cdn.rawgit.com/andremount/musictheorytutorial/c7d0ff75/TimesNewRomanScaleDegrees.ttf') format('truetype');
}

/* THEORY SYMBOLS */

.theorysymbol {
     font-family: BravuraText;
}
.accidentalFlat::before, .accidentalSharp::before, .accidentalNatural::before, .accidentalDoubleSharp::before, .accidentalDoubleFlat::before {
     font-size: 1.5em;
     position: relative;
     top: 0.25em;
     display: inline-block;
     line-height: 0.5em;
}
.accidentalFlat::before {
     content: "\e260";
}
.accidentalNatural::before {
     content: "\e261";
}
.accidentalSharp::before {
     content: "\e262";
}
.accidentalDoubleSharp::before {
     content: "\e263";
}
.accidentalDoubleFlat::before {
     content: "\e264";
}
.noteDoubleWhole::before {
     content: "\e0a0";
}
.csymDiminished::before {
     vertical-align: super;
     font-size: 50%;
     content: "\e870";
}
.csymHalfDiminished::before {
     vertical-align: super;
     font-size: 50%;
     content: "\e871";
}
.csymAugmented::before {
     vertical-align: super;
     font-size: 50%;
     content: "\e872";
}

/* FIGURED BASS AND TIME SIGNATURES */

.figbass, .timesig {
     display: inline-flex;
     flex-direction: column;
     position: relative;
     height: 1em;
     font-family:...