@font-faceを別cssで管理できますか？

質問

@font-faceを指定したcssと、
セレクタで上記font-familyを指定したcssを、
別にする事は可能でしょうか？

例）※細かい属性等は省いています

◆hoge.html内の記述
-----------
<link href="font.css">
<link href="style.css">
-----------

◆font.css内の記述
-----------
@font-face{
font-family:"hoge_font";
src:url("hoge_font.woff");
}
-----------

◆style.css内の記述
-----------
.element{
font-family:"hoge_font";
}
-----------

googleフォントでのStandard使用方法例が上記の例と同様なので、
使用できそうな気はするのですが、

接続のイメージだと、font.cssとstyle.cssに、
ほぼ同時にリクエストが飛ぶので、

font.cssよりもstyle.cssが先にダウンロードされると、
style.css内のfont-family:"hoge_font";指定が迷子になり、
該当fontをレンダリングできないのでは、と懸念しています。

この方法で不具合があった、等の情報を教えてください。
よろしくお願い申し上げます。

回答No.2

noname#206842

基礎をもっと学んでください！
>>ほぼ同時にリクエストが飛ぶので、・・・
あなたがそう思っているだけで、実際には、あとから読み込んだCSSが、優先される！
ゆえに、記述に気を付ける必要がある！

仕様書等を理解できるまで、熟読してください！

お礼

あ、分かった。私の質問の仕方が凄く悪い。
cssファイル上で指定が出来るか、を質問しちゃってますね、どう見ても。
そんなの指定出来るに決まってますね、本当申し訳ない。

違うんです。DOMとレンダリングまわりの情報が欲しかったんです。

昔のブラウザの挙動って、head内の全ての要素を解釈し終わってツリーに送られてから、body要素を解釈し始めて、レンダリングが始まってたじゃないですか。凄く昔。

でも、少し昔からは、記述順にどんどんリクエストが送られて、リプライ帰ってきたものをどんどんツリー化し、ある程度溜まったらすぐレンダリング、残りのリプライは溜まり次第順次再レンダリング、という挙動に変わってますよね？

さらに言うと、外部フォントのレンダリングって、どうもdomready後じゃないと開始されないような見え方をしているじゃないですか。documentreadyでjs動かすと上手く大きさ取れなかったりするし。

で、その際に、サーバ側の何らかの要因で、font.cssのリプライが遅れたとして、再レンダリング時に何らかの問題が生じる事例等があれば教えてください！

……という質問のつもりだったんですが、完全に言葉足らずでした。すみません。

しかも詳しく書いてたら、cssだけじゃなくてfontファイル自体でもリプライ遅れたら同じ状況になる事に気付き、つまりcssファイルが単数でも同じ事起きるなぁ、と気付いてしまいました。じゃあ複数ファイル関係無いじゃん。

くだらない質問に付き合わせてしまってすみません。ご回答ありがとうございました。

回答No.1

noname#206842

この記述だと、font.cssを読みそのあとに、style.cssを読み込むということなので、
同じ要素に書かれているcssは、style.cssの方が、優先されます。
CSSの優先権は、後出しじゃんけんと同じです。

この辺の理解ができていないのでは？・・・

お礼

cssが記述順に処理されるのは恐らく理解できると思っていますが、
例えば、font.cssがダウンロードエラーになり、style.cssはダウンロードできた場合、
当然style.css内のfont-family:"hoge_font";は機能しないのでは、と悩んでいるのです。。。

サーバにリクエストが飛ぶタイミングは、ほぼ同時ではないのでしょうか？
ダウンロードもほぼ同時に開始されるのではないのでしょうか？

それとも、font.cssがどんなに大きなサイズでも、ダウンロード完了後に、
次のstyle.cssのダウンロードが始まるのでしょうか？
ブラウザの挙動を見る限りそうは思えないのですが……。