A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/ja/docs/Web/API/CSSFontFeatureValuesRule below:

CSSFontFeatureValuesRule - Web API | MDN

CSSFontFeatureValuesRule

Baseline 2025 *

Newly available

CSSFontFeatureValuesRule インターフェイスは @font-feature-values アットルールを表し、開発者が開発者が各フォントフェイスに対して、 font-variant-alternates で使用する機能インデックスを指定するための共通の名前を割り当てることができます。

CSSRule CSSFontFeatureValuesRule インスタンスプロパティ

祖先である CSSRule から継承したプロパティがあります。

CSSFontFeatureValuesRule.fontFamily

このルールが適用されるフォントファミリを示す文字列です。

インスタンスメソッド

祖先である CSSRule から継承したメソッドがあります。

例 フォントファミリーの読み取り

この例では、 2 つの @font-feature-values を宣言しています。 1 つは Font One フォントファミリー用、他の 1 つは Font Two フォントファミリ用です。そして、 CSSOM を使用して、これらのフォントファミリーを読み取り、ログに出力しています。

HTML CSS
/* Font One の "nice-style" のアットルール */
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/* Font Two の "nice-style" のアットルール */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* 単一の宣言でアットルールを適用 */
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
JavaScript
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;

const fontOne = rules[0]; // CSSFontFeatureValuesRule
log.textContent = `1 つ目の '@font-feature-values' ファミリー: "${fontOne.fontFamily}"\n`;

const fontTwo = rules[1]; // もう一つの CSSFontFeatureValuesRule
log.textContent += `2 つ目の '@font-feature-values' ファミリー: "${fontTwo.fontFamily}"`;
仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4