Question

我想做什么：
我想在网络上使用非标准字体，不同的字体颜色和字体大小的组合，而不必为每个字体分配单独的配置。到目前为止，sIFR似乎拿起font-size没问题。但不是字体颜色，所以我正在努力解决。

我遇到的问题：
sIFR将文本分解到下一行，而不存在换行符<BR>。

这是HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>sIFR 3 - barebones test</title>
  <style type="text/css">
 .red{color:#660000;}
 .blue{color:#006699;}
  </style>
  <link type="text/css" rel="stylesheet" href="sifr.css">
  <script type="text/javascript" src="sifr.js"></script>
  <script type="text/javascript" src="sifr-config.js"></script>
 </head>
 <body>
  <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span>
 </body>
</html>

sIFR的-config.js 出于某种原因，sifr没有从CSS中提取颜色。所以我在配置文件中指定它。配置中的颜色有意地与css不同。

/*****************************************************************************
It is adviced to place the sIFR JavaScript calls in this file, keeping it
separate from the `sifr.js` file. That way, you can easily swap the `sifr.js`
file for a new version, while keeping the configuration.

You must load this file *after* loading `sifr.js`.

That said, you're of course free to merge the JavaScript files. Just make sure
the copyright statement in `sifr.js` is kept intact.
*****************************************************************************/

//## Create objects that point to the flash files
var fontName = { src: 'fontName.swf' };

//## Set configuration settings if desired
 //sIFR.useStyleCheck = true; // read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad>.

//## Activate sIFR
sIFR.activate(fontName);


//## Replace elements using sIFR

sIFR.replace(fontName, {
  selector: '.fontName'
  ,css: [
         '.sIFR-root{color:#000000;leading:-6;}',
         '.red{color:#FF0000;}',
         '.blue{color:#0000FF;}'
        ]
  ,ratios: [8, 1.41, 10, 1.33, 14, 1.31, 16, 1.26, 20, 1.27, 24, 1.26, 25, 1.24, 26, 1.25, 35, 1.24, 49, 1.23, 74, 1.22, 75, 1.21, 79, 1.22, 80, 1.21, 81, 1.22, 1.21]
  ,wmode:'transparent'
});

如果没有过早破坏，我该怎样做才能达到预期的效果呢？ **请注意，并非所有情况都适合显示：block; *

看起来我的问题已被分解为几个较小的问题。

换行
从页面继承了什么css。（感谢Mark的回答！）

Mark和Pekka，你们两个都在回复中提到letter-spacing。恐怕我不明白为什么因为我没有在css / sifr-config中定义字母间距。它由浏览器默认设置。它与换行符的文本宽度有什么关系？

我修改了代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>sIFR 3 - barebones test</title>
  <style type="text/css">
    .red{color:#660000;}
    .blue{color:#006699;}

    .sIFR-active #SpacingTest .fontName
    {
     letter-spacing:1px;
    }
  </style>
  <link type="text/css" rel="stylesheet" href="sifr.css">
  <script type="text/javascript" src="sifr.js"></script>
  <script type="text/javascript" src="sifr-config.js"></script>
 </head>
 <body>
    <b>box model and available width tests</b><br>

  1. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  2. <div class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  3. <div style="width:1024px;"><span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span></div>
  4. <div style="width:1024px;" class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  5. <span class="fontName" style="display:block;"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>

  <hr>
  <b>box model and available width tests</b><br>
  <div id="SpacingTest">
    6. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  </div>
 </body>
</html>

其他信息：

span上有一个以sIFR为目标的fontName类可用宽度：整个body
div class="fontName" 可用宽度：整个body（通过div）
div设置明确width，其中span包含class="fontName"
可用宽度：1024px（固定宽度div）
div w /明确width和class="fontName"
可用宽度：1024px（固定宽度div）
span w / display:block;和class="fontName"
可用宽度：整个body（通过display:block;）

结果：

1,3和6仍会中断 6占用更多空间，但仍然过早破坏 5看起来很好，直到浏览器调整大小，然后它添加一个换行符并保留它，无论如何。

2和4显示在一行上（如本例所示）。

4不会重排。这是预期的，因为宽度是固定的。这里没问题。

2回流，但只有“蓝色”一词被强制转移到下一行，其余文本仍保留在第一行。

我用ctrl + =和ctrl +重新调整文本大小，发生了一些有趣的事情。当浏览器/可用空间调整大小时，所有情况（不包括4 - 预期）都会更顺利地回流。

此测试的结论：

具有固定宽度的块元素（设置为该元素或其父/祖先）是安全的赌注，但是您的限制为固定宽度。
具有流体宽度的块元素在较小的字体大小
自行承担使用内联元素的风险。不要在段落的中间使用，flash对象本身不能阻止。

马克，你能澄清一下sIFR的可用宽度吗？我在sIFR 3维基上找不到它。（旁注：所有与adobe相关的liveoc链接似乎都是断开的链接，我恐怕通过搜索adobe的网站找不到它们）。我是否以错误的方式看待“可用空间”？整个身体元素不应该有足够的宽度吗？

为了我正在进行的项目，看起来设置标准来阻止级别元素只有18px及以上的字体大小将是保持进一步保持它的路线，但我仍然有个人兴趣，并希望了解sIFR和进一步突破。

我是Stack Overflow的新手，我担心这可能是一个'扩展讨论'，常见问题解答说这超出了本网站的范围。如果有更合适的地方讨论这个，请告诉我，我会根据需要提出调查。

此致

Answer 1

这通常是因为底层HTML（由sIFR输出替换）太小，因此为sifr使用的空间太少。

当我在h1上使用负字母间距值替换为siFR输出时，我已经有了这个。尝试为被替换的元素提供更多空间。

Answer 2

由于span是内联元素，因此sIFR只获取HTML文本的宽度。如果Flash文本较宽，则不适合并导致换行。您可以在letter-spacing类的帮助下将.sIFR-active添加到要替换的元素中。

sIFR不会从页面CSS中获取除字体大小以外的任何内容，因为1）跨浏览器很难可靠地执行此操作; 2）sIFR仅为Flash添加了一些自定义CSS属性。

Sifr 3 Barebones测试 - 不寻常的换行符

2 个答案: