Geek Answers Handbook

How can I call the characters "Swash" / "Stylistic Set" from the OpenType font in HTML?

I'm working on a project right now when there are several variations of the same character in an OpenType font. All characters have the same Unicode identifier, but have different GID numbers and some other links, such as Swash or Stylistic SetXX (ss01) (this information is indicated in indesign). Is there a way to use these characters in an HTML document?

Example: J (normal), J (with blur rate), J (from chains). All have a unicode id: 004A, but have GID values ​​of 43, 206, and 233, respectively.

+8
html5 fonts xhtml css3 opentype
source share
2 answers

font-variant-alternates is what you want: http://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop

I do not know how widely this is supported, and bet that it is not in IE.

This page shows OTF support in general: http://caniuse.com/#feat=ttf ; It is unclear whether full support in this sense is truly complete.

Firefox and IE support demos: http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontfont/index.html

+2
source share

I have not heard about font-variant-alternates , but I know that Firefox 4 and above support -moz-font-feature-settings , which allows you to use OpenType functions through CSS.

Sample code from Mozilla Hacks posts a moz-font-feature-settings blog post :

 .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 this feature.

+8
source share

More articles:


All Articles