使用Meiryo字体会导致输入字段拉伸

Question

我在日本网站上使用名为“Meiryo”的日本着名字体。但是，使用此字体会导致我的所有输入字段都拉伸。这是一个非常奇怪的错误，如果我用其他任何东西替换字体，我的所有输入字段都会恢复正常。

任何人都可以解释为什么会出现这个错误？

在所有主流浏览器上测试

Answer 1

这不是一个错误。 <input type=text>元素的可见大小由size属性设置（默认为20），以“字符”设置宽度。这意味着根据HTML 4的“平均宽度”字符，而HTML5草稿说“用户代理应该确保至少那么多字符是可见的”。不同浏览器的不同之处在于在任何情况下，元素的可见宽度应该取决于并且实际上取决于字体的属性 - 在其中的字形宽度上。

以下简单测试（假设某些常用的默认字体用于input）说明了这一点：

<input value="Hello world"><br>
<input value="Hello world" style="font-family: Meiryo">

后一个元素相当宽，通过查看初始文本的外观，设置你可以看到原因：在Meiryo中，字符（字形）通常比通常用作默认字体{{1字体。

结论取决于页面设计和布局。在灵活的设计中，布局的细节适应数据和字体的要求，而不是相反。如果设计更加严格，您可以考虑在CSS中设置宽度的上限，如果您真的必须使用像素，例如input。

Answer 2

这是字体问题

使用CSS 宽度和高度属性来解决问题