html - 在伪类 unicode 字符在 mobile/iOS 上出现不同之前

Question

我对 CSS 伪类 :before 有疑问。设置非常简单:

.homepage .slick-dots li button:before {
   font-size: 30px !important;
   content: "○" !important;
   color: #e41b13;
   opacity: 1;
}

.homepage .slick-dots li.slick-active button:before {
   font-size: 30px !important;
   content: "●" !important;
   color: #e41b13;
   opacity: 1;
}

unicode 字符是 U+25CB (9675) WHITE CIRCLE 和 U+25CF (9679) BLACK CIRCLE。无论出于何种原因，它在移动设备上的规模看起来完全不同:

有人知道为什么吗？谢谢

Answer 1

为特定字符提供字形的每种字体在大小和形状上可能看起来不同。

大概在您正在测试的“移动”浏览器上，浏览器使用的默认字体不提供 U+25CB 或 U+25CF 之一的字形，因此浏览器回退到不太喜欢的字体获取该字符的渲染图，并且在该字体中圆圈的大小不同。

一般来说，图形字符的大小在不同平台(桌面和移动设备)之间会有很大差异，因为不同的人安装了不同的字体。最坏的情况是它们可能根本没有字形。如果您需要图形保真度，请嵌入自定义字体或使用图像。