Css 神秘的额外字母空间出现在文字中

我有一个特定于环境的CSS问题，我正在努力纠正。当我在Chrome上测试时，一切正常。然而，在我们的应用程序使用的环境中（基于铬），当元素获得焦点时，“喜剧”一词显示为“Comedy”。你可以想象这个元素类似于你在Netflix应用程序上看到的海报。其中的文本居中对齐到一个矩形框，一旦选定，该框将放大并勾勒出轮廓。只有当元素具有焦点时，才会出现显示额外字母空间的问题

.poster {
    height: 117px;
    width: 208px;
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-left 3px;
    margin-top: 0px;
    margin-bottom: 2px;
    white-space: normal;
}

.poster:focus {
    z-index: 3;
}

.poster-content {
    height: 100%;
    width: 100%;
}

.poster:focus .poster-content {
    -webkit-transform: scale(1.1325);
    transform: scale(1.1325);
    border: 2px solid #0a141a;
    outline: 5px solid #00629b;
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.8);
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="poster">
    <div class="poster-content" style="background-image: none;">
        <div class="poster-title">Comedy</div>
    </div>
</div>

.poster{
高度：117px；
宽度：208px；
位置：相对位置；
显示：内联块；
右边距：2px；
边缘左3倍；
边际上限：0px；
边缘底部：2px；
空白：正常；
}
。海报：focus{
z指数：3；
}
.海报内容{
身高：100%；
宽度：100%；
}
。海报：焦点。海报内容{
-webkit变革：规模（1.1325）；
转变：规模（1.1325）；
边框：2px实心#0a141a；
轮廓：5px实心#00629b；
盒影：0.20px 4px rgba（0,0,0,0.8）；
位置：绝对位置；
框大小：边框框；
溢出：隐藏；
背景位置：中心；
背景重复：无重复；
}
喜剧片

---

注：这不是CSS的全部内容，而只是当按钮聚焦时激活的内容。

非常感谢zgood建议它可能是导致问题的自定义字体。在使用标准字体进行测试后，这不再是一个问题。但是，CSS中的错误来自以下方面：

转变：规模（1.1325）

将上述内容更改为：

转换：比例（1.1）

---

即使仍然使用自定义字体，也要正确缩放图像中的文本。

您能提供一个plunker/jsfiddle吗？我可以，但这可能不会重现问题。这似乎只发生在我们用于应用程序的自定义浏览器中。我希望其他人以前可能遇到过类似的问题，并且知道如何解决它。@JoshuaDannemann这不是自定义浏览器的问题，而不是您的代码的问题吗？然而，我确实遇到了类似的情况，结果是浏览器如何呈现自定义字体的问题。你用什么特别的字体吗？可能就是这样。我们正在应用程序中使用自定义字体。让我测试一下。我可以把它改成标准字体。