google-chrome - ROUNDED-UNICODE 字符的正确显示是什么？

问题描述

目前，我创建了一个HTML文件，显示rounded number从2000 到 2FFFUnicode的表 Unicode 表中的一些

您可以在 Opera 浏览器上看到（在所有浏览器上都是一样的），一些数字以大圆圈四舍五入，而另一些则以小圆圈四舍五入。

然后我创建了以下 HTML 文件来显示其中的一些 Unicode

<html>
    <head>
        <style type="text/css">
            .unicode
                {
                font-size: 32px;
                cursor: pointer;
                min-width: 56px;
                display: inline-block;
                text-align: center;
                }
        </style>
    </head>
    <body>
        <table>
            <tr><td>0x2780</td><td><span class="unicode">&#x2780;</span></td><td> white small</td></tr>
            <tr><td>0x278A</td><td><span class="unicode">&#x278A;</span></td><td> black small</td></tr>
            <tr><td>0x24EA</td><td><span class="unicode">&#x24EA;</span></td><td> white large</td></tr>
            <tr><td>0x2460</td><td><span class="unicode">&#x2460;</span></td><td> white large</td></tr>
            <tr><td>0x2776</td><td><span class="unicode">&#x2776;</span></td><td> black large</td></tr>
            <tr><td>0x24EB</td><td><span class="unicode">&#x24EB;</span></td><td> black large</td></tr>
            <tr><td>0x24FF</td><td><span class="unicode">&#x24FF;</span></td><td> black large</td></tr>
        </table>            
    </body>
</html>

当我使用不同的用户显示此文件时，我没有获得与维基百科相同的结果（参见上图）。有些圈子必须很大，有些圈子太大，有些圈子太大。

歌剧

所有的圈子……都很小。
只有 0x2780 和 0x278A Unicode 字符正确显示！
得分：2/7

在Chrome浏览器上

0x2776 很小，必须很大！
0X24FF 太大了！
得分：5/7

在Edge Chromium浏览器上

与 Opera 浏览器一样，
所有的圈子都……很小。
只有 0x2780 和 0x278A Unicode 字符正确显示！
得分：2/7

在Edge Chromium浏览器上（Cannary= 测试版本）

由于Chrome浏览器
0x2776 很小，而且必须很大！
0X24FF 太大了！
得分：5/7

在Firefox浏览器上

字符 0X24EA、0x2A60 和 0x24EB 比 0x2776 和 0x24FF 大！
得分：4/7

在Safari浏览器上

我没有任何苹果电脑，更不可能下载 Windows 版本！
得分：0/7

问题：如何在所有浏览器上显示具有正确圆圈大小的四舍五入数字？

在上一张图片中（可在另一个选项卡中加载以进行缩放），您可以快速比较字体（Arial、Cambria Math 和 Calibri）和浏览器（Opera、Chrome、Firefox 和 Edge Chromium）。

标签： google-chromefirefoxunicodemicrosoft-edgeopera

HTML 文件中指定的字符的呈现取决于所使用的字体而不是浏览器，并且很容易确认这一点。例如，如果我使用Arial字体渲染 HTML 文件中的字符，我会在 Opera 中得到与您类似的结果：

但是，如果我将字体更改为Calibri ( Easy Setup > Go to browser settings > Advanced > Appearance > Customize Fonts > Standard Font > Calibri )，其中一些字符的大小会立即更改：

这是因为被渲染的字符的大小是风格问题，由字体设计者决定。Unicode 标准中没有任何规定（比如说）❶应该呈现大于➊，并且 OP 中使用的描述性术语（分别为“黑色大”和“黑色小”）与 Unicode 规范无关。

还值得注意的是，U+2700 到 U+27BF 范围内的字符构成Dingbats Block，而 U+2460 到 U+24FF 范围内的字符构成封闭字母数字块。来自不同块的字符恰好在视觉上相似，例如➀（➀DINGBAT CIRCLED SANS-SERIF DIGIT ONE'）和①（①'CIRCLED DIGIT ONE'）根本没有真正的关系。

Calibri的字体设计者选择在Enclosed Alphanumerics Block中渲染比Dingbats Block中的一些更大的字符，而Arial的字体设计者却没有。

因此，没有绝对正确或不正确的方式来渲染这些字符。只需选择一种以适合您需要的方式呈现它们的字体。

google-chrome - ROUNDED-UNICODE 字符的正确显示是什么？

问题描述

解决方案

推荐阅读