Question

我正在尝试编写一个显示所有字体字符的简单应用。我使用了画布fillText方法，但并未正确绘制所有字符。

以下是代码：

<html>
    <head>
        <meta Content-Type:text/html;charset="utf-8">
        <style>
            div  {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <p id="demo"> HELLO !!!!!!!!!! </p>
        <div>
            <p> Before canvas</p>
            <canvas id="cheli" width="1200px" height="1000px" style="border:1px solid #000000;" ></canvas>
        </div>
        <script>
            var ctx = cheli.getContext("2d");
            ctx.fillStyle = "red";

            ctx.font = "16px arial";

            ctx.fillText(String.fromCharCode(172), 1,1);
            charCode = 33;
            numCharsInLine = 20;
            for (var lines = 0; lines < 30; lines++)
            {
                textToWrite = "";
                for (var index = charCode; index < charCode + numCharsInLine; index++)
                {
                    textToWrite += (index + ": " + String.fromCharCode(index) + ", ");
                }
                ctx.fillText(textToWrite, 10, (lines + 1) * 20);
                charCode += numCharsInLine;
            }

        </script>
    </body>
</html>

未显示第128-160号字符，我不知道原因。有人有想法吗？

Answer 1

十进制数字为128-159，十六进制为80-9F的字符被定义为Unicode标准中的控制字符（具有未指定的效果），这是HTML和JavaScript基于字符概念的基础。字符160十进制，A0十六进制，是无中断空格，具有空字形。

Answer 2

并且正如所承诺的那样，这是我们使用的独特网络字符范围覆盖范围到目前为止完美无缺：

    var _uniqueWebCharCodesConverter = {
        //see: http://www.i18nqa.com/debug/table-iso8859-1-vs-windows-1252.html

        128: "\u20AC", //€  Euro Sign
        129: "", // UNASSIGNED
        130: "\u201A", //‚  Single Low-9 Quotation Mark
        131: "\u0192", //ƒ  Latin Small Letter F With Hook
        132: "\u201E", //„  Double Low-9 Quotation Mark
        133: "\u2026", //…  Horizontal Ellipsis
        134: "\u2020", //†  Dagger
        135: "\u2021", //‡  Double Dagger
        136: "\u02C6", //ˆ  Modifier Letter Circumflex Accent
        137: "\u2030", //‰  Per Mille Sign
        138: "\u0160", //Š  Latin Capital Letter S With Caron
        139: "\u2039", //‹  Single Left-Pointing Angle Quotation Mark
        140: "\u0152", //Œ  Latin Capital Ligature OE
        141: "", // UNASSIGNED
        142: "\u017D", //Ž  Latin Capital Letter Z With Caron
        143: "", // UNASSIGNED
        144: "", // UNASSIGNED
        145: "\u2018", //‘  Left Single Quotation Mark
        146: "\u2019", //’  Right Single Quotation Mark
        147: "\u201C", //“  Left Double Quotation Mark
        148: "\u201D", //”  Right Double Quotation Mark
        149: "\u2022", //•  Bullet
        150: "\u2013", //–  En Dash
        151: "\u2014", //—  Em Dash
        152: "\u02DC", //˜  Small Tilde
        153: "\u2122", //™  Trade Mark Sign
        154: "\u0161", //š  Latin Small Letter S With Caron
        155: "\u203A", //›  Single Right-Pointing Angle Quotation Mark
        156: "\u0153", //œ  Latin Small Ligature OE
        157: "", // UNASSIGNED
        158: "\u017E", //ž  Latin Small Letter Z With Caron
        159: "\u0178" //Ÿ  Latin Capital Letter Y With Diaeresis
    }

使用canvas fillText方法时，无法绘制一些arial字符

2 个答案: