html特殊字符UTF-8

Question

i want to design my own video player. I want to add this special character as a "volume"-button: 🔉 http://www.fileformat.info/info/unicode/char/1f509/index.htm . But it always shows a weird rectangle with the number 01F509.

Whats wrong ?

greetings

Answer 1

To avoid encoding issues, try including the character in your HTML code using the hexadecimal entity notation: &#x1F509 ; then make sure that the font you are using contains this character, else you'll see a rectangle in place of the character.

You may create your own font with the desired character using tools such as http://icomoon.io

Also note that some browsers have issues displaying characters outside of the range 0000 to FFFF ( plane 0 of the Basic Multilingual Plane (BMP) ). I have experienced the issue with Safari on Windows and IE <= 8. So try avoiding this range if you want to support all browsers.

Answer 2

When you see a weird rectangle with the number 01F509, it means that the browser has correctly recognized the character but cannot display it due to lack of glyph for it. Either the system has no font containing a glyph for the character, or the character is unable to use such a font, due to a browser bug. For generalities, see my Guide to using special characters in HTML .

The Fileformat.info page cited has a link to a list of fonts that support the character . The list is short: Quivira, Segoe UI Emoji, Segoe UI Symbol, Symbola. (LastResort is not a real font.)

Segoe UI fonts are proprietary and available only in relatively new versions of Windows. Besides, there fonts exist in several version, and this character seems to be a rather recent addition.

This means that you wold need to use Quivira or Symbola as a web font (downloadable font). If you choose to do that, use eg http://www.fontsquirrel.com/ to generate the font files and the CSS code for using them. Note that both Quivira and Symbola rather large fonts, so using them just to get one glyph is a bit disproportionate.

At this point, it is rather obvious that some other approach is most probably better, eg using an image in sufficient size and reducing it according to font size by setting its height in em units.