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

Question

222

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

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

如何实现这一点？

- Ruchi

5个回答

60

我认为最好的做法是将字体设置到 body 上：

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

如果你决定将其更改为某个元素，它很容易被覆盖：

h2, h3 {
    font-size: 14px;
}

- Teneff

1

如果您正在使用类似Foundation CSS的框架，则必须添加!important才能使其正常工作。 - Petros Kyriakou

我同意，并认为被接受的答案是一种可憎的做法，尽管我承认它回答了“忽略所有内部格式”的实际问题。请参见我的答案以及一个相关问题，了解在body上设置字体属性为什么是最佳实践。 - Kal

17

将其设置在CSS的body选择器中。例如：

body {
    font: 16px Arial, sans-serif;
}

- Petecoop

1

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

6

它并不适用于所有的元素，例如：input type='button'。 - RRTW

15

使用以下CSS：

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

< p > *选择器表示选择任何/所有元素，但在覆盖更具体的选择器时，显然会处于底层。

请注意，!important标志将使*的font样式成为绝对值，即使其他选择器已用于设置文本（例如body或可能是p）也是如此。

- karllindmark

1

也许 !important 可以防止其他选择器覆盖这些设置。 - Quasdunk

1

好的，是的，“!important”可以防止其他选择器覆盖它，只要它们没有也使用它。呵呵。我会编辑我的帖子并添加它 - 谢谢。 :-) - karllindmark

没错，不过我不太确定，但我认为偏好也取决于您放置声明的位置。如果您将其放在最底部，我可能还会覆盖上面更具体选择器的!important。但我想这不是重点 :) - Quasdunk

1

这是唯一一个对我有效的答案。不确定为什么，但它确实有效。 - Peter Gordon

只有当我使用“font-family:”而不是“font:”时，它才对我有效。 - FloverOwe

4

试试这个：

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}

- anglimasS

嗨，anglimass，我已经格式化了你的代码。如果你使用4个空格或{}按钮，你可以在回答中以这种方式显示示例代码。 - StuperUser

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amadiere · Accepted Answer

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

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

星号可以匹配任何内容（html标签似乎不是必需的）。

!important 确保没有其他样式能够覆盖你在这个样式中设定的内容（除非也使用了 !important）。（这有助于满足您“忽略文本内部格式”要求-我理解为其他样式不能覆盖这些样式）

花括号内的其余样式与其他样式一样，并且可以进行任何想要的更改。我选择更改字体大小、颜色和家族作为示例。