html - Unicode 字符字体大小不适用于 chrome 移动设备。为什么？

Question

我刚刚将我的网站加载到服务器上，并注意到尽管样式应用于开发人员工具中的 unicode 字符以及我平板电脑上的在线样式，但从移动设备 (chrome) 查看时未应用大小属性。

参见 http://www.perth-soakwells.net举个例子。作为引用， Logo 中的 e 是 7em。

有谁知道为什么或有其他方法。我将圆圈用作 Logo 的一部分。请参阅上面的链接。

下面的代码。

.logo_circle{
font-size: 9em;
position: absolute;
top: 0; 
left: 0; 
color: white;
font-family: "Arial", "Lucida Sans Regular", "DejaVu Serif", "Verdana", "Unifont", "Trebuchet MS";}

body{background-color:black;}

<div class="logo_circle">&#9679;</div>

Answer 1

size 属性当然适用于我。但是， Logo 在我的移动浏览器上看起来仍然与在 Windows 桌面上看起来不一样，而且在我的 Linux 桌面上看起来又不一样了。

这是因为您选择的字体(首选 Arial)并非随处可用。在没有该字体的平台上，您会得到一些不同的东西，字符 U+25CF Black Circle ● 的确切形状和半径因字体而异。

您可以在字符中嵌入网络字体以尝试获得一致的渲染，或者更好的做法是将 Logo 创建为包含固定路径的 SVG 图像，而不是依赖于文本。