CSSFontFaceRule

Baseline

広く利用可能

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

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

CSSFontFaceRule インターフェイスは @font-face アットルールを表します。

インスタンスプロパティ

祖先である CSSRule からプロパティを継承しています。

CSSFontFaceRule.style 読取専用: CSSFontFaceDescriptors オブジェクトを返します。これにより、関連付けられた @font-face アットルールの記述子を読み取ったり設定したりすることができます。

インスタンスメソッド

祖先である CSSRule からメソッドを継承しています。

例

@font-face プロパティへのアクセス

この例では @font-face ルールを定義し、関連付けられた CSSFontFaceRule が得られるまで、ページ上のルールを反復処理していきます。その後、いくつかのプロパティをログに出力します。

CSS

css

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

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

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

JavaScript

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

const myRules = document.getElementById("css-output").sheet.cssRules;
for (const rule of myRules) {
  if (rule instanceof CSSFontFaceRule) {
    log(`this: ${rule}`);
    log(` cssText: ${rule.cssText}`);
    log(` parentRule: ${rule.parentRule}`);
    log(` parentStyleSheet: ${rule.parentStyleSheet}`);
    log(` type: ${rule.type}`);
    log(` style: ${rule.style}`);
  }
}

結果

仕様書

仕様書
CSS Fonts Module Level 4 # om-fontface

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

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

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