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

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

我想知道浏览器如何选择使用哪一个？如何进行正确的测试？在“网络”选项卡中，只能看到字体的名称，但我想看看使用了哪个unicode范围

如果您想使用适合多种语言的相同字体，有没有更好的解决方案

以下是一个例子：

/* 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;

---

非常感谢

浏览器根据页面上使用的字符和@font-face声明中使用的Unicode范围选择要下载的字体。如果页面上使用了任何指定字符，则下载字体。看

在您的情况下，由于在每个@font-face声明中使用相同的字体，unicode范围属性可能有些冗余。如果有其他@font-face声明为unicode范围指定其他字体，但这些字体与代码段中的unicode范围不重叠，则可能需要将其合并为一个@font-face声明，并将上述所有unicode范围合并为一个

/*西里尔文字*/ @字体{ 字体系列：“Roboto Slab”； 字体风格：普通； 字体大小：300； src:local'Roboto Slab-Light'，local'robotosab-Light'，url'/assets/fonts/google/robotosab-Light.ttf'格式'truetype'； unicode范围：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-20AD-20CF、U+2113、U+2C60-2C7F、U+A720-A7FF； }