Question

我已经使用SIFR 3.0一段时间了，字体大小似乎永远不会正常工作。我理解SIFR背后最基本的概念。加载页面时会运行SIFR。它执行一些与HTML呈现字体大小相同的计算，然后将其替换为大致等于该大小的Flash影片。因此，您希望将HTML字体设置为尽可能接近SIFR字体的大小。

尝试将这两种字体大小设置为匹配时，我的问题总会出现。假设我想使用大约32px的Helvetica Neue Lt的SIFR字体。 HTML等价物类似于Arial Narrow，大约36px，带有一些负字母间距。所以这就是我的工作。

在sifr.css中我会写：

@media screen {
  .sIFR-active h1 {
      visibility: hidden;
      z-index: 0 !important;
      font-size: 36px;
  }
}

很好，它可以获得我需要的默认HTML字体。现在我需要更新flash SIFR字体大小。所以我进入sifr-config.js并写下这样的东西：

sIFR.replace(HelveticaNeueThinCond, {
  selector: 'h1',
  css: '.sIFR-root { color: #762123; font-size: 32px; line-height: 1em; }',
  transparent: true
});

所以现在一切都很好。直到我的h1文本包含多行。出于某种原因，当文本换行时，它只显示第一行。它似乎计算错误的高度。这非常奇怪，因为我进行了一些测试。我从“sIFR-active h1”中取出“visibility：hidden”，以确保HTML呈现的文本大小合适。它是，它占用两行。但是，当Flash替换此文本时，它会为其提供一行文本的最小高度。奇

我找到修复此包装问题的唯一方法是删除“font-size：32px;”来自sifr-config中的“sIFR.replace（HelveticaNeueThinCond）。我遇到的问题是它继承了sifr.css中设置的字体大小。现在问题是我的HTML文本比SIFR文本大。所以偶尔在我的SIFR文本留下一个大的空白区域之前，我的HTML文本将换行到一个新行。

那么，如何设置两个不同的字体大小（一个用于我的HTML文本，一个用于我的SIFR）而不会丢失包装。

我唯一能够成功使用的是当我的SIFR字体与Web安全字体非常相似时，它们可以共享相同的font-size属性。

由于

谢谢马克。如上所述，如果我从sIFR.replace中删除font-size，它将默认使用.sIFR-active中声明的font-size。我出于某种原因声明了两种不同的字体大小，我希望sIFR.replace的字体大小为32px，sIFR-active的字体大小为26px。这样他们就尽可能地匹配。有没有办法让你的flash字体（sifr.replace）与HTML字体（sifr-active）不同？

是否必须使它们具有相同的字体大小？如果这是真的，没有多大意义。你怎么能够微调这两种字体以使它们占用相同的字母间距/线？

Answer 1

您似乎正在使用.sIFR-active类和负字母间距执行所有正确的操作。从sIFR.replace删除字体大小和行高，你应该没问题......

Answer 2

实际上，我从没想过使用两种不同的字体大小，sIFR只是设计用来使用CSS中的字体大小。

您可以使用http://wiki.novemberborn.net/sifr3/Ratio+Calculation帮助sIFR整理Flash电影的高度，当然还要调整letter-spacing来整理文字的宽度。

SIFR 3.0 - 字体大小

2 个答案: