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.

Sign up for GitHub

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(css): rephrase vriable font example proes #37258

Merged
merged 3 commits into from
Dec 19, 2024
Merged

fix(css): rephrase vriable font example proes #37258

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8c4e32
fix(css): rephrase vriable font example proes
OnkarRuikar Dec 18, 2024
c1faec5
Update files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
OnkarRuikar Dec 18, 2024
483710e
Apply suggestions from code review
OnkarRuikar Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,11 +661,12 @@ The basic syntax is the same, but the font technology can be specified, and allo
format("woff2-variations");
font-weight: 125 950;
font-stretch: 75% 125%;

font-style: normal;
}
```

In this case, the `normal` value indicates that this font file should be used when in a style rule the `font-family` property is `MyVariableFontName` and the [font-style](/en-US/docs/Web/CSS/font-style) property is `normal`. The `oblique 0deg` and `oblique 0deg 20deg` values, because of the `0deg`, also indicate the font has normal upright glyphs.
In this case, the `font-style: normal` declaration indicates that this font file should be used when `font-family` is set to `MyVariableFontName` and [`font-style`](/en-US/docs/Web/CSS/font-style) is set to `normal`. As an alternative, you could use `font-style: oblique 0deg` or `font-style: oblique 0deg 20deg` to indicate that the font has normal upright glyphs (indicated by `0deg`).

#### Example for a font that contains only italics and no upright characters

Expand All @@ -676,11 +677,12 @@ In this case, the `normal` value indicates that this font file should be used wh
format("woff2-variations");
font-weight: 125 950;
font-stretch: 75% 125%;

font-style: italic;
}
```

In this case, the `italic` value indicates that this font file should be used when in a style rule the `font-family` property is `MyVariableFontName` and the [font-style](/en-US/docs/Web/CSS/font-style) property is `italic`. The `oblique 14deg` value also indicates the font has italic glyphs.
In this case, the `font-style: italic` declaration indicates that this font file should be used when `font-family` is set to `MyVariableFontName` and [`font-style`](/en-US/docs/Web/CSS/font-style) is set to `italic`. As an alternative, you could use `font-style: oblique 14deg` to indicate that the font has italic glyphs.

#### Example for a font that contains an oblique (slant) axis

Expand All @@ -691,6 +693,7 @@ In this case, the `italic` value indicates that this font file should be used wh
format("woff2-variations");
font-weight: 125 950;
font-stretch: 75% 125%;

font-style: oblique 0deg 12deg;
}
```
Expand Down
Loading