From ad6eb6b52b4b3082397e8e011bd59a6d88a8f5f3 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:17:31 +0530 Subject: [PATCH] chore(css): Move CSS examples - imageset, fonts (#36772) * chore(css): Move CSS examples - imageset * update contributing reference * include font examples * Apply suggestions from code review Co-authored-by: Brian Thomas Smith * change order in east asian glyph examples * Update files/en-us/web/css/css_fonts/variable_fonts_guide/index.md Co-authored-by: Brian Thomas Smith * Update files/en-us/web/css/font-variant-numeric/index.md --------- Co-authored-by: Brian Thomas Smith --- .../contributing/our_repositories/index.md | 2 +- files/en-us/web/css/@font-face/index.md | 39 +- .../css_fonts/opentype_fonts_guide/index.md | 994 +++++++++++++++++- .../css_fonts/variable_fonts_guide/index.md | 578 +++++++++- files/en-us/web/css/font-style/index.md | 28 +- .../web/css/font-variant-numeric/index.md | 24 +- .../web/css/font-variation-settings/index.md | 166 ++- files/en-us/web/css/font-weight/index.md | 28 +- files/en-us/web/css/image/image-set/index.md | 47 +- 9 files changed, 1813 insertions(+), 93 deletions(-) diff --git a/files/en-us/mdn/community/contributing/our_repositories/index.md b/files/en-us/mdn/community/contributing/our_repositories/index.md index ffd6eafa6c3e8a6..c097dd17f332cc9 100644 --- a/files/en-us/mdn/community/contributing/our_repositories/index.md +++ b/files/en-us/mdn/community/contributing/our_repositories/index.md @@ -61,7 +61,7 @@ A Tier 3 project needs 1 admin. [//]: # "TODO: UPDATE WITH REPO TRIAGE" -The MDN Web Docs GitHub org contains a huge number of example repos. These generally contain freestanding code examples that are often linked to from our pages, but occasionally you'll find one of these examples embedded into a page using a macro call like this — `\{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}`. +The MDN Web Docs GitHub org contains a huge number of example repos. These generally contain freestanding code examples that are too big or can not be rendered using the [`EmbedLiveSample`](/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples#live_sample_macros) macro. These examples are embedded into the content pages using a macro call like this — `\{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}`. Always remember, if you are updating the code on any given page, you'll need to update the corresponding example repo as well. diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md index 077979795c753de..c15f1ad800bdf77 100644 --- a/files/en-us/web/css/@font-face/index.md +++ b/files/en-us/web/css/@font-face/index.md @@ -107,33 +107,24 @@ The `@font-face` at-rule may be used not only at the top level of a CSS, but als This example specifies a downloadable font to use, applying it to the entire body of the document: -```html - - - - - - Web Font Sample - - - - This is Bitstream Vera Serif Bold. - - +```html live-sample___web-font-example + + This is Bitstream Vera Serif Bold. + ``` -The output of this example code looks like so: +```css live-sample___web-font-example +@font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf"); +} + +body { + font-family: "Bitstream Vera Serif Bold", serif; +} +``` -{{EmbedGHLiveSample("css-examples/web-fonts/basic-web-font.html", '100%', '100')}} +{{EmbedLiveSample("web-font-example", "", "100px")}} ### Specifying local font alternatives diff --git a/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md b/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md index 4cb5ce0eeddd9e8..deb9673dcfca8da 100644 --- a/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/en-us/web/css/css_fonts/opentype_fonts_guide/index.md @@ -47,16 +47,247 @@ There are a number of different features to consider. They are grouped and expla Associated CSS property: {{cssxref("font-kerning")}} This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if {{cssxref("letter-spacing")}} is also set on your text, that is applied after kerning. +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-kerning-example +
+ Using font-kerning property +
+

Puffy Pangolins

+
+ + +
+ +
+ Using font-feature-settings property +
+

Puffy Pangolins

+
+ + +
+``` + +```css hidden live-sample___font-kerning-example +@font-face { + font-family: "Plex Serif"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Plex Serif", + "Times New Roman", + serif; + margin: 1rem; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-kerning-example +/* kerning: auto|normal|none */ +.container1 * { + font-kerning: normal; +} +.inactive.container1 * { + font-kerning: none; +} + +/* 'kern' 1|0 (on or off) */ +.container2 * { + font-feature-settings: "kern" 1; +} +.inactive.container2 * { + font-feature-settings: "kern" 0; +} +``` + +```js hidden live-sample___font-kerning-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` -{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}} +{{EmbedLiveSample("font-kerning-example", "", "450px")}} ### Alternates Associated CSS property: {{cssxref("font-variant-alternates")}} -Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied. The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally +Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied. The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-alternates-example +
+ Using font-variant-alternates property +
+

My Perfidious pangram

+
+ + +
+ +
+ Using font-feature-settings property +
+

My Perfidious pangram

+
+ + +
+``` + +```css hidden live-sample___font-variant-alternates-example +@font-face { + font-family: "Plex Serif"; + font-weight: normal; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff2") + format("woff2"); +} + +@font-face { + font-family: "Dancing Script"; + font-weight: normal; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/dancing-script/dancing-script-regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/dancing-script/dancing-script-regular.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Plex Serif", + "Times New Roman", + serif; + margin: 1rem; +} -{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} +.script { + font-family: "Dancing Script", serif; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > * { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-alternates-example +@font-feature-values "Plex Serif" { + @styleset { + alt-a: 1; + alt-g: 2; + } + @stylistic { + alternates: 1; + } +} + +@font-feature-values "Dancing Script" { + @stylistic { + alternates: 1; + } +} + +.container1 * { + font-variant-alternates: styleset(alt-a); +} +.container1 .script { + font-variant-alternates: stylistic(alternates); +} +.inactive.container1 * { + font-variant-alternates: normal; +} + +.container2 * { + font-feature-settings: "ss01"; +} +.container2 .script { + font-feature-settings: "salt"; +} +.inactive.container2 * { + font-feature-settings: + "ss01" 0, + "salt" 0; +} +``` + +```js hidden live-sample___font-variant-alternates-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` + +{{EmbedLiveSample("font-variant-alternates-example", "", "600px")}} In this case, `@stylistic(alternates)` will show all the alternate characters for either font. Applying this to just the word 'My' alters the way the 'M' renders, and applying `@styleset(alt-a)` only changes the lower case 'a'. @@ -84,25 +315,339 @@ Associated CSS property: {{cssxref("font-variant-ligatures")}} Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together. -While more common in script typefaces, in the below example they are used to create arrows: +While more common in script typefaces, in the below example they are used to create arrows. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-ligatures-example +
+ Using font-variant-ligatures property +
+

Puffy Perfect -^ <->

+
+ + +
+ +
+ Using font-feature-settings property +
+

Puffy Perfect -^ <->

+
+ + +
+``` + +```css hidden live-sample___font-variant-ligatures-example +@font-face { + font-family: "Playfair Display"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Playfair Display", + "Times New Roman", + serif; + margin: 1rem; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-ligatures-example +.container1 * { + font-variant-ligatures: common-ligatures discretionary-ligatures contextual; +} +.inactive.container1 * { + font-variant-ligatures: none; +} + +/* 'liga', 'dlig', 'hlig', 'calt' */ +.container2 * { + font-feature-settings: "dlig", "liga", "calt"; +} +.inactive.container2 * { + font-feature-settings: + "dlig" 0, + "liga" 0, + "calt" 0; +} +``` + +```js hidden live-sample___font-variant-ligatures-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` -{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}} +{{EmbedLiveSample("font-variant-ligatures-example", "", "550px")}} ### Position Associated CSS property: {{cssxref("font-variant-position")}} -Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is especially useful with the {{htmlelement("sub")}} or {{htmlelement("sup")}} elements. +Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is especially useful with the {{htmlelement("sub")}} or {{htmlelement("sup")}} elements. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-position-example +
+ Using font-variant-position property +
+

Ups1 and downs2

+
+ + +
+ +
+ Using font-feature-settings property +
+

Ups1 and downs2

+
+ + +
+``` + +```css hidden live-sample___font-variant-position-example +@font-face { + font-family: "Playfair Display"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Playfair Display", + "Times New Roman", + serif; + margin: 1rem; +} -{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}} +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-position-example +/* position: normal|sub|super */ +.container1 .super { + font-variant-position: super; +} +.container1 .sub { + font-variant-position: sub; +} +.inactive.container1 * { + font-variant-position: normal; +} + +/* 'subs', 'sups' */ +.container2 .super { + font-feature-settings: "sups"; +} +.container2 .sub { + font-feature-settings: "subs"; +} +.inactive.container2 * { + font-feature-settings: + "sups" 0, + "subs" 0; +} +``` + +```js hidden live-sample___font-variant-position-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` + +{{EmbedLiveSample("font-variant-position-example", "", "550px")}} ### Capitals Associated CSS property: {{cssxref("font-variant-caps")}} -One of the more common use cases for OpenType features is proper small caps. These are capital letters sized to fit better amongst lower case letters and are generally used for acronyms and abbreviations. +One of the more common use cases for OpenType features is proper small caps. These are capital letters sized to fit better amongst lower case letters and are generally used for acronyms and abbreviations. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-caps-example +
+ Using font-variant-caps property +
+

+ Small Caps and + All Small Caps +

+
+ + +
+ +
+ Using font-feature-settings property +
+

+ Small Caps and + All Small Caps +

+
+ + +
+``` + +```css hidden live-sample___font-variant-caps-example +@font-face { + font-family: "Playfair Display"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2") + format("woff2"); +} -{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}} +body { + font: + 1.2em "Playfair Display", + "Times New Roman", + serif; + margin: 1rem; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-caps-example +/* position: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps */ +.container1 .small-caps { + font-variant-caps: small-caps; +} +.container1 .all-small-caps { + font-variant-caps: all-small-caps; +} +.inactive.container1 * { + font-variant-caps: normal; +} + +/* 'smcp', 'c2sc' */ +.container2 .small-caps { + font-feature-settings: "smcp" 1; +} +.container2 .all-small-caps { + font-feature-settings: + "c2sc" 1, + "smcp" 1; +} +.inactive.container2 * { + font-feature-settings: + "smcp" 0, + "c2sc" 0; +} +``` + +```js hidden live-sample___font-variant-caps-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` + +{{EmbedLiveSample("font-variant-caps-example", "", "700px")}} ### Numerals @@ -124,28 +669,447 @@ Ordinals are also supported (such as '1st' or '3rd'), as is a slashed zero if pr #### Lining and old-style figures -{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}} +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-numeric-example +
+ Using font-variant-numeric property +
+

+ 6,142 or 6,142 +

+
+ + +
+ +
+ Using font-feature-settings property +
+

+ 6,142 or 6,142 +

+
+ + +
+``` + +```css hidden live-sample___font-variant-numeric-example +@font-face { + font-family: "Source Serif"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Source Serif", + "Times New Roman", + serif; + margin: 20px; + padding: 0; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-numeric-example +.container1 .lining { + font-variant-numeric: lining-nums; +} +.container1 .oldstyle { + font-variant-numeric: oldstyle-nums; +} +.inactive.container1 * { + font-variant-numeric: normal; +} + +.container2 .lining { + font-feature-settings: "lnum" 1; +} +.container2 .oldstyle { + font-feature-settings: "onum" 1; +} +.inactive.container2 * { + font-feature-settings: + "lnum" 0, + "onum" 0; +} +``` + +```js hidden live-sample___font-variant-numeric-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` + +{{EmbedLiveSample("font-variant-numeric-example", "", "550px")}} #### Fractions, ordinals, and slashed zero -{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}} +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-numeric-frac-example +
+ Using font-variant-numeric property +
+

+ 3/16, or + 1st of 0 +

+
+ + +
+ +
+ Using font-feature-settings property +
+

+ 3/16, or + 1st of 0 +

+
+ + +
+``` + +```css hidden live-sample___font-variant-numeric-frac-example +@font-face { + font-family: "Source Serif"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Source Serif", + "Times New Roman", + serif; + margin: 20px; + padding: 0; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-numeric-frac-example +.container1 .diagonal-fractions { + font-variant-numeric: diagonal-fractions; +} +.container1 .ordinal { + font-variant-numeric: ordinal; +} +.container1 .zero { + font-variant-numeric: slashed-zero; +} +.inactive.container1 * { + font-variant-numeric: normal; +} + +.container2 .diagonal-fractions { + font-feature-settings: "frac" 1; +} +.container2 .ordinal { + font-feature-settings: "ordn" 1; +} +.container2 .zero { + font-feature-settings: "zero" 1; +} +.inactive.container2 * { + font-feature-settings: + "frac" 0, + "ordn" 0, + "zero" 0; +} +``` + +```js hidden live-sample___font-variant-numeric-frac-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` + +{{EmbedLiveSample("font-variant-numeric-frac-example", "", "550px")}} ### East Asian Associated CSS property: {{cssxref("font-variant-east-asian")}} -This allows access to various alternate forms of glyphs within a font. The example below shows a string of glyphs with only the OpenType set 'jis78' enabled. Uncheck the box below and you'll see more characters displayed. +This allows access to various alternate forms of glyphs within a font. The example below shows a string of normal glyphs. Uncheck the box below and you'll see characters with only the `jis78` glyphs. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-east-asian-example +
+ Using font-variant-numeric property +
+

唖 芦 溢 茨 鰯 嘘 欝 厩 噂

+
+ + +
+ +
+ Using font-feature-settings property +
+

唖 芦 溢 茨 鰯 嘘 欝 厩 噂

+
+ + +
+``` + +```css hidden live-sample___font-variant-east-asian-example +@font-face { + font-family: "Kokoro"; + font-weight: normal; + font-style: normal; + font-stretch: normal; + src: url("https://mdn.github.io/shared-assets/fonts/kokoro/Kokoro.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Kokoro", + "Times New Roman", + serif; + margin: 20px; + padding: 0; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-east-asian-example +.container1 * { + font-variant-east-asian: normal; +} +.inactive.container1 * { + font-variant-east-asian: jis78; +} + +.container2 * { + font-feature-settings: "jp78" 0; +} +.inactive.container2 * { + font-feature-settings: "jp78"; +} +``` + +```js hidden live-sample___font-variant-east-asian-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` -{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}} +{{EmbedLiveSample("font-variant-east-asian-example", "", "750px")}} > [!NOTE] > These glyphs were copied out of a font sample and are not intended as prose. ### Font variant shorthand -The {{Cssxref("font-variant")}} property is the shorthand syntax for defining all of the above. Setting a value of `normal` resets all properties to their initial value. Setting a value of `none` sets `font-variant-ligatures` to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of `none` being supplied here.) +The {{Cssxref("font-variant")}} property is the shorthand syntax for defining all of the above. Setting a value of `normal` resets all properties to their initial value. Setting a value of `none` sets `font-variant-ligatures` to none and all other properties to their initial value. Meaning that if kerning is on by default, it will still be on even with a value of `none` being supplied here. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___font-variant-example +
+ Using font-variant property +
+

Spiffy Plastic -> 3/4 time

+
+ + +
+ +
+ Using font-feature-settings property +
+

Spiffy Plastic -> 3/4 time

+
+ + +
+``` + +```css hidden live-sample___font-variant-example +@font-face { + font-family: "Playfair Display"; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff") + format("woff"), + url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2") + format("woff2"); +} + +body { + font: + 1.2em "Playfair Display", + "Times New Roman", + serif; + margin: 20px; + padding: 0; +} + +fieldset { + margin-bottom: 1rem; +} + +label { + user-select: none; +} + +.container > p { + font-size: 4rem; + margin: 1.5rem 0; +} +``` + +```css live-sample___font-variant-example +.container1 * { + font-variant: common-ligatures discretionary-ligatures contextual + diagonal-fractions; +} +.inactive.container1 * { + font-variant: none; +} + +.container2 * { + font-feature-settings: "dlig", "liga", "calt", "frac"; +} +.inactive.container2 * { + font-feature-settings: + "dlig" 0, + "liga" 0, + "calt" 0, + "frac" 0; +} +``` + +```js hidden live-sample___font-variant-example +const checkBox1 = document.getElementById("checkbox1"); +const checkBox2 = document.getElementById("checkbox2"); +const container1 = document.querySelector(".container1"); +const container2 = document.querySelector(".container2"); + +const toggleInactive = (checkBox, container) => { + if (checkBox.checked) { + container.classList.remove("inactive"); + } else { + container.classList.add("inactive"); + } +}; + +checkBox1.addEventListener("change", () => { + toggleInactive(checkBox1, container1); +}); + +checkBox2.addEventListener("change", () => { + toggleInactive(checkBox2, container2); +}); +``` -{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}} +{{EmbedLiveSample("font-variant-example", "", "700px")}} ## Font feature settings diff --git a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md index 45ffdde345901b8..311f3b18351af87 100644 --- a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md @@ -72,9 +72,88 @@ font-weight: 375; font-variation-settings: "wght" 375; ``` -The following live example's CSS can be edited to allow you to play with font-weight values. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font-weight values. -{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}} +```html hidden live-sample___variable-fonts-weight-example +
+

Weight

+ (font-weight: 625) +
+
+

Weight

+ (font-variation-settings: "wght" 625) +
+
+

Weight

+ (font-variation-settings: "wght" 625)
+ + +
+``` + +```css hidden live-sample___variable-fonts-weight-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 35% 100%; + font-style: normal; + font-display: swap; +} + +p { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 625; +} +``` + +```css live-sample___variable-fonts-weight-example +/* weight range is 300 to 900 */ +.p1 { + font-weight: 625; +} + +/* weight range is 300 to 900 */ +.p2 { + font-variation-settings: "wght" 625; +} + +/* Adjust with slider & custom property */ +.p3 { + font-variation-settings: "wght" var(--text-axis); +} +``` + +```js hidden live-sample___variable-fonts-weight-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); + +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` + +{{EmbedLiveSample("variable-fonts-weight-example", "", "450px")}} ### Width @@ -89,9 +168,89 @@ font-stretch: 115%; font-variation-settings: "wdth" 115; ``` -The following live example's CSS can be edited to allow you to play with font width values. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font-width values. + +```html hidden live-sample___variable-fonts-width-example +
+

Width

+ (font-stretch: 60%) +
+
+

Width

+ (font-variation-settings: "wdth" 60) +
+
+

Width

+ (font-variation-settings: "wdth" 60)
+ + + +
+``` + +```css hidden live-sample___variable-fonts-width-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 35% 100%; + font-style: normal; + font-display: swap; +} + +p { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 60; +} +``` + +```css live-sample___variable-fonts-width-example +/* width range is 55% to 100% */ +.p1 { + font-stretch: 60%; +} + +/* width range is an integer from 55 to 100 */ +.p2 { + font-variation-settings: "wdth" 60; +} + +/* Adjust with slider & custom property */ +.p3 { + font-variation-settings: "wdth" var(--text-axis); +} +``` + +```js hidden live-sample___variable-fonts-width-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); + +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}} +{{EmbedLiveSample("variable-fonts-width-example", "", "450px")}} ### Italic @@ -107,9 +266,92 @@ font-variation-settings: "ital" 1; font-synthesis: none; ``` -The following live example's CSS can be edited to allow you to play with font italics. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font-italics. + +```html hidden live-sample___variable-fonts-italic-example +
+

Italic

+ (font-style: italic) +
+
+

Italic

+ (font-variation-settings: "ital" 1) +
+
+

Italic

+ (font-variation-settings: "ital" 1)
+ + + +
+``` + +```css hidden live-sample___variable-fonts-italic-example +@font-face { + font-family: "Jost VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/jost-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 75% 150%; + font-display: swap; +} + +p { + font: + 1.2em "Jost VF", + Helvetica, + Arial, + sans-serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 1; +} +``` + +```css live-sample___variable-fonts-italic-example +/* italic range is 0 or 1 */ +.p1 { + font-synthesis: none; + font-style: italic; +} + +/* italic range is 0 or 1 */ +.p2 { + font-synthesis: none; + font-variation-settings: "ital" 1; +} + +/* Adjust with slider & custom property */ +.p3 { + font-synthesis: none; + font-variation-settings: "ital" var(--text-axis); +} +``` + +```js hidden live-sample___variable-fonts-italic-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); -{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}} +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` + +{{EmbedLiveSample("variable-fonts-italic-example", "", "450px")}} ### Slant @@ -127,7 +369,7 @@ Prefer the `font-style` property over the `font-variation-settings` property. Th In the following live example, you can adjust the slant. -```html hidden +```html hidden live-sample___slant-example

Slant

(font-style: oblique 5deg) @@ -151,22 +393,7 @@ In the following live example, you can adjust the slant.
``` -```css hidden -:root { - --text-axis: -5; -} - -p { - display: inline-block; - font-size: 2rem; -} - -.adjustable-box { - border: 1px dashed; -} -``` - -```css +```css hidden live-sample___slant-example @font-face { font-family: "SlantFont"; font-style: oblique -15 15; @@ -176,8 +403,18 @@ p { p { font-family: "SlantFont"; + display: inline-block; + margin: 1rem; + font-size: 4rem; +} + +.adjustable-box { + border: 1px dashed; + --text-axis: -5; } +``` +```css live-sample___slant-example .font-style { font-style: oblique 5deg; } @@ -191,7 +428,7 @@ p { } ``` -```js hidden +```js hidden live-sample___slant-example const angle = document.querySelector("#slant-angle"); const text = document.querySelector("#angle-text"); const adjustable = document.querySelector(".adjustable"); @@ -203,7 +440,7 @@ angle.addEventListener("input", (e) => { }); ``` -{{EmbedLiveSample("slant", "100%", "350")}} +{{EmbedLiveSample("slant-example", "", "400")}} ### Optical size @@ -221,9 +458,97 @@ font-optical-sizing: auto; font-variation-settings: "opsz" 36; ``` -The following live example's CSS can be edited to allow you to play with optical size values. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with optical size values. + +```html hidden live-sample___optical-sizing-example +
+

Optical Size

+ (font-optical-sizing: none) +
+
+

Optical Size

+ (font-optical-sizing: auto) +
+
+

Optical Size

+ (font-variation-settings: "opsz" 64) +
+ +
+

Optical Size

+ (font-variation-settings: "opsz" -64)
+ + + +
+``` + +```css hidden live-sample___optical-sizing-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 75% 150%; + font-style: normal; + font-display: swap; +} + +p { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 64; +} +``` + +```css live-sample___optical-sizing-example +.p1 { + font-optical-sizing: none; +} +/* font-optical-sizing can be auto or none */ +.p2 { + font-optical-sizing: auto; +} + +/* optical range is from 8 to 144 */ +.p3 { + font-variation-settings: "opsz" 64; +} + +/* Adjust with slider & custom property */ +.p4 { + font-variation-settings: "opsz" var(--text-axis); +} +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}} +```js hidden live-sample___optical-sizing-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); + +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` + +{{EmbedLiveSample("optical-sizing-example", "", "550px")}} ### Custom axes @@ -237,9 +562,83 @@ Grade may become one of the more common custom axes as it has a known history in font-variation-settings: "GRAD" 88; ``` -The following live example's CSS can be edited to allow you to play with font grade values. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font-grade values. -{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}} +```html hidden live-sample___grade-example +
+

