css - 单词中出现神秘的额外字母空间

Question

我有一个特定于环境的 CSS 问题，我正在尝试更正。当我在 Chrome 中测试时，一切正常。但是，在我们的应用程序使用的环境中(基于 Chromium)，当元素获得焦点时，“Comedy”一词显示为“Come edy”。您可以将此元素设想为类似于您可能在 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>

附言。这不是全部 CSS，而只是当按钮获得焦点时处于事件状态的内容。

Answer 1

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

变换:缩放(1.1325)；

将上面的改成这样:

变换:缩放(1.1)；

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