【问题标题】:CSS: em or ex for number width?CSS:数字宽度的 em 或 ex?
【发布时间】:2014-05-29 11:19:16
【问题描述】:

我必须设置输入字段的宽度,例如它适合 2 个数字(例如从 00 到 99)。 我试过width:2em,但它太大了,`width:2ex' 而且太小了......

哪个单位最适合使用?是否取决于字体类型?

编辑

我知道比例字体很难计算宽度,但通常数字具有固定宽度以允许数字对齐。所以我想出了一些单位来处理他们......

例如以下 10 位随机序列(按比例字体)具有相同的宽度...

1234567890

3421434234

2324235252

【问题讨论】:

    标签: css font-size em


    【解决方案1】:

    一个em是当前字体的最大字符宽度(大写M的宽度)。一个ex 大约是当前字体高度的一半(小写x 的高度)。

    遗憾的是,如果您不使用等宽字体(所有字母占用相同数量的水平空间,例如 Courier),则某些字母组合的宽度将不会与其他字母组合的宽度相同多个字母的组合。

    例子:

    Stack Overflow 的 cmets 不使用等宽字体,因此以下这些行的宽度不同,但包含相同数量的字母:

    iiiiiiiii
    嗯嗯嗯嗯

    但是,如果我用等宽字体书写,它们确实占据相同的水平宽度:

    iiiiiiiii
    MMMMMMMMM
    

    【讨论】:

    • 我知道,但通常数字具有固定宽度以允许数字对齐。所以我发现有一些单位可以处理它们......
    • 也许您可以计算出em 数字在您选择的字体中所占的比例。但是不,没有专门针对数字宽度的单位,因为坦率地说,如果您不使用等宽字体,则无法保证数字将具有相同的宽度。看看 Comic Sans。
    • 1 em 不是 CSS 中 m 单位的宽度。这是错误的。它是其父字体的高度。 Ex 是 x 字符的宽度,而不是高度!这是一个非常具有误导性的帖子。 developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-04-29
    • 2012-01-04
    • 2012-09-13
    • 2013-11-14
    • 2012-03-19
    • 2018-01-15
    • 2011-01-24
    相关资源
    最近更新 更多