HTML、CSS：按钮和下拉框中的字体大小与普通文本不同（至少在Firefox中）

Question

HTML、CSS：按钮和下拉框中的字体大小与普通文本不同（至少在Firefox中）

8

我有这个规则：

body {

    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px
}

但是我希望选择框和按钮的字体大小与普通文本不同。

如果我想让所有内容都具有相同的字体大小，该怎么办？

谢谢

Javi

- tirenweb

5个回答

7

body,
input,
select,
button {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
}

- Gert Grenander

3

默认情况下，表单元素（例如文本类型的输入框和密码框、选择框、文本域和按钮）会使用等宽字体进行样式设置，其结果大小约为13.33像素。
您可以检查C:\Program Files\Firefox\res\forms.css（在WinXP下）或使用Firebug在HTML部分中查看，在“样式”选项卡右侧的小三角形==>默认CSS属性。

body {
  font: normal 62.5%/1.5 Verdana,Arial,Helvetica,sans-serif;
}

input, select, textarea, button {
  font-size: 1.2em;
}

p {
  font-size: 1.2em;
}

将会导致表单元素使用12px+Verdana字体（对于整个页面，1em = 10px等价）

- FelipeAls

你好，能否解释一下默认字体大小是从哪里来的？ - PaulCo

1

@PaulCo 这是默认 UA CSS（浏览器在应用任何其他用户和作者/开发者样式之前应用于 HTML 页面的样式）。现在可以在 Firefox 中找到。我不知道 font: -moz-field; 是什么意思，但这就是应用的样式 :) 您可以通过激活选项，在现代 DevTools 中查看这些默认样式。 - FelipeAls

谢谢您提供这个信息！我仍然很惊讶，为什么在MDN或其他平台上找不到这个。 - PaulCo

忘了提及我的链接来源：https://dev59.com/YnVD5IYBdhLWcg3wRpeX#3980775（在Fx链接中删除html.css以查看所有文件，但是，在每个元素的基础上使用F12更简单）。还有一个链接到WebKit（两者都是开源的，这很有帮助！）。此外，W3C HTML 5有建议。最后，normalize.css和reboot.css将帮助您不必考虑这些差异（重置CSS是另一种野兽：它们会杀死任何过度的样式，这是我个人的看法）。 - FelipeAls

2

body {
  font-family: sans-serif;
}

button {
  font:inherit
}

<html>
  <head>
  </head>
  <body>
  <p>An example of a sans-serif font</p>
  <button>Cick Me</button>
  </body>
 </html>

- Muhammad Ali Malekzadeh

请问您能否详细说明一下为什么会发生这种情况？ - vovchisko

0

关于按钮不确定，但大多数浏览器尝试以标准方式（例如12点Arial）样式化<select>元素。如果您想更改这些的样式，则必须添加显式的CSS规则：

select {    
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}

- Graham Clark

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

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

- oezi · Accepted Answer

通常表单元素不会继承这些属性，所以你需要这样做：

body{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
input, select, button{
    font-family: inherit;
    font-size: inherit;
}