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

原文地址：https://www.jb51.cc/css/217914.html