Menu
I'm working on a project right now that within the OpenType font has several variations of the same character. All the characters have the same Unicode ID but have different GID numbers and some other reference like Swash or Stylistic SetXX (ss01) (found this information in indesign). Is there any way to use these characters in an HTML document?
Example: J (normal), J (with speed blur), J (made out of chains), All have unicode id: 004A, but have GID values of 43, 206 and 233 respectively.
636
With Microsoft Word® and Powerpoint®, you can access the swashes using the Insert menu. First, select the font from the font menu. Then, go to the Main menu, click on the Insert tab, and then click Symbols. (In Word, you will also click on More Symbols at the bottom of the drop-down menu.)
Enable OpenType Features in Microsoft Word To access OpenType features in Word, select the text and choose Format > Font then in the dialog box that appears go to the Advanced tab and choose a Stylistic set from the dropdown or enable Contextual Alternates.
OpenType fonts may contain more than 65,000 glyphs, which allows a single font file to contain many nonstandard glyphs, such as old-style figures, true small capitals, fractions, swashes, superiors, inferiors, titling letters, contextual and stylistic alternates, and a full range of ligatures.
ss01 . The . ss01 suffix simply means it's the a of the first stylistic set. If you want more stylistic sets, all you need to do is add the appropriate suffix to the glyph name: . ss02 corresponds to the second stylistic set, .
I hadn’t heard of font-variant-alternates, but I do know that Firefox 4 and above support -moz-font-feature-settings, which lets you apply OpenType features via CSS.
Example code from a Mozilla Hacks blog post on moz-font-feature-settings:
.altstyles {
/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
/* dlig = discretionary ligatures, ss01 = stylistic set 1 */
-moz-font-feature-settings: "dlig=1,ss01=1";
}
As far as I know, no other browser supports a similar feature yet.
102
font-variant-alternates is what you want: http://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop
I don't know how widely supported it is yet, and bet that it's not in IE.
This page shows support for OTF in general: http://caniuse.com/#feat=ttf ; It is not clear whether complete support is really complete, in this sense.
Demos of Firefox and IE support: http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontfont/index.html
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
