2017-10-09

Edge 15でのネストされた@font-faceルール

主にウェブフォントの利用やフォントの合成を行う時に使う@font-faceルールはまれに他のAt規則にネストされる。@mediaや@supportsルールを使って条件付きでフォントを変えたいことがあるからだ。しかしEdge 15ではそうやってネストされた@font-faceルールで作られたフォントを参照できない。

ネストされているかどうかだけが問題になるようで、以下のようなほぼ無意味な@supportsルールでも表面化する。

@supports (top: 0) {
  @font-face {
    font-family: "Foo";
    src: url("https://example.com/woff2/foo.woff2") format("woff2");
  }
}

body {
  font-family: Foo, sans-serif;
}

もうちょっと複雑にしたこのようなコードを含むウェブページで挙動を確認できる。Firefox 57、Chrome 63、Mobile Safari 11ではFooを参照できるが、Edge 15では参照できずsans-serifになってしまう。

@mediaや@supportsルールと他のCSSコードのネストに関しては、 CSS Conditional Rules Module Level 3に定められている。これによると条件節以降であるgroup_rule_bodyは{}とnested_statementだけを持つ。そしてこのnested_statementにはfont_face_ruleが含まれる。つまりネストできるので、無効になるEdge 15の挙動はバグだろう。

ほぼ同じ内容の放置されたイシューにはコメントしておいた(なぜかAnonymousになった)。Won’t Fixとなっており直りそうもない。