在W3C响应字体标题上解析来自CSS3验证器的错误

Question

我搞错了

值错误:字体大小分析错误)/(1600-300))

在下面的每一行代码上都来自https://jigsaw.w3.org/css-validator/validator。代码工作正常，CSSlint没有报告错误，googling也没有帮助。

有人能告诉我这里出了什么问题吗？

h1.page-title { font-size:calc(30px + (30 - 6)*((100vw - 300px)/(1600-300)));font-weight: 400;letter-spacing: 0.015em !important  }
h2.entry-title { font-size:calc(28px + (28 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em !important  }
h3.entry-title { font-size: calc(24px + (24 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em !important  }
h4.entry-title { font-size: calc(20px + (20 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em  !important  }
h5.entry-title { font-size: calc(17px + (17 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em  !important  }
h1 { font-size:calc(28px + (28 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em !important  }
h2 { font-size: calc(24px + (24 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em !important  }
h3 { font-size: calc(20px + (20 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em  !important  }
h4 { font-size: calc(17px + (17 - 6)*((100vw - 300px) / (1600 - 300))); font-weight: 400; letter-spacing: 0.015em  !important  }

Answer 1

w3验证器引用CSS规范

此外，+和-运算符的两边都需要空格。(*和/操作符可以在没有空白的情况下使用。)

因此，如果您想要符合规范，应该在(1600-300)之前和之后添加空格，就像JkAlombro提到的那样。它仍然工作在没有空白的浏览器中，因为它们是容错的，并且实现了不那么严格的解析器。