3

我试图让这个例子中的文本正确显示，但我一直在用各种字母剪裁文本和阴影，我不知道为什么以及如何修复它。

这是一个jsfiddle（已删除），因此您可以完全理解它。  请在加载后刷新 jsfiddle，因为第一个字母剪辑不会像在常规发布页面上那样出现。

问题在于加载（刷新后）'F'＆它的阴影将被剪裁。 然后，将鼠标悬停在文本上 - 将出现“第二个”，然后鼠标悬停和第一个单词将再次出现，但随后“t”阴影被剪裁。

无法弄清楚如何解决这些问题。有人可以帮我清除这些剪辑错误。谢谢，比尔

更新： 我发现了 'F' 字母剪裁问题（更新的 jsfiddle） - 我需要关于 't' 剪裁的帮助 - 谢谢，Bill

BUMP——有人吗？漂亮请 - 比尔

4

1 回答 1

5

这个问题与字体的呈现方式有关。某些字体（例如您要嵌入的字体）的衬线超出了字母本身的“框”。在典型的排版中，这是通过允许渲染区域超出框本身来处理的——因为大多数应用程序不会在每个字母周围制作一个框。

我认为您遇到的问题源于每个字母实际上是 a 的事实<span>，这意味着它确实有一个盒子。然后，您的 JS 会弄乱opacity,overflow和定位，这会导致 CSS 渲染在渲染每个个体<span>时将其框住。

我的建议是避免使用您应用于跨度的显式宽度/溢出，而是让它们自动调整大小并控制绝对定位。

如果每个跨度具有相同的 z-index，并且它们的间距正确，那么这应该会为您提供所需的内容，而不会导致剪辑。

更新：

问题是字体以与字母重叠的方式呈现（就像许多脚本风格的字体一样）。因此，您 - 必须 - 以超出其框边界的方式渲染此字体。

但是，当插件中的 CSS 将单个字母变为部分透明时，透明项目不能超出其框的外部......因此会发生剪切。

解决方案是充分增加框的大小以不发生剪裁，并允许框重叠。

换句话说，诀窍是给字体字母提供padding-right足够padding-left的空间来充分表达，然后用负数调整margin-left，将字母移回一起。

对于这种字体，在这种大小下，使它起作用的样式是：

.lslide_wrap a span span.sl-w1 {
    ...
    /* Add the following 2 lines: */
    padding: 0 100px 0 22px;
    margin-left: -22px;
}

可以在此处找到原始 jsFiddle 的更新版本。

于 2012-08-08T22:49:41.843 回答