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

Question

我尝试将媒体控制字符输出为HTML实体，以便可以使用CSS color属性为多个主题设置样式。像往常一样，nay-sayers统治着邮件列表，所以我们有数千个无用的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提供服务并尝试弄乱了一些font-family字体，例如Segoe，尽管我试图找到真正免费使用的字体（ttf / woff）走那条路。

---

一般要点......

我过去使用过的一个小图片，我试图模仿......

＆LT; || Prevous Track：空的（未填充的）左侧三角形，右侧有一个空栏。

|＆GT; PLAY：面向右侧的三角形。

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

[]停止：空方块。

||＆GT;下一曲目：[空（未填充）右向三角形，右侧有一个空条。

---

我已经做了很多研究，试图让Unicode字符尽可能简单...

fileformat.info/info/unicode/char/23ee

fileformat.info/info/unicode/char/23f5

fileformat.info/info/unicode/char/23f8

fileformat.info/info/unicode/char/23f9

fileformat.info/info/unicode/char/23ef

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

---

优选地

如何插入媒体密钥的Unicode字符（如果需要，使用哪些特定的跨平台或ttf / woff字体）？

替代地

Canvas / SVG绘制字符然后用CSS color属性设置样式所需的最小代码是什么？

高等教育偏好

如何使用开源或免费软件（在Windows上）创建具有我想要的特定字符的ttf / woff字体？如果我走这条路线，我会乐意在某些带有路线的第三方字体网站上提供该字体。

Answer 1

经过一些研究，有人建议使用具有media characters的Awesome Font。除了某些罕见的开发相关条件之外，我不喜欢使用CSS内容，因此我使用HTML Escape工具复制/粘贴字符来获取其数字实体。在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>