Search code examples
unicodefont-face

Unicode ttf/woff or Canvas/SVG for Media Control Characters

I'm trying to output media control characters as HTML entities so they can be styled using the CSS color property for multiple themes. As usual nay-sayers dominate the mailing lists so we have thousands of useless Unicode characters but not universally recognized media control characters (apparently).

Here are the HTML entities I've attempted to output in Firefox and Chrome unsuccessfully...

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

I serve all pages as UTF-8 and have tried messing with a few font-family fonts such as Segoe though I'm trying to find truly free-to-use fonts (ttf/woff) should I go that route.

The general gist...

A small image of what I've used in the past that I'm trying to emulate...

Media Controls

<|| Prevous Track: empty (non-filled) left facing triangle with single empty bar on right.

|> PLAY: Empty right-facing triangle.

[][] Pause: Two vertically long empty rectangles.

[ ] Stop: Empty square.

||> Next Track: [empty (non-filled) right-facing triangle with single empty bar on right.

I've done a lot of research trying to get Unicode characters to keep this as simple as possible...

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

...though I'm willing to use Canvas/SVG to draw the images if there is no reliable Unicode characters/font combinations I can use?

Preferably

How do I insert Unicode characters (with which specific cross-platform or ttf/woff fonts if necessary) of the media keys?

Alternatively

What would be the minimal code I'd need for Canvas/SVG to draw the characters and then style them with CSS color property?

Tertiary Preference

How could I create a ttf/woff font with the specific characters I want using open source or freeware software (on Windows)? If I go this route I'll happily make the font available on some third-party font site with directions.

Solution

  • After a bit of research someone suggested using Awesome Font which has media characters. I don't like using CSS content except for certain rare development related conditions so I used the HTML Escape tool copy/paste characters to get their numeric entities. Tested in IE 11, Firefox 31, Opera 12.1, Chrome 37 and on Firefox/Chrome on 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>