Question

我正在尝试让这个示例中的文本正确显示，但我一直在剪辑文本＆amp;各种字母的阴影，我无法弄清楚为什么以及如何解决它。

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

问题是~~加载（刷新后）'F'和＆amp;它的阴影将被剪切。~~然后，鼠标移开文本 - 将出现'Second'，然后mouseout和第一个单词将再次出现，但然后't'阴影被剪裁。

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

更新：我想出了'F'字母剪辑问题（更新了jsfiddle） - 我需要帮助w /'t'剪辑 - 谢谢，Bill

BUMP - 有人吗？请 - 比尔

Answer 1

此问题与呈现字体的方式有关。某些字体（如您嵌入的字体）具有超出字母本身“盒子”范围的衬线。在典型的排版中，这是通过允许渲染区域延伸到框本身之外来处理的 - 因为大多数应用程序不会在每个字母周围创建一个框。

我认为你所遇到的问题源于这样一个事实，即每个字母实际上都是<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的更新版本here。