Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

file issue with browsers: "font-style: italic; currently doesn't work in any major browser" #56

Closed
thundernixon opened this issue Jul 10, 2019 · 3 comments
Assignees
Labels

Comments

@thundernixon
Copy link
Collaborator

thundernixon commented Jul 10, 2019

Jason Pamental wrote about the currently-inconsistent implementation of font-style in browsers:

if you specify ‘font-style: italic’ that should tell the browser to render the font with the Italic axis set to 1 instead of 0. The trouble is, it doesn’t actually work. At least not as you might expect.

https://mailchi.mp/444e7a454775/web-typography-news-20-contextual-stylistics-and-other-fake-band-names

He offers a CodePen demo to show the problem (see in Safari vs Chrome vs Firefox):

https://codepen.io/jpamental/pen/rEKQZq?editors=1100

However, font-style: italic doesn't seem to work for an early version of Recursive, at all (even though font-variation-settings does work as expected).
https://codepen.io/thundernixon/pen/ormaav

Safari - italic almost does what it should, whether or not font-style: oblique 0deg 20deg; is included in the @font-face declaration.:

image

...but it is skewed, rather than using the proper slnt axis. This can be seen most easily in the distortion of the letter O.

Chrome & Firefox – no result from italic or oblique:

image

image

@thundernixon thundernixon changed the title Determine whether slant Determine whether slant & italic axes can be split, and still allow for CSS control of font-style: italic Jul 10, 2019
@thundernixon
Copy link
Collaborator Author

I split the font differently and did some further tests:

rsms/inter#175

Summary: I changed from a Slant axis to an Italic axis, so "forward slanting" can be connected to a positive number (Italic must go from 0 to 1). I then created a Cursive (CRSV) axis to allow control over true-italic alternates. This also has problems in each main browser, though the problems are slightly different.

@thundernixon thundernixon changed the title Determine whether slant & italic axes can be split, and still allow for CSS control of font-style: italic font-style: italic; currently doesn't work in any major browser Jul 22, 2019
@thundernixon thundernixon changed the title font-style: italic; currently doesn't work in any major browser file issue with browsers: "font-style: italic; currently doesn't work in any major browser" Aug 5, 2019
@thundernixon thundernixon self-assigned this Aug 5, 2019
@thundernixon
Copy link
Collaborator Author

Also, look at http://localhost:3002/var-test.html in Inter project for some good specifics to include in bug reports.

image

image

@arrowtype
Copy link
Owner

I did this. Details at http://arrowtype.github.io/vf-slnt-test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants