【问题标题】:SIFR 3.0 - Font SizeSIFR 3.0 - 字体大小
【发布时间】:2010-01-08 23:46:41
【问题描述】:

我使用 SIFR 3.0 已经有一段时间了,字体大小似乎永远无法正常工作。我了解 SIFR 背后最基本的概念。加载页面时会运行 SIFR。它对 HTML 渲染字体的大小进行一些计算,然后将其替换为大致等于该大小的 Flash 电影。因此,您希望设置 HTML 字体的样式以尽可能匹配 SIFR 字体的大小。

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

在 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”中删除了“可见性:隐藏”,以确保 HTML 呈现的文本大小正确。是的,它占用了两条线。但是,当 Flash 替换此文本时,它会为其赋予一行文本的最小高度。奇怪。

我能找到解决此换行问题的唯一方法是删除“font-size: 32px;”来自 sifr-config 中的“sIFR.replace(HelveticaNeueThinCond”。我遇到的问题是它继承了 sifr.css 中设置的字体大小。现在的问题是我的 HTML 文本比 SIFR 文本大。所以偶尔我的 HTML 文本将在我的 SIFR 文本之前换行,留下一个大空白。

那么,我如何设置两种不同的字体大小(一种用于我的 HTML 文本,一种用于我的 SIFR)而不丢失换行。

我唯一能够成功使用的 SIFR 字体与网络安全字体非常相似,以至于它们可以共享相同的 font-size 属性。

谢谢


谢谢马克。如上所述,如果我从 sIFR.replace 中删除字体大小,它将默认使用在 .sIFR-active 中声明的字体大小。我声明两种不同的字体大小是有原因的,我希望 sIFR.replace 的字体大小为 32 像素,而 sIFR-active 的字体大小为 26 像素。通过这种方式,它们尽可能地匹配。有没有办法让你的 flash 字体(sifr.replace)与 HTML 字体(sifr-active)的大小不同?

是否必须让它们具有相同的字体大小?如果这是真的,那没有多大意义。您还能如何微调这两种字体以使它们占用相同的字母间距/行?

【问题讨论】:

  • 这不能回答你的问题,但你试过cufon吗?设置起来非常容易,所以也许值得一试......
  • 使用 PHP?您可以在thephpcode.blogspot.com/2009/12/… 获得 fontreplace FLIR
  • @Skilldrick - 我还没有尝试过cufon。我正在避免它,因为我不确定它可能导致将字体放在服务器上的所有法律问题。绝对值得一看。
  • @thephpdeveloper - 感谢您的链接。不幸的是,这是在 .net 框架上。
  • 哦……我明白了。没关系,一切顺利!

标签: css configuration sifr sifr3


【解决方案1】:

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

【讨论】:

  • 对不起,我应该发表评论而不是答案。我是这个网站的新手。谢谢马克。如上所述,如果我从 sIFR.replace 中删除字体大小,它将默认使用在 .sIFR-active 中声明的字体大小。我声明两种不同的字体大小是有原因的,我希望 sIFR.replace 的字体大小为 32px,而 sIFR-active 的字体大小为 26px。通过这种方式,它们尽可能地匹配。有没有办法让你的 flash 字体(sifr.replace)与 HTML 字体(sifr-active)的大小不同?
【解决方案2】:

其实我从来没有想过要使用两种不同的字体大小,sIFR 只是简单地设计为使用 CSS 中的字体大小。

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

【讨论】:

    猜你喜欢
    • 2023-04-05
    • 1970-01-01
    • 2023-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多