【发布时间】:2014-06-13 03:23:48
【问题描述】:
我在我的网站上通过 OpenType 字体功能设置使用旧式数字。有没有办法在不将每个数字包装在 span 类中的情况下为数字添加字母间距?
【问题讨论】:
标签: css fonts font-face webfonts typography
我在我的网站上通过 OpenType 字体功能设置使用旧式数字。有没有办法在不将每个数字包装在 span 类中的情况下为数字添加字母间距?
【问题讨论】:
标签: css fonts font-face webfonts typography
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; 就足够了。
.yourNumbers {letter-spacing: [value]}
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
【讨论】:
letter-spacing 实际上会影响元素每个字符后的间距,因此为了影响 仅 数字之间的间距,您需要一些不合逻辑的标记如foo<span class=yourNumbers>1234</span>5bar,即把最后一位数字留在元素之外。
font-feature-settings: "onum" 1; 之类的东西来定位它们?
<span class="letterspacednumber">800</span> руб. (госпош...
<span class="...">80</span>0 руб. 以防止在数字和货币名称之间添加空格。