发表新帖
发表新帖

Detect browser character support in javascript?

后端 未结
关注
4 1991
迷失自我
迷失自我 2020-11-28 12:19

I\'m working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:

♯
相关标签:
4条回答
  • 没有蜡笔的小新
    2020-11-28 13:01

    Add this to your HTML

    <head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

</head>

    And check to see if IE and Safari render the page right.

    0 讨论(0)
  • 悲&欢浪女
    2020-11-28 13:02

    "Browser support" is not the problem here. You should be serving your files as UTF-8*, and use the appropriate characters rather than the HTML entities.

    • Unicode sharp symbol: ♯ (U+266F)
    • Unicode flat symbol: ♭ (U+266D)

    You should also make sure to save your files in UTF-8 (and not, say, ASCII or ISO-8859-1).

    See also: the must-be-mentioned Joel on Software: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!).

    *I'm not a Rails guy, but I think it does this by default.

    0 讨论(0)
  • 后悔当初
    2020-11-28 13:17

    Rather than mucking around with JavaScript, what you should be doing instead is using css's unicode-range:

    @font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  local("Segoe UI Symbol"),
        local("Symbola"),
        url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+266F, U+266D; /* Define the available characters */
}

body {
  font-family: 'MyWebFont', Arial;
}
    &#9839;
&#9837;
Normal text

    In the local blocks, define fonts that people might have installed locally and contain the symbols you want (like Window's Segoe UI Symbol). Then define a web font (I suggest Symbola) containing the symbol you want to show.

    The unicode-range directive tells supporting browsers (IE9 and up) not to download the font unless the specified symbols are present on the page (You can find their unicode number by searching Unicode-Tables.)

    If they have the font already, they won't download it. If the symbol(s) aren't present on the page and your browser isn't older than dirt, the font won't be downloaded. It'll only be downloaded when it is needed.

    (If you still want to support old IE, use fontsquirrel to generate your initial @font-face statement, then add the local and unicode-range parts yourself.

    0 讨论(0)
  • 后悔当初
    2020-11-28 13:23

    If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.

    <div style="visibility:hidden">
  <span id="char-to-check">&#9839;</span>
  <span id="not-renderable">&#xfffd;</span>
</div>
<script>
  alert(document.getElementById('char-to-check').offsetWidth ===
        document.getElementById('not-renderable').offsetWidth
        ? 'not supported' : 'supported');
</script>

    You should make sure that the DIV is not styled using a fixed font.

    0 讨论(0)
 看不清?
提交回复
热议问题