Getting different figure types with Google Web Fonts

问题

According to 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.

(Emphasis mine)

The default for numerals is "old style" ("onum" OpenType feature string), which look pretty awful when used in headlines. Ideally, I'd like to be able to use the "lining" variant ("lnum"), with "tabular" ("tnum") kerning (As opposed to proportional -- "pnum").

I've tried using the following block of font-feature-settings declarations, to no avail:

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, "pnum" off, "lnum" on, "tnum" on;  /* WebKit */
-o-font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on;       /* Opera */

Any thoughts? If I wanted to download the full font and then re-export it as a web-font, how would I do so while ensuring I get the lining figures?

Thanks!

回答1:

From this page: 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;
}

Only works with .otf files for now, not with font embeds hosted by google webfonts. Not supported in Safari. You can test other typeface features and browser support here: https://www.typotheque.com/articles/opentype_features_in_web_browsers_-_tests

回答2:

If you want to download the font and generate a new version with lining numerals, or other OpenType features, check out http://www.fontsquirrel.com/tools/webfont-generator.

You'll need to enter Expert mode, but then under OpenType Flattening you can select Lining Numerals. If you are so inclined, you could even generate a version with the alternate W form.

As of late 2014, this is the only way to get lining numerals in Safari.

回答3:

To follow up on wbond's answer, which should take all the credit for this post, the expert mode in font squirrel will look intimidating at first. But he mentioned the ever important alternate W, which is a pretty big difference for raleway. Note the G is also different between styles.

You simply put "salt" in the OpenType Features box and download your kit.

Then wherever you want to access the salt style, you add this to the css:

    -moz-font-feature-settings:"salt" 1; 
    -ms-font-feature-settings:"salt" 1; 
    -o-font-feature-settings:"salt" 1; 
    -webkit-font-feature-settings:"salt" 1; 
    font-feature-settings:"salt" 1;

Sorry, this should be a comment on that answer but I can't add an image to comments. It would have saved me some time if someone else had this image to show me, so I felt it was worth posting.

回答4:

You cannot use OpenType features with Google Web Fonts unless you self host or use a different CDN. Google Web Fonts CDN subset out features to improve latency.

https://github.com/google/fonts/issues/1582

来源：https://stackoverflow.com/questions/17218891/getting-different-figure-types-with-google-web-fonts

标签

css

fonts

webfonts

google-webfonts

opentype