您正在为新的百万美元构想画龙点睛–您的副本非常完美，您的配色方案令人眼花，乱，并且您已经找到了光荣的字体配对（谁知道Baskerville和Raleway在一起看起来很棒吗？您做到了。 ），但有一个问题：Raleway讨厌的小写数字使您的购物车看起来令人困惑，使用户不知所措。
这是一个相当普通的问题，但是如果数字是您网站的重要组成部分，那么这个问题可能会使精美的字体无法使用。 例如商店或分析仪表板。 这不仅是小写数字的问题。 浏览数字列表时，非等距数字可能会同样分散注意力。
我们将研究一些解决该问题的技术，但是首先我们需要找到一种可以使用其数字而不是我们的主体字体的字体。 没有找到您的双胞胎字体的简单方法。 要搜索的最重要的特征是粗细和宽度，以便可以将其与原始字体的粗细匹配。 如果您打算使用多个粗细的数字，请尝试查看各种粗细的字体，以增加与原始字体匹配的机会。 您可能最终需要为每个权重使用不同的数字字体或使字体对的权重不匹配，但这很好，因为实际上没有字体策略 。
以下是一些匹配效果很好的Google字体配对，即使尺寸很小也不会引起注意：
方法0：将它们包起来
@import url('https://fonts.googleapis.com/css?family=Raleway:400|Nunito:300');
body {
font-family: 'Raleway', sans-serif;
}
.numeral {
font-family: 'Nunito', 'Raleway', sans-serif;
}Your total comes to $<span class="numeral">15</span>.<span class="numeral">99</span>这不是一个好的解决方案。 必须添加标记是不好的，并且全部加载两种字体都不是一件好事，但是如果您没有太多内容并且想要一个简单的解决方案，那么就不会感到羞耻。
我们更希望找到的是仅CSS的解决方案，该解决方案隔离了数字字体的数字并加载了它们（而不是（或在主字体之前）） 而无需更改 HTML 。 继续阅读。
字体家族如何工作
以下方法依赖于创建@font-face声明，该声明仅引用我们首选的数字子集，并照常在字体堆栈中引用它们：
body {
font-family: 'Custom Numeral Font', 'Main Font', sans-serif;
} 通过在font-family声明中首先对子集字体进行排序，浏览器将默认使用该字体，并将回退到第一个不可用的字形的后续字体。 这是一个非常重要的区别-浏览器不仅检查声明的字体是否可用（本地或通过@font-face导入），而且还检查其字符映射表包含请求的字符并将传递给下一个字体如果不是，则逐个字符。 顺便说一句，字体匹配算法的规范令人惊讶地有趣。
重要的是要注意，浏览器将按字体粗细和样式优先处理字体系列，因此，如果仅对数字进行常规粗细化，然后在粗体元素中包含数字，则浏览器将选择显示常规粗细数字字体的粗体字符，而不是主字体的粗体字符。 基本上，如果要执行此操作，请确保对要显示数字的所有字体粗细执行此操作。
方法1：字体松鼠自定义子设置
如果您是自托管字体文件，而不是通过Adobe Fonts或Google Fonts等托管服务提供字体文件，则可以使用Font Squirrel的Webfont Generator的专家配置来创建仅包含数字子集的文件。 在继续之前，请阅读字体的许可协议，以确保可以进行这种操作。
一旦获得了子集的字体文件，就可以照常使用它们。 请查看本文 ，以获取有关@font-face和文件类型浏览器支持的更多信息。
@font-face {
font-family: 'Nunito';
src: url('nunito-light-webfont.woff2') format('woff2'),
url('nunito-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Nunito', 'Raleway', sans-serif;
}如果您注重性能，则还可以对主字体进行子集处理，以删除其数字字形并删除一些额外的字节。
方法2：@ font-face unicode-range子设置
@font-face的unicode-range属性通常用于声明字体文件包含的字符集，以帮助浏览器确定是否下载文件； 对于使用非拉丁字母的多语言网站，这可能会极大地提高性能。 不利的一面是unicode-range也将@font-face声明限制为指定的范围，这意味着我们只能使用它来使字体文件的某些部分可在浏览器中使用。
@font-face {
font-family: 'Nunito';
src: url('nunito-light-webfont.woff2') format('woff2'),
url('nunito-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
unicode-range: U+30-39; /* 0-9/
}
body {
font-family: 'Nunito', 'Raleway', sans-serif;
}与以前的方法相比，此方法的性能较差，因为浏览器仍必须下载整个字体文件才能使用数字，但如果许可协议不允许对文件进行操作，则此方法更可取。
遗憾的是，我们不能使用此方法来对已经由外部服务加载的字体进行子集化，但是可以将其用于本地字体：
@font-face {
font-family: 'Times Numeral Roman';
src: local('Times New Roman');
unicode-range: U+30-39; /* 0-9 */
}这是调整主字体中特定字符的一种好方法，可以仅对一个“＆”号或首选的弯引号进行子集设置（在这种情况下，您必须放弃“ Times Numeral Roman”双关语），而不会因为如果本地字体不存在，它将被忽略。 您可以在此处检查常见系统字体的可用性。 而且，如果您制作的站点只有在本地下载了所有子集的字体后才可以被欣赏，所以您可以成为“书呆子皇后”。
对unicode-range支持非常好，但是请注意，如果不支持该子集字体，则所有文本都将使用该字体，因此请不要使其成为Papyrus。 或者，如果您真的想使用Papyrus，则可以偷偷摸摸并先添加其他网络安全字体，这样不受支持的浏览器将默认使用它而不是Papyrus：
@font-face {
font-family: 'Backup Font';
src: local('Arial');
unicode-range: U+60; /* backtick because I can't think of a more innocuous character */
}
@font-face {
font-family: 'Papyrus Ampersand';
src: local('Papyrus');
unicode-range: U+26; /* & */
}
body {
font-family: 'Backup Font', 'Papyrus Ampersand', 'Main Font', sans-serif;
}方法3：Google字体文本子设置
Google字体 API附带了一些方便的额外选项 ，可通过仅指定特定的字体粗细，样式和字母来辅助优化（遗憾的是， subset参数采用了greek,cyrillic字母而不是unicode范围的字母列表），但是还有一个鲜为人知的称为text “ beta”参数，表面上用于标题和徽标，但对于我们的目的同样有效：
@import url('https://fonts.googleapis.com/css?family=Raleway:400');
@import url('https://fonts.googleapis.com/css?family=Nunito:300&text=0123456789');
body {
font-family: 'Nunito', 'Raleway', sans-serif;
}很简单！ 真优雅！
text参数可以使用任何UTF-8字符，但是如果它们不是字母数字，请确保对它们进行URL编码 。 此方法唯一可能的问题是，我们不会使用@font-face创建自定义名称，因此，如果用户的系统上已经有子集字体，它将完全使用该字体。
我还没有找到其他提供这种级别子集托管字体的托管字体服务，但是如果您遇到这种情况，请在下面进行评论。
一些用例
翻译自: https://css-tricks.com/subset-numerals-so-theyre-as-awesome-as-the-rest-of-your-content/
1358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
