html - 使用 Meiryo 字体会导致输入字段拉伸(stretch)

Question

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

谁能解释一下为什么会出现这个错误？

在所有主流浏览器上测试

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 中，字符(字形)通常比常用的默认字体宽 input字体。

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