数字不在同一行

Question

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

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：

你需要做两件事：

1. 添加指示浏览器使用衬里图形的 CSS
2. 避免使用预先优化的字体文件（由 Google Fonts 提供）。

CSS：

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

替代 CDN（砖）：

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

Google Fonts 的问题在于它通过删除“不必要的”字形和元数据来最小化字体下载大小。特别是在这种情况下，它从 Raleway 中删除了数字的 lining-nums 变化。（您可以尝试添加&subset=all到 Google 字体 URL 来规避此问题，但这似乎并不可靠。）

Answer 2

这绝对取决于所使用的字体设计。“ 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>

我只能建议使用其他字体。.但是您必须对每种字体进行正确测试。