Html Css按钮在Firefox中看起来不同

我的所有按钮都有css定义，如下所示。然而，我的按钮在mozilla firefox中看起来很奇怪。除了firfox mozilla之外，所有浏览器都可以使用它们。我能找到原因。你能检查一下吗

火狐：

铬

Html按钮

<button class="btn btnFB btnBig"  >Signin By Facebook </button>

编辑： 我的网站的字体系列

body{
    font: normal 12px RobotoDraft,Roboto,'Helvetica Neue',arial,sans-serif;
    background-color: #F7F7F7;
    color: #262626;
}

---

你网站的字体系列是什么？这看起来像是一个字体家族问题。并非所有浏览器都以相同的方式显示所有字体。如果您指定了不止一种字体，那么firefox可能找不到一种字体，而退回到另一种。

Chrome使用的默认字体与firefox使用的不同。因此它看起来不同。

你可以在谷歌字体上找到很多字体。

---

如果仍然找不到字体，请尝试谷歌材质设计中的Roboto字体

如果不在页面上设置字体，则每个浏览器都使用其默认字体。这很可能意味着

按钮

元素中使用的字体系列各不相同。它通常是Arial，但Firefox有不同的设置，例如我的系统中的MS Shell Dlg（Win 7）。您可以使用每个浏览器的开发人员工具检查此类问题

字体大小也有差别。当您将字体大小设置为

0.97em

时，浏览器会将父元素的字体大小乘以0.97，然后可能会对结果进行四舍五入，即使是以不同的方式。当基本字体大小是16px的典型默认值时，IE使用15.52px，Firefox使用正确的精确值15.53px，Chrome使用16px（即整数像素舍入）。这与字体系列的变化相结合，会产生微小的差异

通过将

font-size:0.97em

替换为，可以使渲染更加均匀

font-size: 1em;

及加入

font-family: Arial;

在规则中使用

.btn

选择器

这并不能消除所有差异，因为浏览器呈现字体的方式略有不同，而且并非所有系统都有Arial（许多现代手持设备没有）。Win 7上Firefox和Chrome中的渲染：

---

关于字体系列，您可以使用可下载字体（web字体），以获得更一致的结果。仅为几个按钮这样做可能会有些过分，但也可能有其他用途。

我认为这是一个

行高问题。尝试添加如下内容：

线高：1.5；

看看这是否有帮助。
因为这是facebook按钮，我本想使用klavika，但对于非英语字母，它会给出不同的结果。所以我决定我的按钮和我的身体有相同的字体系列。此外，我将我的按钮字体设置为1em。但一切都没有改变。在firefox中，它看起来很可怕，我不明白你说的“糟糕”是什么意思。对我来说，Chrome渲染（添加的屏幕截图中较低的一个）看起来更糟，因为粗体有点不成比例。但这也是一个品味的问题，它取决于我们无法控制的渲染细节。我认为你的答案是正确的。当我设置字体系列时：Arial；对于我的按钮，它起作用了。同样在你的形象中，粗体的手法也不同。为什么我不能使用字体：普通12px机器人草稿，机器人，Helvetica Neue，arial，无衬线；还有我的按钮吗？谢谢你的详细回答。问题是我的字体家族。我做了你建议的事。这比我做的好多了。不，这没用。顺便说一句，我把他们改成了px。。它的作用不大，但在firefox中，按钮中的文本并不像chrome、safari或ie中那样水平居中
font-family: Arial;