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

fix(fonts): ensure italic looks like italic in Safari #10828

Merged
merged 5 commits into from
May 2, 2024

Conversation

ironnysh
Copy link
Contributor

@ironnysh ironnysh commented Apr 1, 2024

Summary

Text marked with <em> element is not slanted. Fixes #7203.

Problem

A possible bug with Inter (italic) font requires extra styling to display slanted text in Safari.

Solution

Added font-variation-settings: "slnt" -10; to em elements.
See additional references here.


Screenshots

Before

After

safari-em

How did you test this change?

Browsed the content in Safari 17.4 after adding the code above to _reset.scss

Text marked with <em> element is not slanted. See issue: mdn#7203
@ironnysh ironnysh requested a review from a team as a code owner April 1, 2024 16:26
@ironnysh ironnysh changed the title Fix: Inter italic bug in Safari fix(UI): Inter italic bug in Safari Apr 1, 2024
@caugner caugner changed the title fix(UI): Inter italic bug in Safari fix(fonts): ensure <em>s are italic in Safari Apr 4, 2024
@github-actions github-actions bot added plus work around features related to MDN Plus plus:ai-help labels Apr 4, 2024
@caugner caugner changed the title fix(fonts): ensure <em>s are italic in Safari fix(fonts): ensure italic looks like italic in Safari Apr 4, 2024
@caugner caugner merged commit a06e429 into mdn:main May 2, 2024
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
plus:ai-help plus work around features related to MDN Plus
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Italic not showing on Safari
2 participants