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

我注意到在我的网络应用中，与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*/
   }
}

最佳答案

我不知道您使用的是哪种字体（或平台（Mac与Win也会有所不同）），但是有些浏览器使用CLEARTYPE子像素渲染来渲染字体，有些使用QUARTZ子像素渲染（使外观不同），然后其他浏览器使用标准的抗锯齿-ing。

解决此问题的一种好方法是在HTML或主体CSS中使用字体平滑的CSS：

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

阅读有关它的更多信息，并在Max Voltar's website上查看更多示例。

另请注意，使用em优于使用px来测量字体。如果不使用字体平滑处理，大字体会受到像素的损害，因此，为了特别保留可访问的文本，最好使用ems（这样您仍然可以使用大字体）。