Problem mit der Cross-Browser-Kompatibilität von SVG-Text

Das Problem ist, dass das SVG Text anstelle von Pfaden verwendet, der Browser diesen Text dann mit seiner eigenen Text-Rendering-Engine rendert, was zu Inkonsistenzen bei der Benennung und Skalierung von Schriftarten führen kann (wie bei normalem HTML- und CSS-Text).

Eine Lösung besteht darin, den Text zu skizzieren, bevor Sie das SVG exportieren.

Klicken Sie entweder mit der rechten Maustaste auf den Text und Create Outlinesoder gehen Sie zuObject -> Expand

Das Problem ist, dass Ihr SVG-Buchstabenabstand nicht wie die anderen Teile basierend auf der Bildschirmgröße geändert wird. Da die Rechtecke selbst nicht mit dem Text in Beziehung stehen, sondern nur dahinter positioniert sind, enthalten sie den Text nicht gut.

Die einfachste Lösung wäre, das SVG als Pfad statt als Text zu exportieren, aber das ist keine perfekte Lösung, da es Benutzer daran hindert, den Text auszuwählen.

Wenn Sie möchten, dass Benutzer diese Fähigkeit behalten, gibt es sehr wahrscheinlich eine Möglichkeit, Ihr SVG zu reparieren, während es als Text beibehalten wird, aber da Sie es nur mit Text und einigen Rechtecken zu tun haben und es für eine Website erstellen, empfehle ich Ihnen Verwenden Sie einfaches HTML + CSS, um dies neu zu erstellen.

Der einzige Haken ist, dass Sie Myriad Pro selbst hosten oder von Typekit verwenden müssen, da es standardmäßig nicht kostenlos ist . Sie können eine alternative Schriftart verwenden, ich verwende PT Sans, wenn sie unten nicht unterstützt wird.

HTML:

<div class="site-title-container">
    <h1 class="site-title first-line"><span>C</span>agdas</h1>
    <h1 class="site-title second-line"><span>Y</span>onder</h1>
</div>

CSS:

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

/* For demo only - not recommended */
body { font-size: 2vw; }
/* End of demo only section */


.site-title-container {
    font-family: "Myriad Pro", 'PT Sans', sans-serif;
}
.site-title {
    position: relative;
    color: white;
    padding: 0.3em 0.7em;
    display: inline-block;
    font-size: 2.5em;
    letter-spacing: 0.2em;
}
.site-title span {
    color: #3580B9;
}
.site-title.first-line::before {
    content: '';
    background-color: #161616;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.site-title.second-line {
    position: absolute;
    top: 1.1em;
    left: 1em;
    background-color: #161616;
    z-index: -1;
}

Demo-Link