Grade

+ (font-variation-settings: 'GRAD' 88) +
+ +
+

Grade

+ (font-variation-settings: 'GRAD' 88)
+ + + +
+``` + +```css hidden live-sample___grade-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 75% 150%; + font-style: normal; + font-display: swap; +} + +p { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + font-size: 64px; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 88; +} +``` + +```css live-sample___grade-example +/* grade range is 88 to 150 */ +.p1 { + font-size: 64px; + font-variation-settings: "GRAD" 88; +} + +/* Adjust with slider & custom property */ +.p2 { + font-size: 64px; + font-variation-settings: "GRAD" var(--text-axis); +} +``` + +```js hidden live-sample___grade-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); + +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` + +{{EmbedLiveSample("grade-example", "", "300px")}} ### Using a variable font: @font-face changes @@ -316,9 +715,126 @@ h1 { ## Sample pages -The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a `font-variation-settings` string and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the `h2`, which only alters the grade axis custom property value. +The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a `font-variation-settings` string and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the `h2`, which only alters the grade axis custom property value. Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html hidden live-sample___sample-page-example +
+

Moby Dick

+

CHAPTER 1. Loomings.

+

+ Call me Ishmael. Some years ago—never mind how long precisely–having little + or no money in my purse, and nothing particular to interest me on shore, I + thought I would sail about a little and see the watery part of the world. It + is a way I have of driving off the spleen and regulating the circulation. + Whenever I find myself growing grim about the mouth; whenever it is a damp, + drizzly November in my soul; whenever I find myself involuntarily pausing + before coffin warehouses, and bringing up the rear of every funeral I meet; + and especially whenever my hypos get such an upper hand of me, that it + requires a strong moral principle to prevent me from deliberately stepping + into the street, and methodically knocking people’s hats off then, I account + it high time to get to sea as soon as I can. +

+
+
+
+

Moby Dick

+

CHAPTER 1. (hover here)

+

+ Call me Ishmael. Some years ago—never mind how long precisely–having little + or no money in my purse, and nothing particular to interest me on shore, I + thought I would sail about a little and see the watery part of the world. It + is a way I have of driving off the spleen and regulating the circulation. + Whenever I find myself growing grim about the mouth; whenever it is a damp, + drizzly November in my soul; whenever I find myself involuntarily pausing + before coffin warehouses, and bringing up the rear of every funeral I meet; + and especially whenever my hypos get such an upper hand of me, that it + requires a strong moral principle to prevent me from deliberately stepping + into the street, and methodically knocking people’s hats off then, I account + it high time to get to sea as soon as I can. +

+
+``` + +```css hidden live-sample___sample-page-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 75% 150%; + font-style: normal; + font-display: swap; +} + +body { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + margin: 20px; + padding: 0; +} + +.container * { + margin: 0.5rem auto 1rem; + max-width: 42rem; +} +``` + +```css live-sample___sample-page-example +.container1 h1 { + font-optical-sizing: auto; + font-size: 5rem; + font-stretch: 85%; + font-weight: 450; +} +.container1 h2 { + font-optical-sizing: auto; + font-size: 2.25rem; + font-stretch: 90%; + font-weight: 575; +} +.container1 p { + font-optical-sizing: auto; + font-size: 1rem; + font-stretch: 100%; + font-weight: 375; +} +.demo2 { + --text-wght: 375; + --text-wdth: 100; + --text-opsz: 16; + --text-GRAD: 88; +} +.container2 > * { + font-size: 5rem; + font-variation-settings: + "wght" var(--text-wght), + "wdth" var(--text-wdth), + "opsz" var(--text-opsz), + "GRAD" var(--text-GRAD); +} +.container2 h1 { + --text-wght: 450; + --text-wdth: 85; + --text-opsz: 80; + font-size: 5rem; +} +.container2 h2 { + --text-wght: 575; + --text-wdth: 95; + --text-opsz: 36; + font-size: 2.25rem; +} +.container2 h2:hover { + --text-GRAD: 130; +} +.container2 p { + font-size: 1rem; +} +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}} +{{EmbedLiveSample("sample-page-example", "", "850px")}} ## Resources diff --git a/files/en-us/web/css/font-style/index.md b/files/en-us/web/css/font-style/index.md index b5d989d00ef9860..263e7590e527181 100644 --- a/files/en-us/web/css/font-style/index.md +++ b/files/en-us/web/css/font-style/index.md @@ -51,10 +51,32 @@ Variable fonts can offer a fine control over the degree to which an oblique face For TrueType or OpenType variable fonts, the `"slnt"` variation is used to implement varying slant angles for oblique, and the `"ital"` variation with a value of 1 is used to implement italic values. See {{cssxref("font-variation-settings")}}. -> [!NOTE] -> For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-style: oblique` can accept an ``. The demo loads with `font-style: oblique 23deg;`. Change the value to see the slant of the text change. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Change the angle value to see the slant of the text change. -{{EmbedGHLiveSample("css-examples/variable-fonts/oblique.html", '100%', 860)}} +```html live-sample___oblique-example +

+ ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+``` + +```css live-sample___oblique-example +@font-face { + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); + font-family: "AmstelvarAlpha"; + font-style: normal; +} + +.sample { + font: + 2rem "AmstelvarAlpha", + sans-serif; + /*font-variation-settings: "slnt" 12;*/ + font-style: oblique 23deg; +} +``` + +{{EmbedLiveSample("oblique-example", "", "200px")}} ## Accessibility diff --git a/files/en-us/web/css/font-variant-numeric/index.md b/files/en-us/web/css/font-variant-numeric/index.md index 038972e44e07c10..7dcbd96103c583b 100644 --- a/files/en-us/web/css/font-variant-numeric/index.md +++ b/files/en-us/web/css/font-variant-numeric/index.md @@ -85,7 +85,29 @@ This property can take one of two forms: ### Setting ordinal numeric forms -{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}} +Click "Play" in the code blocks below to edit the example in the MDN Playground: + +```html live-sample___font-variant-numeric-example +

