应用不同样式的文本答案

【问题标题】：applying varying styled text应用不同样式的文本
【发布时间】：2010-02-09 03:22:48
【问题描述】：

当我写一个段落时，我希望文本看起来像这样：

alt text http://img6.imageshack.us/img6/9894/fullscreencapture282010.jpg

这是我必须在 css 中做的事情吗？我想要类似的格式。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以通过几种不同的样式来做到这一点：

CSS：

 .level0 { font-weight: normal; }
 .level1 { font-weight: bold; }
 .level2 { font-weight: bold; font-size: 1.1em; }
 .level3 { font-weight: bold; font-size: 1.2em; }
 //etc...

HTML：

<div>
  <a href="#" class="level0">Tag1</a> 
  <a href="#" class="level3">Tag2</a>
  //etc..
</div>

当您在服务器端渲染该部分时，只需插入适当的级别数字以粘贴您的答案，例如前 3 名获得 level10，接下来 3 名获得 level9，依此类推……只是一些算法对你来说看起来不错。

【讨论】：

【解决方案2】：

对于这样的事情，指定最小和最大字体大小，然后将范围与术语相关联（不太重要到最重要）。将术语写入页面后，您可以组合这些值以获得实际字体大小，介于最小和最大大小之间。

最终输出如下所示：

<ul id='tags'>
   <li style="font-size: 12px"><a href="/tags/normal-term">Normal Term</a></li>
   <li style="font-size: 8px"><a href="/tags/small-term">Small Term</a></li>
   ....
</ul>

然后 CSS 看起来像这样：

#tags { line-height: 16px /* Max font size */ }
#lags li { display: inline; margin-right: 10px}

【讨论】：

如果您已经在 html 中指定字体大小，我不明白指定 max 和 min 的意义
@every_answer_gets_a_point 输出看起来像这样，但我假设您是在服务器上生成它。如果您要显示一组非动态元素，请使用@Nick 的解决方案并仅使用 CSS。如果您是动态生成的，字体大小将由您在服务器上的计算生成。
+1 Doug, @every_answer_gets_a_point - 这种替代方案在 CSS 中没有固定级别数量的情况下提供了更大的尺寸可变性。与往常一样，这可能是一个更好的解决方案，这取决于您的需求。
@every_answer_gets_a_point 您使用的是什么服务器语言？