Unicode ttf/woff или Canvas/SVG для символов управления носителями

Question

Я пытаюсь выводить управляющие символы мультимедиа как объекты HTML, чтобы их можно было создать с помощью свойства CSS color для нескольких тем. Как обычно, nay-sayers доминируют в списках рассылки, поэтому у нас есть тысячи бесполезных символов 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 шрифтов, таких как Segoe хотя я пытаюсь найти действительно бесплатные шрифты (ttf/woff), если я иду по этому маршруту.

---

Общая суть ...

Небольшое изображение того, что я использовал в прошлом, что я пытаюсь подражать ...

< | | Prevous Track: пустой (незаполненный) левый треугольник с одиночным пустым баром справа.

|> ИГРАТЬ: Пустой правый треугольник.

[] [] Пауза: две вертикально длинные пустые прямоугольники.

[] Остановить: пустой квадрат.

Следующая дорожка: [пустой (незаполненный) правый треугольник с одиночным пустым баром справа.

---

Я сделал много исследований, пытаясь получить символы 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/комбинаций шрифтов, которые я могу использовать?

---

Предпочтительно

Как вставить символы Юникода (с какой конкретно кросс-платформенный или TTF/Woff шрифтов при необходимости) клавиш медиа?

Альтернативно

Что бы минимальный код мне нужно для Canvas/SVG рисовать символы, а затем их стиль с CSS color собственности?

Третичный Предпочтение

Как я мог бы создать TTF/Woff шрифт с конкретными персонажами, которые я хочу, используя с открытым исходным кодом или бесплатное программное обеспечение (в Windows)? Если я поеду по этому маршруту, я с радостью сделаю шрифт доступным на некоторых сайтах сторонних шрифтов с инструкциями.

Answer 1

После небольшого исследования кто-то предложил использовать Awesome Font, который имеет media characters. Мне не нравится использование содержимого CSS, за исключением некоторых редких событий, связанных с развитием, поэтому я использовал символы копирования/вставкидля получения их числовых объектов. Протестировано в IE 11, Firefox 31, Opera 12.1, Chrome 37 и в Firefox/Chrome на Android 4.1.

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>