1st, 2nd, 3rd, 4th, 5th

+``` + +```css live-sample___font-variant-numeric-example +@font-face { + font-family: "Source Sans Pro"; + src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf") + format("opentype"); + font-weight: 400; + font-style: normal; +} + +.ordinal { + font-family: "Source Sans Pro"; + font-size: 2rem; + font-variant-numeric: ordinal; +} +``` + +{{EmbedLiveSample("font-variant-numeric-example")}} ## Specifications diff --git a/files/en-us/web/css/font-variation-settings/index.md b/files/en-us/web/css/font-variation-settings/index.md index 8a788adb29a16f5..a9c87895e7faec2 100644 --- a/files/en-us/web/css/font-variation-settings/index.md +++ b/files/en-us/web/css/font-variation-settings/index.md @@ -103,15 +103,173 @@ You can find a number of other variable font examples in our [Variable fonts gui ### Controlling variable font weight (wght) -You can edit the CSS in the example below to play with different font weight values. See what happens when you specify a value outside the weight range. +Click "Play" in the code blocks below to edit the example in the MDN Playground.Edit the CSS to play with different font weight values. See what happens when you specify a value outside the weight range. + +```html hidden live-sample___variable-fonts-weight-example +
+

Weight

+ (font-weight: 625) +
+
+

Weight

+ (font-variation-settings: "wght" 625) +
+
+

Weight

+ (font-variation-settings: "wght" 625)
+ + +
+``` + +```css hidden live-sample___variable-fonts-weight-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 35% 100%; + font-style: normal; + font-display: swap; +} + +p { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 625; +} +``` + +```css live-sample___variable-fonts-weight-example +/* weight range is 300 to 900 */ +.p1 { + font-weight: 625; +} + +/* weight range is 300 to 900 */ +.p2 { + font-variation-settings: "wght" 625; +} + +/* Adjust with slider & custom property */ +.p3 { + font-variation-settings: "wght" var(--text-axis); +} +``` + +```js hidden live-sample___variable-fonts-weight-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); + +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 940)}} +{{EmbedLiveSample("variable-fonts-weight-example", "", "450px")}} ### Controlling variable font slant (slnt) -You can edit the CSS in the example below to play with different font slant/oblique values. +Click "Play" in the code blocks below to edit the example in the MDN Playground.Edit the CSS to play with different font slant/oblique values. + +```html hidden live-sample___variable-fonts-slant-example +
+

