HTML中用于替代font标签的最佳方法

Question

由于HTML中的font标签在HTML5中被弃用（我了解原因），那么有没有一种干净的解决方案仅应用于段落文本的某些属性和样式？我使用JavaScript解析依赖于font标签的XML文件，该标签允许使用基于类的CSS格式化其部分包装文本。我意识到“锚点”（a）标签也可以用于此目的，但这种方式似乎非常倒退和不自然。

编辑

当我提出这个问题时（现在已经几年了），我未能理解每个DOM元素都属于display类别，两个主要类别分别是：

- block - 坚持占据自己的行 - inline - 与其他inline元素或文本并排

HTML提供了两个通用容器元素，默认情况下，每个容器元素都遵守其中一个显示值;div表示block显示，span表示inline显示。 span元素是指定一定量的文本并为其提供独特的样式或ID的完美方式，因为您可以将其包装在较大段落的一部分周围而不会将所选内容拆分为新行。

- Taylor Lopez

Answer 1

使用标签可能是最好的方法。

虽然通常不建议使用内联CSS，但以下是一个示例：

<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>

span和div很相似，但div标签是一个块级元素，因此它会导致换行。 span是一个内联标签，可以与文本一起使用。

- Adam Plocher

---

使用span标签（它也是内联标签）的另一个好处是，这些元素被语义上用于强调，并且不应该用于"随机"的文本部分，这也是除了strong、b或i标签之外的另一个很好的理由。 - Claudio Holanda

这很有道理。不幸的是，我很少使用span标签，所以它甚至没有出现在我的“雷达”上。谢谢！ - Taylor Lopez

然而，<font> 做了一件 <span> 无法做到的伟大之事（尽管您可能会觉得它很可怕）：它可以跨越 <p> 元素 - 就像这样：<p>第一个段落，其中 <font style="color:blue;">蓝色文本开始，接着是</p><p>第二个段落，蓝色文本在此结束。</font></p> 如果有很多段落，这种方法非常方便。我想没有替代品了吧？ - danbae

这是奇怪的行为：https://codepen.io/aplocher/pen/ZEYvmav - 我不确定是否有一种方法使 span 的行为与字体在此示例中的行为相同... - Adam Plocher

这个答案解释了为什么在<p>标签外面包裹<span>标签时它不起作用。它没有详细说明为什么<font>标签可以工作，但我相信在HTML5中已经弃用了font标签。这可能只是一种奇怪的HTML5之前的渲染行为... https://stackoverflow.com/questions/23371706/tag-p-inside-a-span-doesnt-apply-css-style - Adam Plocher

是的，<font>确实已经被弃用了，这也是本主题的前提（请参见上面的原始问题）。而且，出于引用答案中所述的原因，<span>永远不会像<font>那样工作。我明白为什么人们希望HTML整洁，没有封闭元素的关闭标签落后于封闭元素的关闭标签。但是，<font>有一种流氓美感 :) - danbae

Answer 2

HTML：

<span class="yourstyle">
Text in your style
</span>

CSS：

.yourstyle {
            color: red;
           }

- Igor

Answer 3

您可以使用标签。

<p>here is your paragraph text and it goes on and on and on..... and now 
lets start some <span>formatted text.</span> here is another<span>section 
of formatted text</span> here is unformatted text<p>

您可以使用内联样式，例如<span style="color: #000000; font-family: calibri, arial, helvetica;"> 或者将类应用于您的，如<span class="textformat1" 和 <span class="textformat2">。然后根据类别应用不同的CSS规则。

.textformat1 {
    color: red;
}
.textformat2 {
    color: blue;
}

希望这能帮到您。

- celeriko

Answer 4

始终使用CSS文件来保存代码，这将被认为是对每个设置的元素“通用”的。当您想为特定的元素，比如<span>元素进行设置时，您只需要像Adam Plocher上面所说的那样，在<span>元素中使用style = ""属性。

- PatchGuru