ios chrome上大小不同的unicode圆圈答案

【问题标题】：unicode circles with varying size on ios chromeios chrome上大小不同的unicode圆圈
【发布时间】：2019-10-30 15:49:01
【问题描述】：

当我注意到在 ios chrome 上白色圆圈比黑色圆圈大时，我在我的项目中使用了黑白圆圈。

● - U+25CF ○ - U+25CB

在桌面环境中，圆圈看起来大小相同，但高度略有不同。差异不明显。

我正在尝试在 ios chrome 上使这些圆圈大小相同。

我觉得我已经消除了所有变量，并且浏览器负责这些圆圈的不同大小。

【问题讨论】：

这取决于字体。在某些字体中，它们可能具有相同的大小，而在其他字体中则不同。对于这些形状应该有多大，实际上并没有任何规定。因此解决方案是找到一种尺寸与广告使用的网络字体相同的字体。

【解决方案1】：

实际上，就 unicode 而言，所有字符都依赖于字体。当某个字符不可用时，它会从备用字体中挑选出来。

如果您没有配置自定义字体，或者如果这些字符在您选择的字体中不可用，则不同大小的圆圈使用 chrome/ios 使用的默认字体。

因此，您有两种方法：要么找到一种字体，其字符以适合您的方式绘制，然后强制执行，要么放弃对这些字形使用 unicode 字符并改用内联图像。

您可以使用可在 HTML 标记本身中编码的 SVG 绘图，这将确保外观一致。

【讨论】：

我真的希望 SVG 能够无缝地为此工作，但它不继承父 CSS 颜色（除非嵌入）的事实让我感到厌烦stackoverflow.com/questions/13000682/… 这是一种耻辱。