1

从几天前开始，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 说没问题，但显然不是，因为根据 W3C 文档，for的语法unicode-range是：

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

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

如何解决这个问题？

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

4

2 回答 2

1

正确的解决方案是遵循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;
于 2021-10-24T13:46:48.587 回答
1

这是验证器的缺陷。

CSS 字体规范将属性unicode-range定义为

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

#表示

... 前面的类型、单词或组出现一次或多次，用逗号分隔（可以选择用空格和/或注释包围）。

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

此描述符定义了一组 Unicode 代码点，这些代码点可能被声明的字体支持。描述符值是以逗号分隔的 Unicode 范围 () 值列表。

它还提供了示例。示例 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 验证器，它将报告相同的错误。由于规范是权威的，验证器肯定是错误的。

于 2021-10-25T16:39:41.677 回答