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

标签 google-chrome firefox unicode microsoft-edge opera

目前,我已经创建了一个 HTML 文件,显示 Unicode 表中的一些四舍五入的数字 Unicode table from 2000 to 2FFF

enter image description here

enter image description here

enter image description here

你可以看到,在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>

当我使用不同的用户显示此文件时,我没有获得与维基百科相同的结果(请参阅上图)。有些必须大时圈得小,有些则太大。


关于歌剧

enter image description here

所有的圈子都......小。
只有 0x2780 和 0x278A unicode 字符才能正确显示!
得分:2/7


Chrome 浏览器上

enter image description here

0x2776很小,而且一定很大!
0X24FF 太大了!
得分:5/7


Edge Chromium 浏览器上

enter image description here

与 Opera 浏览器一样
所有的圈子都……很小。
只有 0x2780 和 0x278A unicode 字符才能正确显示!
得分:2/7


Edge Chromium 浏览器上(Cannary = 测试版本)

enter image description here

Chrome 浏览器相同
0x2776很小,必须很大!
0X24FF 太大了!
得分:5/7


Firefox 浏览器上

enter image description here

字符 0X24EA、0x2A60 和 0x24EB 很小,而不是像 0x2776 和 0x24FF 这样大!
得分:4/7


Safari 浏览器上

我没有苹果电脑,不可能下载Windows版本!
得分:0/7


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


enter image description here

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

最佳答案

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

ArialFont

但是,如果我将字体更改为 Calibri(简易设置 > 转至浏览器设置 > 高级 > 外观 > 自定义字体 > 标准字体 > Calibri),大小其中一些字符立即发生变化:

CalibriFont

这是因为所呈现的字符大小是样式问题,由字体设计者确定。 Unicode 标准中没有任何内容规定(例如) 应呈现为大于 ,并且 OP 中使用的描述性术语 (分别为“black large”和“blacksmall”)与 Unicode 规范无关。

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

Calibri 的字体设计者选择将 封闭字母数字 block 中的字符呈现为大于 Dingbats block 中的某些字符,并且Arial 的字体设计者没有。

因此,没有明确正确或不正确的方式来呈现这些字符。只需选择一种能够以适合您需求的方式呈现它们的字体即可。

关于google-chrome - 什么是 ROUNDED-UNICODE 字符的正确显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61396015/

相关文章:

javascript - Firefox DOMContentLoaded 和加载事件在 textarea 中的大内容上非常慢

unicode - 如何在 ColdFusion 中查找/替换 �(unicode 替换字符)?

javascript - 如何在 chrome 浏览器中禁用 pepflashplayer.dll

c# - 获取非 GDI 应用程序中的插入符位置

xml - 带绝对值的 XSLT 条件测试

html - Firefox 在输入文本和提交中添加 2px 额外填充

java - Unicode 未在 Java 中进行翻译

java - 将字符串转换为 unicode

javascript - 通过 JavaScript 加载 Javascript 引用并立即从控制台调用它

java - Chrome/Firefox 和 Jetty HTTPS