我对 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
。无论出于何种原因,它在移动设备上的规模看起来完全不同:
有人知道为什么吗?谢谢
最佳答案
为特定字符提供字形的每种字体在大小和形状上可能看起来不同。
大概在您正在测试的“移动”浏览器上,浏览器使用的默认字体不提供 U+25CB 或 U+25CF 之一的字形,因此浏览器回退到不太喜欢的字体获取该字符的渲染图,并且在该字体中圆圈的大小不同。
一般来说,图形字符的大小在不同平台(桌面和移动设备)之间会有很大差异,因为不同的人安装了不同的字体。最坏的情况是它们可能根本没有字形。如果您需要图形保真度,请嵌入自定义字体或使用图像。
关于html - 在伪类 unicode 字符在 mobile/iOS 上出现不同之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29254394/