Slant

+ (font-style: oblique 14deg) +
+
+

Slant

+ (font-variation-settings: 'slnt' 12) +
+
+

Slant

+ (font-variation-settings: 'slnt' 5)
+ + +
+``` + +```css hidden live-sample___variable-fonts-slant-example +@font-face { + font-family: "Roboto VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/Roboto-VF.woff2") + format("woff2-variations"); + font-weight: 100 900; + font-stretch: 75% 100%; + font-style: oblique 0deg 12deg; + font-display: swap; +} + +p { + font: + 1.2em "Roboto VF", + Helvetica, + sans-serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 5; +} +``` + +```css live-sample___variable-fonts-slant-example +/* slant range is from 0deg to 12deg */ +.p1 { + font-style: oblique 14deg; +} + +/* slant range is from 0 to 12 */ +.p2 { + font-variation-settings: "slnt" 12; +} + +/* Adjust with slider & custom property */ +.p3 { + font-variation-settings: "slnt" var(--text-axis); +} +``` + +```js hidden live-sample___variable-fonts-slant-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); + +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 940)}} +{{EmbedLiveSample("variable-fonts-slant-example", "", "450px")}} ## Specifications diff --git a/files/en-us/web/css/font-weight/index.md b/files/en-us/web/css/font-weight/index.md index 856946af72ec20b..2a733df4930bbe1 100644 --- a/files/en-us/web/css/font-weight/index.md +++ b/files/en-us/web/css/font-weight/index.md @@ -167,9 +167,33 @@ While many fonts have a particular weight corresponding to one of the numbers in For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying widths. -This demo loads with `font-weight: 500;` set. Change the value of the `font-weight` property to see the weight of the text change. +This demo loads with `font-weight: 500;` set. Change the value of the `font-weight` property in the `.sample` selector to see the weight of the text change (e.g., 200, 700). Click "Play" in the code blocks below to edit the example in the MDN Playground: -{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}} +```html live-sample___font-weight-example +

+ ...it would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+``` + +```css live-sample___font-weight-example +@font-face { + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf"); + font-family: "MutatorSans"; + font-style: normal; + font-weight: 1 1000; +} + +.sample { + text-transform: uppercase; + font-weight: 500; + font: + 1.5rem "MutatorSans", + sans-serif; +} +``` + +{{EmbedLiveSample("font-weight-example", "", "200px")}} ## Accessibility diff --git a/files/en-us/web/css/image/image-set/index.md b/files/en-us/web/css/image/image-set/index.md index 74fb753a2ef01ec..bac2b7b20db666b 100644 --- a/files/en-us/web/css/image/image-set/index.md +++ b/files/en-us/web/css/image/image-set/index.md @@ -68,31 +68,54 @@ Browsers do not provide any special information on background images to assistiv This example shows how to use [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) to provide two alternative {{cssxref("background-image")}} options, chosen depending on the resolution needed: a normal version and a high-resolution version. -{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} +```html live-sample___image-set-example +
+``` -> [!NOTE] -> In the above example, the `-webkit` prefixed version is also used to support Chrome and Safari. In Firefox 90, support was added for `-webkit-image-set()` as an alias to `image-set()` (in order to provide compat where developers had not added the standard property). +```css live-sample___image-set-example +.box { + width: 400px; + height: 200px; + background-repeat: no-repeat; + background-size: cover; -### Using image-set() to provide alternative image formats + background-image: image-set( + url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg") + 1x, + url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg") + 2x + ); +} +``` -In the next example the `type()` function is used to serve the image in AVIF and JPEG formats. If the browser supports avif, it will choose that version. Otherwise it will use the jpeg version. +{{EmbedLiveSample("image-set-example", "", "250px")}} -{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} +### Using image-set() to provide alternative image formats -#### Providing a fallback +In the next example the `type()` function is used to serve the image in AVIF and JPEG formats. If the browser supports avif, it will choose that version. Otherwise it will use the jpeg version. -There is no inbuilt fallback for `image-set()`; therefore to include a {{cssxref("background-image")}} for those browsers that do not support the function, a separate declaration is required before the line using `image-set()`. +```html live-sample___image-set-type-example +
+``` -```css +```css live-sample___image-set-type-example .box { - background-image: url("large-balloons.jpg"); + width: 400px; + height: 200px; + background-repeat: no-repeat; + background-size: cover; + background-image: image-set( - "large-balloons.avif" type("image/avif"), - "large-balloons.jpg" type("image/jpeg") + "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.avif" + type("image/avif"), + "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg" + type("image/jpeg") ); } ``` +{{EmbedLiveSample("image-set-type-example", "", "250px")}} + ## Specifications {{Specifications}}