Html 数字不在同一行

我是SVG新手，一两周来一直在文本标签中输入数字，没有任何问题。这似乎很简单。现在，奇怪的是，我遇到了一个问题，无论我输入什么数字，第二个数字都会下降

这是一张照片，告诉你发生了什么。数字“63”应该和它自己在同一个平面上，虽然比“本周”的名称略低。相反，“3”正在下降

我的代码：

   <div class = "chartbox">

        <div class = "svgcontainer" >

            <svg class = "chart"  width="590" height="440" role="img">
                <g class = "bigbox">


                    <text x="346" y = "35" class = "blurbhed">This Week </text>
                    <text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>

                </g>
            </svg>
        </div>
    </div>

无论我在svg元素周围移动文本，都会出现同样的问题。它出现在各种字体和不同的数字上。无论是让它回显数字，还是让它由模型中的代码生成，都会发生这种情况。我还试着在另一个地方制作一个全新的文本元素，第二个数字也出现了同样奇怪的下降

---

我相信这真的很简单，但我已经摆弄它太久了，希望有人能帮我。谢谢大家!

这完全取决于所用字体的设计.“Raleway”

h1{
字体系列：“Raleway”，无衬线；
字体大小：72px；
文本对齐：居中；
}
氢{
字体系列：“开放式Sans”，无衬线；
字体大小：72px；
文本对齐：居中；
}
* {
保证金：0；
}

0123456789
0123456789

有一个合适的解决方案，允许您继续使用Raleway：

你需要做两件事：

添加指示浏览器使用衬里图形的CSS

避免预先优化字体文件（如谷歌字体所提供的）

CSS：

body {  background-color: #1C1816;

font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}


.blurbhed {
    font-size: 1.5em;
    font-weight: 600;
    fill: #650a5d;
    letter-spacing: .3px;


}

.blurbdeck {
    font-size: 2.7em;
    font-weight: 600;
    fill: #08292e;
    letter-spacing: .4px;

}

.blurbkm {
    font-size: 1.3em;
    font-weight: 600;
    fill: #08292e;
    letter-spacing: .4px;

}
.svgcontainer {
    display: block;
    position: relative;
    border: 10px solid purple;
    background-color: lightyellow;
    margin-left: 10px;
    height: 453px;
    width: 630px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-align: center;
    margin-right: 50px;

}

.chartbox {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 800px;
    margin-bottom: 10px;
    padding-top: 20px;
}

body {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum";
}

备选CDN（）：

---

谷歌字体的问题在于，它通过删除“不必要的”字形和元数据来最小化字体下载大小。特别是在这种情况下，它删除了Raleway中人物的变化。（你可以尝试将

&subset=all

添加到谷歌字体URL中，以避免出现这种情况，但这似乎并不可靠。）

这是谷歌字体吗？在没有实际看到它的情况下，我们无能为力。是的，它是Raleway。在你询问字体的问题后，我尝试了几种其他字体，并遇到了不同的问题。Arial、Helvetica和Gotham四舍五入，三者都比六者高——因此本质上是相反的问题。我的代码的其余部分涉及svg的其余部分——背景图像、条形图等。我可以尝试将其拆分为最少的代码，但是，这似乎是一个字体问题。在我致力于代码最小化的过程中，有人能洞察字体为何会以这种方式运行吗？我可能天真地认为，不管是什么字体，数字都应该对齐。我以前在Raleway看到过这样的情况……它们都是网络服务的还是本地托管的？网络服务的。这位于我的头文件的顶部：。我可以放弃罗列的数字，但我尝试过的所有字体都不均匀。谢谢@Paulie。是的，这是字体。奇怪的是，OpenSAN使我的3更高，然而，我确实找到了两三种字体，至少对于这个数字，它们给了我一个均等的结果。如果有人想知道，蒙特塞拉特、拉托和source Sans Pro在本例中给了我“偶数”数字；我试过的大多数其他字体都没有。我是设计新手，有点困惑，为什么有人会设计一种字体，当数字放在一起时看起来不对劲。但无论如何，我知道这是一个字体小提琴的事情，所以谢谢你！对于任何浏览此网站的人，请更正以上内容--Open SAN实际上提供了均匀排列的数字。我又试了一次。我想当我做之前的测试时，我肯定没有从之前的测试中刷新我的浏览器。这种字体使用的是文本图形，也就是“旧样式”。这很常见，一些字体支持各种数字样式，可以使用CSS

字体功能设置

控制，使用

onum

或

tnum

等值分别选择旧样式或表格样式。谢谢@searlea。是的，我后来发现，即使并排使用，看起来也很像的数字被称为“线条数字”，这与你提到的“旧式”相反。“我从你的帖子中看到，‘表格’风格是他们的另一个名字。我已经尝试过字体功能设置，比如given，但还没有在Chrome或Safari中成功。我可能会继续摆弄它。谢谢你，@searlea！这非常有效，而且谷歌字体正在从字体中删除一些数据，这很有趣。一件非常奇怪的事情是，如果我尝试在css的body元素中全局应用“Raleway”，即使使用了您的修复，我也会继续得到老式的图形。上面的代码对我有效的唯一方法是从正文中删除字体族并将其应用于每个元素。这对我来说是个不错的解决办法，但我还是不知道为什么。我不敢相信这是真的，所以我试了三次，结果都一样。

<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">