我正在重构CSS，我建立了许多相同字体的@font面标签实例。它们之间的唯一区别是不同的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面声明中使用的 Unicode 范围选择要下载的字体。如果在页面上使用了任何指定的字符，则会下载该字体。请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range。
在您的情况下，由于每个@font面声明中使用相同的字体，因此unicode-range属性可能有些多余。如果您有其他 @font 面声明为unicode-range指定了与代码段中的unicode-range不重叠的其他字体，那么您可能希望将其合并为一个@font面声明，并将上述所有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 平板灯，因为它们不使用任何指定的字符，而是将使用其他字符。在这种情况下，您需要迎合使用其他字体的其他字符，并为此进行另一个@font面声明。否则，您可以完全删除 unicode-range 属性。