WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
200369
Slanted text in variable fonts is not rendered correctly if font-style descriptor defines an upper angle that is less than 20deg
https://bugs.webkit.org/show_bug.cgi?id=200369
Summary
Slanted text in variable fonts is not rendered correctly if font-style descri...
Šime Vidas
Reported
2019-08-01 16:46:46 PDT
Steps to reproduce: 1. Open
https://jsbin.com/dabetaq/edit?css,output
Expected results: All three boxes should have the same, correct text slant. Actual results: In Safari, the slant is incorrect for the second and third box. Explanation: It appears that font-style: oblique only renders the correct slant if the upper angle in the font-style descriptor is at least 20deg in Safari. But the variable font has a 'slnt' axis range of 0 to 10*, which translates to the CSS range 0dge 10deg. *You can check the font file’s 'slnt' range on wakamaifondue.com. If you change this range to 0deg 20deg, Safari renders the slant correctly. Safari should let authors specify the variable font’s actual slant range. Currently, authors have to use 20deg as some sort of magic number to get correct rendering in Safari. Note: I’m not an expert on variable fonts, but the range 0deg 10deg works in Chrome and Safari, so this seems to be a bug in Safari.
Attachments
Test website for faux-slant versus true Slant
(300.37 KB, image/png)
2020-01-30 08:09 PST
,
Stephen Nixon
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2019-08-01 22:43:42 PDT
<
rdar://problem/53849550
>
Stephen Nixon
Comment 3
2020-01-28 13:27:21 PST
I think that the real problem may be that WebKit is applying a “faux-slant” for variable fonts when styled with font-style:oblique or font-style:italic. I have made a test page showing the issue in a way that I think is more clear, overlapping type to show the different results:
https://arrowtype.github.io/vf-slnt-test/faux-slnt.html
Stephen Nixon
Comment 4
2020-01-28 13:32:19 PST
It is additionally worth noting that Chrome and Firefox also don't render the slnt axis correctly, and I'm hoping that WebKit doesn't make the same mistakes when fixing this issue (the differences between the OpenType & CSS specs are slightly unintuitive to most people, at first, so it's easy to make mistakes here). Please see
https://bugs.chromium.org/p/chromium/issues/detail?id=859869
for more details. I have made a test page for font Slant in general at:
https://arrowtype.github.io/vf-slnt-test/
Stephen Nixon
Comment 5
2020-01-30 08:09:41 PST
Created
attachment 389249
[details]
Test website for faux-slant versus true Slant Here's a test case for this issue:
https://arrowtype.github.io/vf-slnt-test/faux-slnt.html
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug