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>

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

Answer 2

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

你需要做两件事：

添加CSS，指示浏览器使用衬里数字
避免使用预先优化的字体文件（由Google字体提供。）

CSS：

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

替代CDN（Brick）：

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

Google字体的问题在于它通过删除“不必要的”字体来最小化字体下载大小。字形和元数据。特别是在这种情况下，它消除了Raleway中数字的衬里变化。（您可以尝试将&subset=all添加到Google字体网址以避开此问题，但这看起来并不可靠。）

数字不在同一条线上

2 个答案: