css – 使用Google Web Fonts获取不同的图形类型

根据 this page

[Raleway] is a display face and the download features both old style
and lining numerals,standard and discretionary ligatures,a pretty
complete set of diacritics,as well as a stylistic alternate inspired
by more geometric sans-serif typefaces than its neo-grotesque inspired
default character set.

(强调我的)

数字的认值是“旧样式”(“onum”OpenType feature string),在标题中使用时看起来非常糟糕.理想情况下,我希望能够使用“衬里”变体(“lnum”),“tabular”(“tnum”)字距(与比例 – “pnum”相对).

我尝试使用以下font-feature-settings声明块,无济于事:

font-feature-settings: "onum" off,"pnum" off,"lnum" on,"tnum" on;
-moz-font-feature-settings: "onum=0,pnum=0,lnum=1,tnum=1";       /* Firefox */
-webkit-font-feature-settings: "onum" off,"tnum" on;  /* WebKit */
-o-font-feature-settings: "onum" off,"tnum" on;       /* Opera */

有什么想法吗?如果我想下载完整的字体,然后将其重新导出为网络字体,我将如何确保获得衬里数字?

谢谢!

解决方法

从这个页面http://clagnut.com/sandbox/css3/
.lnum {
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings:"lnum" 1; 
    -moz-font-feature-settings:"lnum=1"; 
    -ms-font-feature-settings:"lnum" 1; 
    -o-font-feature-settings:"lnum" 1; 
    -webkit-font-feature-settings:"lnum" 1; 
    font-feature-settings:"lnum" 1;
}

目前仅适用于.otf文件,而不适用于google webfonts托管的字体嵌入. Safari不支持.您可以在此处测试其他字体功能和浏览器支持https://www.typotheque.com/articles/opentype_features_in_web_browsers_-_tests

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效