媒体控制字符的Unicode ttf/woff或Canvas/SVG

我正在尝试将媒体控件字符输出为HTML实体，以便使用CSS

color

属性为多个主题设置样式。像往常一样，反对者在邮件列表中占主导地位，因此我们有数千个无用的Unicode字符，但没有公认的媒体控制字符（显然）

以下是我试图在Firefox和Chrome中输出但未成功的HTML实体

<span>&#9208; - &#x23f8;</span>
<span>&#9209; - &#x23f9;</span>
<span>&#9204; - &#x23f4;</span>
<span>&#9205; - &#x23f5;</span>
<span>&#9197; - &#x23ed;</span>
<span>&#9198; - &#x23ee;</span>

⏸；-⏸；
⏹ - ⏹；
⏴ - ⏴；
⏵ - ⏵；
⏭ - ⏭；
⏮ - ⏮；

我将所有页面都作为UTF-8提供，并尝试过使用一些

字体系列

字体，如Segoe，尽管我试图找到真正免费使用的字体（ttf/woff），但我应该这样做

---

总的要点

我过去使用的一个小图像，我正在尝试模仿

游戏：空的右向三角形

[]暂停：两个垂直长的空矩形

[]停止：空方块

||>下一轨道：[空（非填充）右向三角形，右侧有一个空条

---

我做了很多研究，试图让Unicode字符尽可能地保持简单

…虽然如果没有可靠的Unicode字符/字体组合，我愿意使用Canvas/SVG来绘制图像

---

最好

如何插入媒体密钥的Unicode字符（如有必要，使用特定的跨平台或ttf/woff字体）

或者

画布/SVG绘制字符并使用CSS

color

property设置样式所需的最小代码是什么

第三偏好

---

如何使用开源或免费软件（在Windows上）创建具有特定字符的ttf/woff字体？如果我走这条路，我会很高兴地在一些第三方字体网站上提供字体说明。

经过一点研究后，有人建议使用很棒的字体。我不喜欢使用CSS内容，除了某些罕见的开发相关条件外，所以我使用工具复制/粘贴字符来获取它们的数字实体。经过测试在IE 11、Firefox 31、Opera 12.1、Chrome 37和Android 4.1上的Firefox/Chrome上

CSS

@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

HTML

<p>
&#xf049;
&#xf048;
&#xf04a;
&#xf04b;
&#xf04c;
&#xf04e;
&#xf051;
&#xf050;
</p>

；
；
；
；
；
；
；
；