다음을 통해 공유

CSS Corner: Using the Whole Font

  • 아티클

With cross-browser support for both the CSS3 @font-face rule and the WOFF font packaging format, modern Web typography has expanded far beyond the realm of ‘Web-safe fonts.’ Well-known magazines such as the New Yorker use Web fonts to preserve the typographic personality of their headlines, while [US] President Obama’s re-election campaign uses Web font service Typekit to host their identity font.

One remaining limitation prevents Web designers from using the entire font: the inability to access the large variety of optional OpenType® features built into many fonts. These features define glyph substitution and positioning options to support fundamental typographical features such as kerning, superscript and subscript, contextual letterforms such as ligatures, numeral styles, access to alternate East Asian glyphs as well as ornamental swashes.

For instance, an OpenType “stylistic set” built into Gabriola allows this text:

String of text in Gabriola font without stylistic sets applied

…to render as:

String of text in Gabriola font with stylistic set 6 applied

Recent updates to the CSS3 Fonts module include a new set of properties to expose these OpenType features within CSS. These properties can be grouped in two broad categories:

  • An explicit mapping of the common OpenType features to specific properties and values. For example font-kerning:normal applies the kerning pair adjustments encoded within the font and font-variant-numeric: tabular-nums enables tabular numerals.
  • The font-feature-settings property enables low-level access to all the OpenType features supported by a font. It is meant as an ‘escape hatch’ to access to more advanced features in less common use-cases.

CSS Property: font-feature-settings

Preview 4 of IE10 includes support for the font-feature-settings property. Our earlier Gabriola example could thus be written:

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

The -ms-font-feature-settings declaration above turns on a stylistic set supported by the font (ss06). The property takes either a value of ‘normal’ – no change in glyph selection or positioning – or a comma-separated list of one or more features. Each feature combines a four-letter OpenType feature tag and a value. In the example above, “ss06” is the OpenType feature tag for stylistic set 6. We assign the value 1 to the feature to turn it on.

The OpenType feature registry defines the list of possible tags (also documented here and standardized by ISO). Here a few of the most popular:

OpenType tag Enables
kern Kerning
liga Standard ligatures
dlig Discretionary ligatures
smcp Small capitals
subs Subscript
sups Superscript
swsh Swashes
ss01, ss02, …, ss20 Stylistic sets 1 to 20

For a good illustrated introduction to these features and many others, we recommend the Layout Features section of the FontFont OpenType User Guide.

The more common features are on/off switches. Feature values of off or zero turn the feature off; a value of on or any positive integer activates it. For some features, an integer value gives access to several options. This is usually the case for swashes (‘swsh’). If no value is specified for the feature, a value of 1 is assumed. All the following declarations are thus equivalent for the purpose of our Gabriola example:

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

Finding Out Supported Features for a Font

Design tools such as Adobe InDesign or Illustrator expose OpenType features through user-friendly menus and dialogs, word processors such as Word support them through their font selection dialog and font vendors often document which features their products support. A future post will discuss using the browser to detect font features. With more browser access to OpenType features we expect font hosting services to do more to advertise and document their use as well.

Browser Support

The font-feature-settings property is currently supported by Firefox 4+ and Internet Explorer 10, beginning with Preview 4. Note that because Firefox and IE implemented different versions of the draft the value syntax they accept is different. For example, enabling kerning in both browsers requires the following:

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

More information about –moz-font-feature-settings see -moz-font-feature-settings.

As CSS3 Fonts moves along the standardization track we expect more browsers to add support for font-feature-setttings as well as the more author-friendly font-variant properties and values defined in the module.

Also note that the property applies to all font families, whether Web fonts downloaded through @font-face rules or local fonts referenced by name.

Demos

Our IE Test Drive site includes advanced OpenType feature demos from Monotype Imaging, FontFont and The Font Bureau. They demonstrate the variety of typographic designs available in modern fonts.

You don’t need any special fonts to try this. Windows 7 includes a number of OpenType-enabled fonts including Calibri, Cambria, Consolas, Gabriola, and Palatino Linotype. In the Windows 8 Developer Preview, we added OpenType features to Segoe UI and the Web-safe fonts Arial, Verdana, Georgia, Times New Roman, Comic Sans and Trebuchet.

We are excited to give Web authors access to all the OpenType features built in Web fonts and look forward to an even broader range of typographic design on the Web.

—Sylvain Galineau, Program Manager, Internet Explorer

