Question

我最近遇到了一个问题，即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正常工作，很像在第一个例子中，第一个font-face声明'接受了命中'并允许剩余的css正常工作。

它的直接css所以没有预处理器参与。

任何拥有更好css知识的人，我都会解释它吗？

N.B。我正在寻找技术解释为什么它允许样式声明重置/偏移无效字符而不是注释，而不是如何避免css错误/错误

Answer 1

简单：在部署之前验证您的CSS 。通过将有问题的CSS（带有迷路v）传递到W3C's CSS validator，您将在第2行得到解析错误。

迷路v使CSS文件无效的原因是规则，当时没有用';'分隔并且不以'}'结尾，将被假定为连续直到下一个非空格字符。多个空格将被视为一个空白区域。

为了更好地说明我的观点，所有这些行都是有效的：

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'); }

Answer 2

如果您一直在问为什么评论对CSS的行为没有影响，那是因为评论应该如何表现 - 包括或从样式表中删除评论不应该改变它以任何方式解释了什么。在任何解析发生之前，可能会从样式表中删除注释，这可以解释您已概述的情况。

Answer 3

我想说的是，评论与声明不同。无效字符可能会破坏它之后的第一个声明 - 注释只是简单地传递，所以中断仍然发生在下一个声明中。

无效字符使声明无效时的意外css行为

3 个答案: