The first line shows the text with no variations.
The second line animates the weight.
The third line animations the width.
The fourth line animates both.
Is it intentional that the width of each glyph from 'font-variation-settings' doesn't actually change the amount of layout space it occupies? The word doesn't change width, even as the individual glyphs change width?
Or is that just because of the early stage of the implementation?
This bug was fixed in https://trac.webkit.org/changeset/206896 which is in the latest WebKit nightly build. Please try again on Sierra and let me know if it works for you! 😊
This is fab! However I can’t get font-variation-settings to work if I load Skia.ttf as a webfont via @font-face. Does it only work with fonts installed in the system?
Tried it with Safary Tech Preview, Release 14 (Safari 10.1, WebKit 11603.1.6.0.2). Did not work in OS X 10.11. Any idea?
ReplyDeleteSupport is currently only in WebKit Nightly builds, not Safari Technology Previews.
ReplyDeleteAah. Got it. Thanks.
ReplyDeleteIs it intentional that the width of each glyph from 'font-variation-settings' doesn't actually change the amount of layout space it occupies? The word doesn't change width, even as the individual glyphs change width?
ReplyDeleteOr is that just because of the early stage of the implementation?
This is a known bug. rdar://problem/28662086
ReplyDeleteThis bug does not occur on El Capitan.
ReplyDeleteThis bug was fixed in https://trac.webkit.org/changeset/206896 which is in the latest WebKit nightly build. Please try again on Sierra and let me know if it works for you! 😊
ReplyDeleteThis is fab! However I can’t get font-variation-settings to work if I load Skia.ttf as a webfont via @font-face. Does it only work with fonts installed in the system?
ReplyDeleteTry macOS Sierra.
DeleteThis comment has been removed by the author.
ReplyDelete