字母间距不适用于仅限桌面的移动浏览器

Question

我在＆＃34; REM＆＃34;中使用尺寸。令我惊讶的是，在移动浏览器，Android和iOS中，字母间距不起作用。桌面工作正常。

CSS

#header{
 position: relative;
 text-align: center;
 overflow: hidden;
 height: initial;
}

#header h1{
 position: absolute;
 font-size: 12rem;
 right: 3rem;
 margin: 0;
 text-shadow: 0 4px #570b0b;
 letter-spacing: -0.7rem; /* Work Only Desktop */
}

桌面：

移动：

Answer 1

尝试word-spacing ...虽然我总是使用ems：

#header h1{
 position: absolute;
 font-size: 12rem;
 right: 3rem;
 margin: 0;
 text-shadow: 0 4px #570b0b;
 letter-spacing: -0.7rem; /* Work Only Desktop */
 word-spacing: -0.7rem;
}

<强> * UPDATE ：

我看到你使用webfont检查这个并查看它是否有用：

Webkit, letter-spacing issues with webfonts

唯一的答案是：

• 将REM更改为EM并测试

• 网络字体 - 确保您拥有svg last