0

我最近遇到了一个字体声明不起作用的问题，我的自定义字体由于某种原因默认为 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的无效性并允许第一个字体正常工作，就像第一个一样第一个字体声明“受到打击”并允许剩余的 css 正常工作的示例。

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

任何有更好的CSS知识的人，然后我愿意解释一下吗？

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

4

3 回答 3

2

简单：在部署之前验证您的 CSS 。通过将有问题的 CSS（带有流浪v）传递给W3C 的 CSS 验证器，您将在第二行得到一个解析错误。

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');
}
于 2013-11-08T09:28:47.820 回答
2

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

于 2013-11-08T09:32:30.653 回答
1

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

于 2013-11-08T09:27:42.647 回答