Comments

  • Anonymous
    January 09, 2012
    Is it possible to choose a stylistic set on per-glyph basis. For exemple, all "a" from ss01 and "b" from ss02?

  • Anonymous
    January 09, 2012
    @FremyCompany, the feature applies to all the glyphs it is designed for by the font. Being able to apply features on a per-glyph would not only be more complex but also allow overriding contextual features, which defeats their general useful purpose. Do you have any specific examples in mind?

  • Anonymous
    January 09, 2012
    Sylvain, Also you might want to mention that Chrome Windows only has added support as well. No Mac support yet. Great info thanks for posting.

  • Anonymous
    January 09, 2012
    @FREMY, yes u can do it with 'LETTERING JS' :)

  • Anonymous
    January 09, 2012
    @Fremy, check out the relatively recent "Character Variant" (CV01 to CV99) OpenType feature listed here... www.microsoft.com/.../features_ae.htm I'm not aware of any fonts that use it.

  • Anonymous
    January 09, 2012
    Thanks all for your responses. I think I've been answered fully by all those. I had one example in mind about a font with two stylistics sets but with some glyphs I prefer from the first one and some other I prefer from the other one, I was asking myselft if it was possible to "mix" the stylistic sets to get the glyph I like. I suppose I would have to do it by script if I really want that, but it's not something I really want, it was just to know if it was possible. Anyway, I think you can use @font-face to select the glyphs you want "per font", no?

  • Anonymous
    January 09, 2012
    Another achievement for typography on the web, that's great! But what was the rationale for going with this syntax as opposed to Mozilla's?

  • Anonymous
    January 09, 2012
    The -moz syntax is based on an older version of the draft, see www.w3.org/.../css3-fonts

  • Anonymous
    January 09, 2012
    @Perk: IE is using the syntax described in the latest CSS3 Fonts WD, so it looks like Mozilla's implementation is that of an older version.

  • Anonymous
    January 09, 2012
    @FremyCompany: you can, using the unicode-range descriptor. Though I'd argue it's a bit heavy handed to use that feature on a single-glyph basis, it should work. @Perk: as pointed out by others, Mozilla's implementation references an older version of the spec. Until a spec is stable, changes like this can occur and you may end up with different prefixed versions of the property supporting a different syntax.

  • Anonymous
    January 09, 2012
    @Rob Mauceri As discussed on the IE Blog many times previously, we are watching the Web change to support HTML5 Video natively in all browsers except Internet Explorer. On a related note, Chrome's original support for h.264 is being dropped since h.264 is not an open codec format in favor of valid Web Video formats like WebM and Ogg Theora. blog.chromium.org/.../html-video-codec-support-in-chrome.html When are we going to hear official word about IE supporting open formats natively?  Is Microsoft waiting for CES2012 to make the official announcement we've been hearing rumors about? The silence from MSFT on the IE Blog about supporting an open video format natively is now becoming deafening and needs to be addressed ASAP... either Microsoft is going to support the SAME standard markup, and the SAME standard open video formats... or it can't claim that it supports standards and needs to stop singing this song. Do we need to start these hashtags trending on Twitter? #MICROSOFT_WONT_SUPPORT_OPEN_HTML5_VIDEO #MICROSOFT_WONT_SUPPORT_OPEN_HTML5_AUDIO Next you'll be telling us that you actually support #SOPA! even though you publicly quietly deny it: mashable.com/.../boycott-sopa

  • Anonymous
    January 09, 2012
    Fred, this blog post is about CSS fonts. Your comment seems a bit off-topic. Was it posted here in error?

  • Anonymous
    January 09, 2012
    @Si Daniels - welcome to the IE Blog! Unfortunately the IE Blog has 3 major issues. 1.) Microsoft is very slow (if ever) in responding to comments on this blog 2.) Posts are locked from comments and responses after 14 days 3.) The comment form is notoriously broken and eats comments without warning As a result readers need to constantly post and re-post comments on the IE Blog to ensure they get seen/heard. As for @Fred's comment I'm sure he is just as anxious as the rest of us to find out when Microsoft plans to fully support HTML5 Video and by that we mean at least one natively supported open video codec. Without this, IEs implementation of HTML5 video is a failure.

  • Anonymous
    January 09, 2012
    @Fred T. VP8 is not an open format but a proprietary format fully owned and controlled by Google. Google allows it to be used for free and that makes them just as open as the old binary .doc/.xls./ppt office format owned by Microsoft. Google also provides some mediocre quality VP8 codec software but without any indemnity against 3rd patent claims. As in 'use our codec software at your own risk'. Microsoft however has been providing all new Windows users since 2007 by default with a free h.264 codec for which 3rd party frand patent licenses are already paid and also provides a plugin for other browser like Mozilla to use the provided h.264 codec in the browser. No cost to the browsermaker.

  • Anonymous
    January 09, 2012
    Thanks Joel for the explanation. I'm happy to respond to OpenType font questions posted here (at least for the next 13 days). Hopefully I won't miss any amongst the off-topic discussion.

  • Anonymous
    January 10, 2012
    Hi Si, I posted two other posts yesterday but they didnt show up so I  will try again. Can you tell me what level of OpenType support will be in the IE10...are you just supporting the Tier 1 level -- pretty much the list above in Popular from the first post or will greater support be available?

  • Anonymous
    January 10, 2012
    @Fred T Interrestingly Chrome stated not to support h.264 a year ago and then became very quiet as Google knows they cannot afford to remove h.264 from their product. It would make their mobile OS and their browser slower. So even Google is still supporting h.264 a year and 10 versions after claiming to quit with it. Also we know that using a slightly inferior video codec cost a lot more energy and bandwith investment. A financial and environmental prize that h.264 will never cost in licenses. @Si Sorry for the off topic. Are all of the opentype set of features supported by DirectWrite?

  • Anonymous
    January 10, 2012
    @Brad - Via the "font-feature-settings" markup IE10 will support any GPOS or GSUB OpenType feature. In fact any 4-letter combination will be directly passed to the font and the results used to render the content. @A_Zune - checking with the DWrite team on this question.

  • Anonymous
    January 10, 2012
    How about IE10 for mobile. Will this support be in there as well? Thanks

  • Anonymous
    January 10, 2012
    @Brad -  the Windows Phone team has asked us not to discuss web font related features at this time.

  • Anonymous
    January 10, 2012
    Hello daniels Do you know when are we going to have a full Windows 7 working demo of IE10?

  • Anonymous
    January 10, 2012
    @Eduardo Sorry, no.

  • Anonymous
    January 10, 2012
    Thank for all info Si and Sylvain. We at WebINK are pretty excited to see more and more browsers support the OTF bits in the fonts.

  • Anonymous
    January 10, 2012
    sorry @Brad the Windows Phone will only get full HTML5 support for video and audio when (and if) MSFT adds it to IE10 and then ports it to the phone. it took ages to get the IE6 version on the phone replaced with a port from IE9 so don't hold your breath.

  • Anonymous
    January 10, 2012
    @Martin Stop spreading FUD

  • Anonymous
    January 10, 2012
    Can anyone recommend a good tool to batch convert a bunch of OGG/mp3 files to AAC?  I'm working on an HTML5 game and would like IE users to be able to play it as well. If no such tool exists, does anyone know if you can write a script to automate Audacity?

  • Anonymous
    January 10, 2012
    IE9 on Windows phone does not jump to anchors on a loaded page when opening a url that contains an anchor on that page. IE9 on desktop does jump to the anchor as do other browser. Where can you submit specific IE9 for mobile bugs?

  • Anonymous
    January 10, 2012
    @A_Zune (2nd attempt at posting this) A response from  the DWrite guys, just like "font-feature-settings" DWrite can take any 4 letter tag. For IDWriteTextLayout use an IDWriteTypography object, which is set onto the range. msdn.microsoft.com/.../dd371541(v=vs.85).aspx For lower level custom layout clients, call GetGlyphs directly. msdn.microsoft.com/.../dd316625(v=vs.85).aspx GetGlyphs msdn.microsoft.com/.../dd368143(v=vs.85).aspx WRITE_TYPOGRAPHIC_FEATURES Also see Tutorial: Getting Started with DirectWrite (Part 3: Adding Typographic Features with IDWriteTypography). msdn.microsoft.com/.../dd368152(v=vs.85).aspx.

  • Anonymous
    January 11, 2012
    Now, do "pointer-events: none".  ^_^

  • Anonymous
    January 11, 2012
    Since all mobile and tablet browsers these days use either WebKit or Presto as their rendering engines when will windows mobile devices support one of them (preferably WebKit) Unfortunately no one wants to write content or apps for Windows phone devices because they don't support modern browser rendering engines.

  • Anonymous
    January 12, 2012
    Windows Phone has IE9 in it. It uses Trident rendering engine. The same Trident which have highest score on ECMA JavaScript conformance test and the same Trident which is using hardware-accelerated graphics. Nothing modern than that so far.  So stop trolling and get lost.

  • Anonymous
    January 12, 2012
    Given you have VLC installed and you are aware of powershell (*.ps1 files), use the script mentioned on this page: www.timvw.be/.../convert-aacm4a-files-to-mp3-with-vlc-and-powershell PS: make your default shell => Powershell (windows 7, vista & XP)

  • Anonymous
    January 12, 2012
    The comment has been removed

  • Anonymous
    January 13, 2012
    Should IE ever implement MathML then this might help there too I guess (special variations of symbols).