在移动/ iOS上伪类unicode字符出现不同之前

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之一提供字形，因此浏览器会回退到不太喜欢的字体得到该角色的渲染，并以该字体圆圈的大小不同。

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