当Div变为可见时，使用非网页安全字体会导致跳转

Question

我使用谷歌字体来显示一些h1标签。最初，使用以下隐藏此h1标记：

visibility: hidden;
opacity: 0

然后，当您将鼠标悬停在文本上时，我会慢慢显示该文字：

.content:hover{
  visibility: visible;
  opacity: 1;
  transition: opacity ease-in-out 1s;
}

请参阅此处了解演示：http://codepen.io/gosusheep/pen/oXEyve

每当内容完全可见时，它就会跳跃一点。

当内容已经可见时，这种跳跃不会。

此内容确实与其他非网页安全字体（例如格鲁吉亚）一起发生。

有没有人知道解决这个问题的方法？

Answer 1

问题不在于可见性，问题在于transform和transition，请尝试将内容置于top: 50%;和margin-top: negative_half_of_the_div_heigh;的中心位置。

Answer 2

添加margin: 20px后，一切都按预期工作。我也能够保持变换。

我认为发生的是字体需要比内容div实际拥有的空间更多的空间。当不透明度达到1时，文本将完全呈现并超出div的范围，从而导致一个小的移位。