W3CSS验证器在@Font-Face Unicode-Range上出现错误 [英] W3C CSS validator is giving errors on @font-face unicode-range

问题描述

从几天前开始，W3CSS验证器开始更加严格，开始在这种类型的CSS3实现上给出错误(这种类型的CSS3文件无处不在，例如被Google字体使用)：

/* 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，但显然没有，因为根据W3C文件，unicode-range的syntax是：

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

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

如何解决此问题？

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

推荐答案

这是验证器的缺陷。

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

.前面的类型、单词或组出现一次或多次，用逗号分隔(可以选择用空格和/或注释括起来)。

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

此描述符定义Unicode代码点的集合，声明它的字体可能支持这些代码点。描述符值是Unicode Range()值的逗号分隔列表。

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

这篇关于W3CSS验证器在@Font-Face Unicode-Range上出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！