时间戳

首页 > 解决方案 > 在 Web 浏览器中将 SVG 的字体大小与常规文本匹配

svg - 在 Web 浏览器中将 SVG 的字体大小与常规文本匹配

问题描述

我试图让我的 svg 文件的字体大小与我的常规文本的字体大小相匹配。我已经设法让字体本身匹配，两者都使用 Steve Matteson 的 Open Sans，但是大小不同。我的 svg 文件始终呈现比我的常规文本稍大的字体。

当我创建 svg 文件（在 Inkscape 中）时，我将字体大小设置为 22.4px；我还将常规文本的字体大小设置为 22.4 像素。我对此进行了一些研究，并意识到 svg 的渲染非常复杂，并且浏览器具有许多默认样式，但我无法深入研究导致这种字体大小差异的确切原因。（我尝试了浏览器重置代码，但这没有帮助；问题仍然与没有重置的情况完全相同）。

这是一个屏幕截图，比较了上面的常规文本和下面的 svg。您可以看到 svg 的字体大小稍大（在比较文本中的数字“1”与 svg.

text 和 svg 的字体大小比较

HTML：

    <!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Font Comparison Test</title>
    <!-- Open Sans font by Steve Matteson -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

 
    <link rel="stylesheet" href="css/main.css">  
  </head>

<body>

  <p>
   Einige suchen dieselbe in der fortlaufenden Zahlenreihe
    von 1 bis 16 und legen den Gliedern dieser Reihe die Töne
    auf folgende Weise unter :

  </p>
  
 <!-- First graph, series 1 - 16 -->
    <img src="svg/1.1 English series 1 - 16.svg" style="width: auto; height: auto;">

</body>


</html>

CSS：

    body{
  font-family: 'Open Sans Condensed', sans-serif;
  background-color: #162e2e;
  color: #dfddfe; /* Font colour */
  font-size: 22.4px; /* 1.4  = 22.4 px? */
  font-weight: 400; /* important for font styling */

}

SVG：

<svg

width="167mm"
height="17mm"
viewBox="0 0 167 17"
version="1.1"
id="svg127"

<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-17.407795,-14.122843)">
<text
   xml:space="preserve"
   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.90222216px;line-height:1.25;font-family:'Open Sans Condensed';-inkscape-font-specification:'Open Sans Condensed, ';letter-spacing:0px;word-spacing:0px;fill:#dfddfe;fill-opacity:1;stroke:none;stroke-width:0.26458332" 
   x="18.06776"
   y="21.276409"
   id="text4998-2-0"><tspan
     sodipodi:role="line"
     x="18.06776"
     y="21.276409"
     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Open Sans Condensed';-inkscape-font-specification:'Times New Roman, ';stroke-width:0.26458332"
     id="tspan5000-5-1">1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16</tspan></text>

标签： svgfonts

解决方案

推荐阅读