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


175

我有一个HTML页面,其中包含一些文本和格式。我想使它具有相同的字体系列和相同的文本大小,而忽略文本的所有内部格式。

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

我该如何实现?

Answers:


262

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

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

星号匹配所有内容(如果没有,您可能也可以逃脱html)。

!important确保没有任何东西可以替代你在这个样式设置什么(除非它也很重要)。(这是为了满足您的要求,即“忽略文本的内部格式” –这是我的意思是其他样式不能覆盖这些样式)

花括号中的其余样式与其他样式一样,您可以在其中做任何想做的事情。我以更改字体大小,颜色和字体为例。


23
+1 !important很有用,但是如果使用过度,它可能会有点“怪兽化”。
StuperUser 2011年

2
+1可以充分利用!important。必须始终将其用作最后一个选项。
dShringi

3
请注意,!important此处的使用是由于原始张贴者的要求,即“具有相同的字体系列和相同的文本大小,而忽略了文本的所有内部格式”。如果您没有该要求,则不要使用!important
塞斯

1
使用html * {}body * {}可以帮助您避免body p {}在随附的样式表中进行更具体的覆盖。body p {}比更加具体body {},因此星号在这里是重要的元素。
悠悠球

1
我想您可以htmlhtml *这里省略
JonnyRaa

44

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

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

如果决定更改某些元素,则很容易覆盖它:

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

如果您使用的是像Foundation CSS这样的框架,那么不添加!important就无法正常工作。
Petros Kyriakou 2015年


12

使用以下CSS:

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

*-selector指任何/所有的元素,但显然是在食物链的底层,当谈到覆盖更具体的选择。

请注意,即使使用了其他选择器来设置文本(例如,the 或a ),- !importantflag也会将font-style 呈现为*绝对。bodyp


1
也许!important可以防止其他选择器覆盖设置。
Quasdunk 2011年

1
好吧,是的,!important只要其他选择器也不要使用它,就可以防止它们被覆盖。嘿。我将编辑我的帖子并添加它-谢谢。:-)
karllindmark 2011年

是的,没错。不太确定,但是我认为首选项还取决于放置声明的位置。如果将其放在最底端,我可能还会覆盖!important上面更具体的选择器中的。但这不是我
想说

这是唯一对我有效的答案。不知道为什么,但是确实如此。
彼得·戈登

5

您永远不要使用* + !important。如果要在HTML文档的某些部分更改字体怎么办?您应该始终使用身体而不重要。使用!important仅当没有其他的选择。


0

试试这个:

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

大家好,我格式化了您的代码,如果您使用4个空格或{}按钮,则可以在答案中以这种方式显示示例代码。
StuperUser 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.