【问题标题】:How to add letter spacing to numerals?如何为数字添加字母间距?
【发布时间】:2014-06-13 03:23:48
【问题描述】:

我在我的网站上通过 OpenType 字体功能设置使用旧式数字。有没有办法在不将每个数字包装在 span 类中的情况下为数字添加字母间距?

【问题讨论】:

    标签: css fonts font-face webfonts typography


    【解决方案1】:

    letter-spacing property 已定义为指定字符之间的附加间距。然而,在实践中,这已经实现,以便在元素的每个字符之后添加间距。这意味着如果您有例如<abbr>abc</abc>,你设置abbr { letter-spacing: 1em }(大值只是为了看清楚效果),那么a、b、d后面会加1em。这会很糟糕,例如如果元素后面紧跟标点符号。

    如果您希望能够使用不遗漏最后一个字符的自然标记,似乎可以使用以下技巧:在元素上设置负右边距,绝对值与字母相同间距,在最后一个字符后取消其效果:

    abbr { 
      letter-spacing: 0.05em;
      margin-right: -0.05em;
    }
    

    这独立于其他设置,例如小型大写字母设置,您可能对元素进行了设置。但是,如果您对该元素有其他设置,则省略最后一个字符会更加尴尬,因为您需要像 <abbr><span>ab</span>c</abbr> 这样的东西,在 abbr 元素和 letter-spacing 属性上有一些其他设置在内部 span 元素上——除非你使用上述技巧。

    【讨论】:

    • 非常感谢!这就是我要找的!实际上对我来说它可以在没有display: inline-block; 的情况下工作,只需添加margin-right: -.05em; 就足够了。
    • @jupiteror,对,我相应地简化了答案。
    【解决方案2】:

    【讨论】:

    • 注意:letter-spacing 实际上会影响元素每个字符后的间距,因此为了影响 数字之间的间距,您需要一些不合逻辑的标记如foo<span class=yourNumbers>1234</span>5bar,即把最后一位数字留在元素之外。
    • 啊,是的,好点子。我可能没有完全理解这个问题。如果它询问如何为位于其他文本中间的数字添加字母间距而不是正确的......你必须将它们包装在能够用你的 CSS 定位它们的东西中。
    • @DA.非常感谢。所以唯一的方法是将每个数字放在一个类中,对吗?有没有办法通过使用font-feature-settings: "onum" 1; 之类的东西来定位它们?
    • 因此,在该示例中,如果您想使用 letterspace '800',则必须将其包装在某个容器中,例如 <span class="letterspacednumber">800</span> руб. (госпош...
    • 您需要使用<span class="...">80</span>0 руб. 以防止在数字和货币名称之间添加空格。
    猜你喜欢
    • 1970-01-01
    • 2020-01-31
    • 1970-01-01
    • 2019-09-25
    • 2021-11-08
    • 1970-01-01
    • 1970-01-01
    • 2012-06-23
    • 2012-10-25
    相关资源
    最近更新 更多