Html 字体弄乱了数字的对齐方式

我使用的是Raleway字体，但这种字体不能正确地将数字与字母对齐

您可以在此代码段中看到：

h1{
字体系列：雷威；
字号：2rem；
底部边框：1px纯色$text颜色；
边框顶部：1px纯色$文本颜色；
填充：2rem0；
}

5条评论

问题 这是字体本身的一部分，而不是您可以提供快速修复的内容（除非您处理的是很少的文本）。如果我们看一下，我们会发现数字与字母的对齐方式不同：

如果你不想让数字像这样对齐，你必须使用不同的字体

修理 您可以通过将要更改对齐方式的数字包装在单独的元素中，并分别调整它们的

垂直对齐方式

来解决此问题，但这可能需要付出更多的努力。我在下面给出了一个例子：

h1{
字体系列：雷威；
字号：2rem；
底部边框：1px纯色$text颜色；
边框顶部：1px纯色$文本颜色；
填充：2rem0；
}
.提出{
显示：内联块；
垂直对齐：12%；
}

5.
评论

这取决于字体支持的“数字大小写设置”功能

你仍然可以通过以下方法来实现

---

进一步阅读

您可以在CSS的帮助下进行简单的更改 添加

字体功能设置：“lnum”1到您的css文件

因此，您的新css将是：

h1 {
        font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
        font-feature-settings: 'lnum' 1;
    }

也检查一下这个
我创建了一个版本的Raleway，默认使用内衬数字作为该问题的最终解决方案。您可以下载字体文件，或者只使用一行代码将其嵌入HTML（使用
）或CSS（使用
@import
）中，就像您使用任何其他Google字体一样。免费、开源，提供所有重量和样式：

我知道你很久以前就发布了这个问题，但看看这个属性：

.class, #id, tag, * {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings:"lnum" 1; 
  -moz-font-feature-settings:"lnum=1"; 
  -ms-font-feature-settings:"lnum" 1; 
  -o-font-feature-settings:"lnum" 1; 
  -webkit-font-feature-settings:"lnum" 1; 
  font-feature-settings:"lnum" 1;
}

它强制所有数字正确对齐，因此您只需将此属性应用于CSS中的*，任何包含数字的文本都将更具可读性。

根据您可以添加的字体和浏览器而定

font-variant-numeric: lining-nums;

来源：

本文对此进行了解释，并给出了de完全兼容的css3“解决方案”

这段代码很神奇：

.yourclass {
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

字体没有问题。有些字体的Xheight和基线是数字字符，与字母不同。这与字体的设计有关，呈现数字不是问题的字体默认属性，也不是错误的字体。对于相同的对齐方式，您可以选择其他字体。您必须使用其他字体。。这就是这个字体显示数字的方式好的，谢谢你的快速回复@你说得对。这不会正常工作-应该测试更多的案例。谢谢你的指导，谢谢你的清晰回答，我只是想寻找一个不同的答案，这是这个问题唯一正确的答案。我想，它应该被标记为正确。下面是一个很好的解释，为什么这个CSS片段是解决方案：