CSSFontFaceRule: style プロパティ

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

style は CSSFontFaceRule インターフェイスの読み取り専用プロパティで、@font-face ルールの本体で利用できる記述子を表す CSSFontFaceDescriptors オブジェクトを返します。

値

CSSFontFaceDescriptors です。

style プロパティ自体は、CSSFontFaceDescriptors オブジェクトを置き換えることができないという意味で読み取り専用ですが、style プロパティに直接値を代入することは可能です。これは、その cssText プロパティに値を代入することと同等です。また、CSSFontFaceDescriptors オブジェクトを変更するのに setProperty() および removeProperty() メソッドを使用することもできます。

例

基本的な使い方

この例では、@font-face ルールを定義し、CSSFontFaceDescriptors を使用して記述子の値を読み戻しています。

CSS

css

@font-face {
  font-family: "MyHelvetica";
  src:
    local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

#log {
  height: 200px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

const myRules = document.getElementById("css-output").sheet.cssRules;
for (const rule of myRules) {
  if (rule instanceof CSSFontFaceRule) {
    const descriptors = rule.style;
    if (descriptors instanceof CSSStyleDeclaration) {
      log(`rule.style is a CSSStyleDeclaration.`);
    } else {
      log(`rule.style is a CSSFontFaceDescriptors.`);
    }
    log("Descriptors:");
    log(` font-family: ${descriptors.fontFamily}`);
    log(` src: ${descriptors.src}`);
    log(` font-weight: ${descriptors["font-weight"]}`);
    log(` font-style: ${descriptors.fontStyle}`);
    log(` font-display: ${descriptors["font-display"]}`);
  }
}

結果

仕様書

仕様書
CSS Fonts Module Level 4 # dom-cssfontfacerule-style

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年9月3日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告