Question

我正在重构CSS，并创建了许多相同字体的 @ font-face 标签实例。它们之间的唯一区别是不同的 unicode-range 。

我想知道浏览器如何选择要使用的浏览器？如何进行适当的测试？在“网络”标签中，仅可见字体名称，但我想查看使用哪个unicode-range。

当您想使用适合多种语言的相同字体时，还有更好的解决方案吗？

这里是一个例子：

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  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;

非常感谢！

Answer 1

浏览器根据页面上使用的字符和@ font-face声明中使用的Unicode范围来选择要下载的字体。如果页面上使用了任何指定的字符，则将下载字体。参见https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range。

在您的情况下，由于每个@ font-face声明中使用相同的字体，因此unicode-range属性可能有点多余。如果您还有其他@ font-face声明为unicode-range指定其他字体，这些字体与代码段中的unicode-range不重叠，那么您可能希望将其组合为一个@ font-face声明以上所有unicode-range都合为一体。

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

这是假设您期望某些页面不需要Roboto Slab Light，因为它们未使用任何指定字符，但将使用其他字符。在这种情况下，您将需要使用其他字体来迎合那些其他字符，并为此使用另一个@ font-face声明。否则，您可以完全删除unicode-range属性。

如何测试页面上使用的@ font-face Unicode代码版本？

1 个答案: