From 6a6da8a618a19f5d112f0079036748af21506bdb Mon Sep 17 00:00:00 2001 From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Date: Sun, 19 Jan 2025 11:56:52 +0900 Subject: [PATCH 1/2] Add descriptor requirement to `@font-face` --- files/en-us/web/css/@font-face/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md index a2cc498998123a5..5a07f0acd8c66c5 100644 --- a/files/en-us/web/css/@font-face/index.md +++ b/files/en-us/web/css/@font-face/index.md @@ -31,7 +31,7 @@ The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At - {{cssxref("@font-face/font-display", "font-display")}} - : Determines how a font face is displayed based on whether and when it is downloaded and ready to use. - {{cssxref("@font-face/font-family", "font-family")}} - - : Specifies a name that will be used as the font face value for font properties. + - : Specifies a name that will be used as the font face value for font properties. It is required for the @font-face rule to be valid. - {{cssxref("@font-face/font-stretch", "font-stretch")}} - : A {{cssxref("font-stretch")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-stretch: 50% 200%;` - {{cssxref("@font-face/font-style", "font-style")}} From 127f86f1cbbbbe9ed0aaf9b3156d340dc8e059c9 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 21 Jan 2025 13:25:35 +0000 Subject: [PATCH 2/2] Couple of grammar tweaks --- files/en-us/web/css/@font-face/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md index 5a07f0acd8c66c5..d1d430bd1c6e05a 100644 --- a/files/en-us/web/css/@font-face/index.md +++ b/files/en-us/web/css/@font-face/index.md @@ -31,23 +31,23 @@ The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At - {{cssxref("@font-face/font-display", "font-display")}} - : Determines how a font face is displayed based on whether and when it is downloaded and ready to use. - {{cssxref("@font-face/font-family", "font-family")}} - - : Specifies a name that will be used as the font face value for font properties. It is required for the @font-face rule to be valid. + - : Specifies a name that will be used as the font face value for font properties. A `font-family` name is required for the `@font-face` rule to be valid. - {{cssxref("@font-face/font-stretch", "font-stretch")}} - - : A {{cssxref("font-stretch")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-stretch: 50% 200%;` + - : A {{cssxref("font-stretch")}} value. Accepts two values to specify a range that is supported by a font face, for example `font-stretch: 50% 200%;` - {{cssxref("@font-face/font-style", "font-style")}} - - : A {{cssxref("font-style")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-style: oblique 20deg 50deg;` + - : A {{cssxref("font-style")}} value. Accepts two values to specify a range that is supported by a font face, for example `font-style: oblique 20deg 50deg;` - {{cssxref("@font-face/font-weight", "font-weight")}} - - : A {{cssxref("font-weight")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-weight: 100 400;` + - : A {{cssxref("font-weight")}} value. Accepts two values to specify a range that is supported by a font face, for example `font-weight: 100 400;` - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - : Allows control over advanced typographic features in OpenType fonts. - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - - : Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values. + - : Allows low-level control over OpenType or TrueType font variations, by specifying the four-letter axis names of the features to vary, along with their variation values. - {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - : Defines the line gap metric for the font. - {{cssxref("@font-face/size-adjust", "size-adjust")}} - : Defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size. - {{cssxref("@font-face/src", "src")}} - - : Specifies references to font resources including hints about the font format and technology. It is required for the @font-face rule to be valid. + - : Specifies references to font resources including hints about the font format and technology. A `src` is required for the `@font-face` rule to be valid. - {{cssxref("@font-face/unicode-range", "unicode-range")}} - : The range of Unicode code points to be used from the font. @@ -58,9 +58,9 @@ It's common to use both `url()` and `local()` together, so that the user's insta If the `local()` function is provided, specifying a font name to look for on the user's device, and if the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the `url()` function is downloaded and used. Browsers attempt to load resources in their list declaration order, so usually `local()` should be written before `url()`. Both functions are optional, so a rule block containing only one or more `local()` without `url()` is possible. -If a more specific fonts with `format()` or `tech()` values are desired, these should be listed _before_ versions that don't have these values, as the less-specific variant would otherwise be tried and used first. +If more specific fonts with `format()` or `tech()` values are desired, these should be listed _before_ versions that don't have these values, as the less specific variant would otherwise be tried and used first. -By allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection. +By allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts that are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection. > [!NOTE] > Fallback strategies for loading fonts on older browsers are described in the [`src` descriptor page](/en-US/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers).