html - 数字不在同一行

Question

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

这是一张图片，向您展示正在发生的事情。数字“63”应该和它自己在同一平面上，虽然比“本周”的名称低一点。相反，“3”正在下降。 Pic of my problem .

我的代码:

   <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>

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;
}

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

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

Answer 1

这绝对取决于所使用字体的设计.."Raleway"。

h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 72px;
  text-align: center;
}
h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 72px;
  text-align: center;
}

* {
  margin:0;
  }

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<h1>0123456789</h1>


<h2>0123456789</h2>

我只能建议使用不同的字体..但你必须测试每种字体的正确外观。