0

最近、font-face 宣言が機能しないという問題がありました。何らかの理由で、カスタム フォントがデフォルトで arial になっていました。調べてみると font-face 宣言の前に無効な文字が迷子になっていることが判明

このような：

 v
 @font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}

したがって、この例では、'v' によって font-face 宣言が機能しなくなりますが、これは理にかなっています。これ以降のすべてのスタイル宣言は、ご想像のとおり、正しく機能します。

私の質問は、次のように、無効な文字とスタイル宣言の間に有効なコメントがあったという事実に関連しています。

v
/* 
 * FONTS
 * ------------------------------------
 */

@font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}

だからここに私が少し立ち往生しているものがあります：

無効な「v」文字が何もしないこと、およびコメント（正しくフォーマットされている）がCSSの無効性をリセットし、最初のフォントフェイスが最初のように通常どおりに機能することを期待していたでしょう最初の font-face 宣言が「ヒット」し、残りの css が通常どおり機能するようにした例。

そのまっすぐなCSSなので、プリプロセッサの関与はありません。

私よりもCSSの知識が豊富な人は、それを説明したいと思いますか?

NBスタイル宣言で無効な文字をリセット/オフセットできる理由についての技術的な説明を探していますが、CSSエラー/バグを回避する方法ではなく、コメントではありません

4

3 に答える 3

2

簡単: CSSをデプロイする前に検証します。問題のある CSS ( stray をv含む) をW3C の CSS バリデーターに渡すと、2 行目で解析エラーが発生します。

漂遊が CSS ファイルを無効にする理由はv、「;」で区切られていない場合の規則のためです。'}' で終わらない場合、次の非スペース文字まで連続していると見なされます。複数の空白は 1 つの空白として表示されます。

私のポイントをよりよく説明するために、これらの行はすべて有効です。

body {
    height: 100%;
    padding: 20px 10px;
}

body {
    height:
    100%
    padding: 20px
             10px;
}

body {
    height: 100%;
    padding: 20px
             10px
}

コメントが構文エラーの伝播を停止しない理由に関する質問に戻ります。コメントはパーサーによって完全に無視されるため、コメントの上流で発生した場合でも構文エラーが「伝播」するのを防ぎません。以前の構文エラーの一時停止としては機能しません。

したがって、CSS コードを指定すると、次のようになります。

v
 @font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}

実際には次のものと同等です。

v @font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}
于 2013-11-08T09:28:47.820 に答える
2

コメントが CSS の動作に影響を与えなかった理由を尋ねている場合、それはまさにコメントが動作する方法であるためです。スタイルシートにコメントを含めたり、スタイルシートからコメントを削除したりしても、その解釈が決して変わるべきではありません。解析が行われる前にスタイルシートからコメントが取り除かれている可能性が高いため、概説した状況を説明できます。

于 2013-11-08T09:32:30.653 に答える
1

コメントは宣言とは異なるという事実だと思います。無効な文字は、おそらくその後の最初の宣言を中断します。コメントは単純に渡されるため、次の宣言でも中断が発生します。

于 2013-11-08T09:27:42.647 に答える