如何将全局字体应用于整个 HTML 文档

Posted 2023-05-06

【中文标题】如何将全局字体应用于整个 HTML 文档

【英文标题】：How to Apply global font to whole HTML document

【发布时间】：2011-10-24 22:36:03

【问题描述】：

我有一个包含一些文本和格式的 html 页面。我想让它具有相同的字体系列和相同的文本大小，忽略文本的所有内部格式。

我想为 HTML 页面设置一个全局字体格式。

我怎样才能做到这一点？

【参考方案1】：

您应该能够在 CSS 中使用星号和 !important 元素。

html *

   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;

星号匹配所有内容（如果没有html，您也可以逃脱）。

!important 确保没有任何东西可以覆盖您在此样式中设置的内容（除非它也很重要）。 （这是为了满足您的要求，即它应该“忽略文本的内部格式”——我认为这意味着其他样式无法覆盖这些）

大括号内的其余样式与任何其他样式一样，您可以在其中做任何您想做的事情。我选择更改字体大小、颜色和系列作为示例。

【讨论】：

+1 !important 很有用，但如果被过度使用，它可能会有点“怪物”。

+1 提供了!important 的大量使用。它必须始终用作最后一个选项。

注意这里使用!important是由于原始发布者的要求，“具有相同的字体系列和相同的文本大小，忽略文本的所有内部格式。”如果你没有这个要求，你不想使用!important。

使用html * 或body * 将帮助您避免在包含的样式表中通过更具体的body p 覆盖。 body p 比 body 更具体，所以星号是这里的重要元素。

我认为您可以在此处从html * 中省略html

【参考方案2】：

我认为的最佳做法是将字体设置为正文：

body 
    font: normal 10px Verdana, Arial, sans-serif;

如果您决定为某些元素更改它，它可能很容易被覆盖：

h2, h3 
    font-size: 14px;

【讨论】：

如果您使用的是基础 css 之类的框架，则如果不添加 !important 将无法正常工作。

我同意，并认为接受的答案令人厌恶，尽管我接受它回答了“忽略所有内部格式”的实际问题。请参阅related question 上的my answer，了解为什么 在body 上设置字体属性是最佳做法。

【参考方案3】：

在你的 CSS 的 body 选择器中设置它。例如

body 
    font: 16px Arial, sans-serif;

【讨论】：

这可以被更具体的选择器覆盖。

不适用于所有元素，例如：input type='button'

【参考方案4】：

使用以下css：

* 
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */

*-selector 表示任何/所有元素，但在覆盖更多特定选择器时显然位于食物链的底部。

请注意，!important 标志会将 * 的 font 样式呈现为绝对样式，即使已使用其他选择器来设置文本（例如，body 或 @ 987654327@).

【讨论】：

也许!important 会阻止其他选择器覆盖设置。

嗯，是的，!important 会阻止其他选择器覆盖，只要它们不使用它。呵呵。我会编辑我的帖子并添加它 - 谢谢。 :-)

是的，没错。不太确定，但我认为偏好还取决于您放置声明的位置。如果你把它放在最底部，我也可以从上面更具体的选择器中覆盖!importants。但这不是我想的重点:)

这是唯一对我有用的答案。不知道为什么，但确实如此。

它只适用于我使用“font-family:”而不是“font:”

【参考方案5】：

你不应该使用* + !important。如果您想更改 HTML 文档某些部分的字体怎么办？你应该总是使用没有重要的身体。只有在没有其他选择的情况下才使用!important。

【参考方案6】：

试试这个：

body

    font-family:your font;
    font-size:your value;
    font-weight:your value;

【讨论】：

您好，我格式化了您的代码，如果您使用 4 个空格或 按钮，您可以在答案中以这种方式显示示例代码。