sIFR 3 前导和字距调整答案

【问题标题】：sIFR 3 Leading and KerningsIFR 3 前导和字距调整
【发布时间】：2010-02-13 00:30:47
【问题描述】：

我正在尝试在我正在处理的网站上对某些 sIFR 3 类型进行引导和字距调整（如 wiki 中所述：http://wiki.novemberborn.net/sifr3/Styling），但这两个参数似乎无论如何都没有效果我愿意。

我没有按照需要使用整数（没有“px”或“em”）。我还尝试了几种不同的字体 swf 文件，只是为了确保它不是字体。我不知道为什么它不起作用。我分配给 .sIFR-root 的所有其他 css 参数都可以正常工作。这是我使用“领先”的代码示例。

在 sifr_config.js 中：

sIFR.replace(snl, {
    selector: '.section-title h1',
    css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
    wmode: 'transparent'
});

在 HTML 文档中：

<div class="section-title">
    <h1>sIFR Text</h1>
</div>

（我也尝试过带和不带方括号的 css 代码，因为我已经看到它以两种方式完成。似乎没有什么区别）。

我做错了什么？任何帮助将不胜感激;谢谢！

【问题讨论】：

欢迎来到 SO Kerri。我不知道可能出了什么问题（代码看起来不错），但您能否在实际的 <h1> 周围添加相关的 HTML 代码以确保完整性？
感谢您的回复，佩卡！我已经添加了html代码。不过，正如我所提到的，所有其他参数（字体、颜色、文本对齐等）都有效。只有领先和跟踪似乎不起作用。

标签： javascript sifr

【解决方案1】：

ETA：找到了一种不那么骇人听闻的方式：将 line-height 添加到被替换元素的 CSS 时似乎有效（在我的示例中为：.sIFR-active .section-title h1）。所以我能够使用常规的旧 line-height 来伪造一个边距。

好吧——既然这个让所有人无语，我发现了以下内容：

最初，有很多建议使用前导作为 margin-top 或 padding-top 的替代品，因为这些不适用于 sIFR。这就是我试图使用它的目的。我有一行文本，需要在顶部给它一些空间，所以我试图通过增加前导（行高）来做到这一点，但无济于事。我认为这在某一时刻有效，但是当我查看所有 sIFR 修订的更改日志时，我发现了一个关于“修复”领先的注释。显然，开发人员认为在单行文本上识别前导是一个错误，因此“修复”了它，以便仅在文本为多行时应用前导。我通过在我的文本之前放置一个换行符进行了测试，果然，领先开始工作了！

因此，现在看来，为了在我的 sIFR 标头上实现上边距，我必须以一种或另一种方式添加不必要的代码——通过将其包装在具有上边距的 div 或 span 中，或者添加一行中断并使用否定前导。

我仍然不知道字距调整，但字母间距似乎起作用了，所以……

如果有人有任何额外的见解可以提供，我会全力以赴！

【讨论】：

您可以使用offsetTop 将文本向下移动，并使用tuneHeight 使Flash 影片更高，这样文本就不会在底部被截断。
谢谢！我实际上已经尝试过了，但由于某种原因，我无法让 tuneHeight 按我的需要工作。实际上，我最终以一种不同的方式来做这件事，这种方式比我上面发布的要少得多。我能够将 line-height 应用于 .sIFR-active 替换类，这似乎工作得很好。

【解决方案2】：

这对我有用，使用 sIFR 3 获得带有红色 Serifa 字体的 h2，字母间距和前导最小。实际的 sIFR swf 没什么特别的，只是根据 sIFR 文档创建的。如上所述，offsetTop 和 tuneHeight 也适用于调整定位（如下所示，虽然我没有使用它们所以设置为 0）。

在 sifr.css 中

.sIFR-active h2.replace {
    color: #FF0000;
    visibility: hidden;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 2.5em;
    text-transform:uppercase;
  }

在 sifr-config.js 中

sIFR.replace(serifa, {
    selector: 'h2.replace',
    css: ['.sIFR-root { letter-spacing: -2; leading: -15; kerning:true; color:#FF0000; text-transform:uppercase; font-size:2.5em; }' ], 
    tuneWidth: '0' , tuneHeight: '0' , offsetTop: '0' });

在html页面中（例如）：

<div class="column grid_4">
    <h2 class="replace">Title here</h2>
</div>

【讨论】：