如何修复chrome和firefox中输入字段显示的不同字体大小

Question

我注意到在我的网络应用程序中，与firefox相比，相同的输入形式字体大小（目前设置为17px）在chrome上读取较小。我附上了截图。

有一个更优雅的方法来解决这个问题，而不仅仅是使用

/*chrome*/
input {
 font-size:17px;
}
/*firefox*/
@-moz-document url-prefix() {
   input {
     font-size:15px;/*reduce font size to match what is seen in chrome*/
   }
}

Answer 1

我不知道你正在使用什么字体（或平台（Mac vs Win也有所不同），但有些浏览器使用CLEARTYPE子像素渲染渲染字体，有些使用QUARTZ子像素渲染（使外观不同），然后其他使用标准抗锯齿。

一个很好的解决方法是在你的html或body css中使用font-smoothing css：

html {
    font-family: /*yourfont*/;
    -webkit-font-smoothing: antialiased;
}

详细了解相关内容，并在Max Voltar's website

上查看更多示例

另请注意，使用em比使用px测量字体更可取。如果不使用字体平滑，大字体会受到像素化的影响，因此为了保持可访问的文本，最好使用ems（这样你仍然可以使用大型字体）。