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

前端之家收集整理的这篇文章主要介绍了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

猜你在找的CSS相关文章