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

Question

我试图输出媒体控制字符作为HTML实体，因此可以使用CSS color属性为多个主题设置样式。像往常一样，主宰邮件列表，所以我们有成千上万的无用的Unicode字符，但没有普遍认可的媒体控制字符（显然）。

这里是HTML实体我已经尝试在Firefox和Chrome失败输出...

<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字体，如濑越搞乱尽管我试图找到真正免费使用的字体（ttf/woff），我应该走那条路线。

---

的一般要点...

什么，我在我试图效仿过去曾经使用过的小图像...

< | |上一个轨迹：空的（未填充的）面向左的三角形，右侧有单个空栏。

|> PLAY：空的右向三角形。

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

[]停止：空方块。

||>下一曲目：[空（未填充的）右边的三角形，右边有单个空栏。

---

我已经做了很多的研究试图让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

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

---

最好

如何插入Unicode字符（与特定的跨平台或TTF/WOFF字体，如果需要的话）的媒体键的？

或者

会是怎样的最少的代码我需要的帆布/ SVG绘制的字符，然后用CSS color物业风格呢？

第三偏好

我怎么可以创建一个我想使用开源或免费软件（在Windows上）的特定字符的TTF/WOFF字体？如果我走这条路线，我会很高兴地在某些第三方字体网站上提供带有指示的字体。

Answer 1

经过一些研究后，有人建议使用Awesome Font，它有media characters。我不喜欢使用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>