{"id":275918,"date":"2018-09-06T11:47:47","date_gmt":"2018-09-06T18:47:47","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275918"},"modified":"2018-09-06T11:47:47","modified_gmt":"2018-09-06T18:47:47","slug":"the-complete-css-demo-for-opentype-features","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-complete-css-demo-for-opentype-features\/","title":{"rendered":"The Complete CSS Demo for OpenType Features"},"content":{"rendered":"

I’m very glad a guide for these features exists because we already know there are so many weird things<\/a> that variable fonts can do — well done, Tunghsiao Liu! <\/p>\n

There are quite a few possible values for font-feature-settings<\/code><\/a>, like, ya know:<\/p>\n

aalt<\/code>, swsh<\/code>, cswh<\/code>, calt<\/code>, hist<\/code>, hlig<\/code>, locl<\/code>, rand<\/code>, nalt<\/code>, cv01-cv99<\/code>, salt<\/code>, subs<\/code>, sups<\/code>, titl<\/code>, rvrn<\/code>, liga<\/code>, dlig<\/code>, size<\/code>, ornm<\/code>, ccmp<\/code>, kern<\/code>, mark<\/code>, mkmk<\/code>, smcp<\/code>, c2sc<\/code>, pcap<\/code>, c2pc<\/code>, unic<\/code>, cpsp<\/code>, case<\/code>, ital<\/code>, ordn<\/code>, lnum<\/code>, onum<\/code>, pnum<\/code>, tnum<\/code>, frac<\/code>, afrc<\/code>, dnom<\/code>, numr<\/code>, sinf<\/code>, zero<\/code>, mgrk<\/code>, flac<\/code>, dtls<\/code>, ssty<\/code>, ss01-ss20<\/code>, smpl<\/code>, trad<\/code>, tnam<\/code>, expt<\/code>, hojo<\/code>, nlck<\/code>, jp78<\/code>, jp83<\/code>, jp90<\/code>, jp04<\/code>, hngl<\/code>, ljmo<\/code>, tjmo<\/code>, vjmo<\/code>, fwid<\/code>, hwid<\/code>, halt<\/code>, twid<\/code>, qwid<\/code>, pwid<\/code>, palt<\/code>, pkna<\/code>, ruby<\/code>, hkna<\/code>, vkna<\/code>, rlig<\/code>, init<\/code>, medi<\/code>, and fina<\/code><\/p>\n

…to name a few.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’m very glad a guide for these features exists because we already know there are so many weird things that variable fonts can do — well done, Tunghsiao Liu! There are quite a few possible values for font-feature-settings, like, ya know: aalt, swsh, cswh, calt, hist, hlig, locl, rand, nalt, cv01-cv99, salt, subs, sups, titl, […]<\/p>\n","protected":false},"author":3,"featured_media":275920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The Complete CSS Demo for OpenType Features","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[855,587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/swash.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":235714,"url":"https:\/\/css-tricks.com\/caring-about-opentype-features\/","url_meta":{"origin":275918,"position":0},"title":"Caring about OpenType features","date":"December 9, 2015","format":false,"excerpt":"Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245539,"url":"https:\/\/css-tricks.com\/opentype-variations-fonts\/","url_meta":{"origin":275918,"position":1},"title":"\u201cOpenType Variations Fonts\u201d","date":"September 18, 2016","format":false,"excerpt":"Over on the Typekit Blog, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification. This might not sound all that exciting at first, but \u201cvariable fonts\u201d allows designers and developers to embed a single font file into\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":248009,"url":"https:\/\/css-tricks.com\/color-fonts\/","url_meta":{"origin":275918,"position":2},"title":"Color Fonts","date":"November 19, 2016","format":false,"excerpt":"Adobe explaining: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":266653,"url":"https:\/\/css-tricks.com\/understanding-web-fonts-getting\/","url_meta":{"origin":275918,"position":3},"title":"Understanding Web Fonts and Getting the Most Out of Them","date":"February 23, 2018","format":false,"excerpt":"Using custom fonts is getting increasingly easier. We\u2019ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/features-explainer.gif?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":293353,"url":"https:\/\/css-tricks.com\/weekly-news-truncating-muti-line-text-calc-in-custom-property-values-contextual-alternates\/","url_meta":{"origin":275918,"position":4},"title":"Weekly news: Truncating muti-line text, calc() in custom property values, Contextual Alternates","date":"July 25, 2019","format":false,"excerpt":"In this week's roundup, WebKit's method for truncating multi-line text gets some love, a note on calculations using custom properties, and a new OpenType feature that prevents typographic logjams.","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190725.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":248261,"url":"https:\/\/css-tricks.com\/experimenting-color-fonts\/","url_meta":{"origin":275918,"position":5},"title":"Experimenting with Color Fonts","date":"November 29, 2016","format":false,"excerpt":"Over the past couple of weeks there\u2019s been a lot of excitement over color fonts. Adobe describes the technology like this: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/swash.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275918"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=275918"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275918\/revisions"}],"predecessor-version":[{"id":275934,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275918\/revisions\/275934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275920"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=275918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=275918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=275918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}