为什么带有变音符号的关键帧内容会导致额外的空白？答案

【问题标题】：Why does keyframe content with a diacritic cause additional whitespace?为什么带有变音符号的关键帧内容会导致额外的空白？
【发布时间】：2017-09-30 02:21:41
【问题描述】：

在我的 Angular 应用程序的主页上，我有几个词与它们的定义有所不同。更改在 CSS 中定义：

.header-text:after {
   display: inline-block;
   content:'';
   animation: fide-in 5s linear infinite;
}

@keyframes fide-in {
   0% { content:'BLA'; opacity: 1; }
  50% { content:'BřA'; opacity: 1; }
}

我的问题在于'BřA'这个词。在 Chrome 中，它被解释为 'Bř A'。如何摆脱 'ř' 和 'A' 之间的空格？

【问题讨论】：

可能是字体问题？你能换个别人检查一下吗？
当我将 BřA 直接放在 HTML 中时，效果很好。我试过不同的字体，但它是一样的。
存在某种错误，Bř 后面从 'a' 到 'f' 放了一个空格， Bř 后面从 'g' 到 'x' 呈现正确
这很奇怪。有什么解决方法吗？（例如，替换 CSS 中的空格字符？）
我不认为这是一个空间，只是 ř 占用的空间比它应该的要大。另外，我在 safari 中也看到了同样的情况，顺便说一句。奇怪的是，在 stackblitz 中，它可以正确渲染，无论是否镀铬：stackblitz.com/edit/…。还没找到解决方法

标签： angular css css-animations

【解决方案1】：

这是我的解决方法：

CSS

.header-text:after {
   display: inline-block;
   content:'';
   animation: fide-in 5s linear infinite;
}

@keyframes fide-in {
    0% {
        content: 'BLA';
    }
    50% {
        content: attr(content);
    }

HTML

<p content="BřA" class="header-text"></p>

stackblitz

【讨论】：