如何为HTML网页上的所有元素指定字体属性？

127

当我设置字体系列，字体大小，颜色等时，似乎有些嵌套元素会用难看的浏览器默认值覆盖它们。

我是否必须为页面上的任何类型的元素真正指定数十次，还是有办法永久地在全局范围内设置它们？

怎么做？

css

— 骄傲的会员
source

1

您目前如何设置字体系列，大小...？

— thecoop 2010年

251

* {
 font-size: 100%;
 font-family: Arial;
}

星号表示所有元素。

— 巴兹
source

15

这有效，但这不是最佳解决方案。当浏览器看到“ *”时，它将遍历页面中的所有HTML元素，并将CSS应用于它们。即使对于规则没有任何意义的元素。根据HTML的大小，这可能会减慢页面渲染速度。

— Cesar Canassa

4

同意，但是将CSS应用于BugAlert要求的所有元素。如果要影响所有元素，则可以期望性能会有所降低。:)

— 巴兹（Bazzz）2010年

1

您还可以在每个样式声明的末尾添加！important，以防止其他样式声明超过此样式声明。

— 秒。

4

我知道已经有5年了，但令我惊讶的是直到现在为止还没有人注意到：您永远不应该在“字体家族”中指定Windows字体（除非它是Web字体）-Arial，helvetica，sans-serif甚至更多兼容。

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}字体的继承，如果您确实想避免覆盖，请使用：*,:before,:after{font-family:inherit;}如果必须使用通用选择器，请改为使用继承。

— darcher 2015年

18

如果您使用的是IE，则可能会将某些元素（如表格）还原为浏览器的默认值。您可以使用以下CSS来解决此问题：

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

编辑：您可能想阅读CSS重置；看到线程像这样一个

— 保罗
source

10

我不能足够强调这个建议：使用重置样式表，然后显式设置所有内容。它将跨浏览器的CSS开发时间缩短一半。

尝试Eric Meyer的reset.css。

— 克里斯·考克斯
source

为了使用此reset.css，我是否只是将样式表链接到我的页面中，还是必须对其进行调整？我基本上需要在所有主要浏览器上使用相同的字体系列和大小。默认情况下，reset.css是否可以帮助我做到这一点？

— Darth Coder 2014年

1

我倾向于将其复制并粘贴到样式表的开头，而不是单独链接，以保存HTTP请求。这将帮助您在浏览器之间设置一致的样式，因为它将所有内容归零：唯一的样式将是您编写的样式。

— 克里斯·考克斯

谢谢！我确实尝试过，它解决了我的大多数问题。但是，尽管样式表的规格相同，我仍然可以看到Chrome和Firefox之间的字体大小有所不同。有什么想法吗？另外，这是一个好习惯吗？

— Darth Coder 2014年

8

您可以在body标签中设置它们

body
{
    font-size:xxx;
    font-family:yyyy;
}

— 吉普利
source

13

这是不准确的，因为大多数浏览器不会将此字体应用于某些元素（这些元素不会继承字体样式）

— travis-146'4

@ travis-146什么浏览器？哪些元素？您知道所有浏览器都必须遵循一个规范。

— 巴米耶

@Bamieh在Chrome 72上的一个特定示例（实际上是在这里带来的）是它没有将字体应用于按钮或选择菜单中的文本。

— 尼克·西尔维斯特里

2

如果您为body元素指定CSS属性，则<body></body>只要不稍后在样式表中覆盖它们，它就应适用于任何属性。

— 泰勒对待
source

0

如果要设置正文中所有元素的样式，则应使用下一个代码^

  body{
    color: green;
    }

— 斯蒂芬·波佩里奇尼
source