【问题标题】:Can you specify tabular lining figures for webfonts?您可以为 webfonts 指定表格衬里数字吗?
【发布时间】:2013-07-11 15:50:19
【问题描述】:

由于可以指定衬里和老式数字,我希望浏览器支持带有 webfonts 的 tabular 数字?##

  • 左:默认数字
  • 右:所需的表格数字(注意等宽)

字体:Brandon Grotesque

相关:Is there a way to specify the use of text or titling figures in CSS?

【问题讨论】:

    标签: css typography fixed-width monospace


    【解决方案1】:

    简单地说,是的。

    目前您可以在其前缀形式中使用属性“font-feature-settings”并将 “tnum” 添加到值列表 (example) 以访问启用 OpenType 字体的表格数字: p>

    font-feature-settings: 'tnum';
    -webkit-font-feature-settings: 'tnum';
    -moz-font-feature-settings: 'tnum';
    

    检查caniuse 以查看是否仍需要前缀版本。

    注意,如果您使用 Typekit 来提供网络字体,请确保在语言支持下选择“所有字符”。

    【讨论】:

      【解决方案2】:

      虽然可以指定表格数字,但不能保证最终用户的浏览器支持tnum 属性。

      State of Web Type 跟踪哪些浏览器支持这些(和其他)高级印刷功能。

      在撰写本文时 tnum 支持:

      • Chrome v.33-41
      • Firefox v.4-39
      • Internet Explorer v.10-11
      • Opera v.15-28

      tnum 不支持:

      • Safari (OSX)
      • Safari (iOS)
      • Android Webkit
      • 上述浏览器的旧版本

      【讨论】:

      • 我相信它确实提供了问题的答案。除了询问如何指定表格数字外,OP 还询问是否有浏览器支持。我的答案中的链接显示了该属性在现代浏览器中的支持表。
      • 我的观点是它确实提供了答案。问题首先是“你能指定……吗?” - 这个答案说“是”。有浏览器支持吗?回答“不能保证 - 这里有一个资源可以告诉你哪些做/不做”。可以在此处总结来自链接的信息以改进答案 - 指定各种流行浏览器支持的版本。否则它很危险地接近“仅链接答案”
      • 感谢@JRichardSnape 的建议。我已经使用来自链接站点的汇总数据更新了我的答案。我是新来的,仍然掌握规则。我为不完整的答案道歉。干杯。
      • 当然,没问题,我们都必须时不时掌握网站的窍门。我希望你坚持下去——这会是有益的!一切顺利。
      【解决方案3】:

      我认为这是 recommended way 来访问此 OpenType 功能(Mark Fox 的回答中的 font-feature-settings: 'tnum'):

      font-variant-numeric: tabular-nums;
      

      我在 http://caniuse.com/#search=font-variant-numeric 上找不到任何东西,所以请坚持使用 Mark 的回答,直到可以更好地确定浏览器支持。

      【讨论】:

        猜你喜欢
        • 2020-02-18
        • 2010-11-10
        • 1970-01-01
        • 1970-01-01
        • 2012-01-28
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多