W3C CSS 验证器在@font-face unicode-range 上给出错误

Question

从几天前开始，W3C CSS 验证器开始变得更加严格，并开始在这种类型的 CSS3 实现上给出错误（这种类型的 CSS3 文件无处不在例如 Google Fonts):

/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIOuaBXso.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  font-display: fallback;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIO-aBXso.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: fallback;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: fallback;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'), url("fonts/XRXW3I6Li01BKofAjsOUbuvISTs.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  font-display: fallback;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'), url("fonts/XRXW3I6Li01BKofAjsOUb-vISTs.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: fallback;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'), url("fonts/XRXW3I6Li01BKofAjsOUYevI.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: fallback;
}

在 unicode-range 上出现以下错误：Too many values or values are not recognized

显然，许多开发人员已经为他们的字体使用了具有多个值和多个范围的 unicode 范围，因为 MDN says it is OK, but apparently it is not, since according to W3C docs, the syntax for unicode-range 是：

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

也就是说，显然很多范围是不可能的。

如何解决这个问题？

这似乎是 W3C 的一种非常严格的方法，因为许多浏览器都支持多个范围，而且它确实节省了带宽，因为允许更灵活地下载哪些字体文件。

Answer 1

编辑：此答案不再有效，因为验证器中存在错误，请参阅：

正确的解决方案是是跟随 'docs' 在 MDN Webdocs: unicode-range

变化：unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

至：

unicode-range: U+0102-0103;
unicode-range: U+0110-0111;
unicode-range: U+1EA0-1EF9;
unicode-range: U+20AB;

Answer 2

这是验证器的缺陷。

CSS 字体规范将 the unicode-range property 定义为

Value: <urange>#

其中 <urange> 可以是

中的任何一个

single codepoint (e.g. U+416)<br>
    a Unicode codepoint, represented as one to six hexadecimal digits

interval range (e.g. U+400-4ff)<br>
    represented as two hyphen-separated Unicode codepoints indicating the 
     inclusive start and end codepoints of a range

wildcard range (e.g. U+4??)<br>
    defined by the set of codepoints implied when trailing '?' characters 
    signify any hexadecimal digit

和the # means

... that the preceding type, word, or group occurs one or more times, separated by comma tokens (which may optionally be surrounded by white space and/or comments).

规范在散文中强调了这个正式定义：

This descriptor defines the set of Unicode codepoints that may be supported by the font face for which it is declared. The descriptor value is a comma-delimited list of Unicode range () values.

它还提供了示例。 Example 30 特别有用：

@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}

如果您将此提交给 CSS 验证器，它将报告相同的错误。由于规范是权威的，所以验证器肯定是错误的。

W3C CSS 验证器在@font-face unicode-range 上给出错误

W3C CSS validator is giving errors on @font-face unicode-range

html

css

font-face

unicode-range

这是验证器的缺陷。