Schrift wird unterschiedlich dargestellt

[heinetz]

Hallo,

ja, damit habe ich es auch probiert, aber leider nicht hinbekommen. Das mit dem praktischen gestaltet sich deshalb schwierig, weil das Problem im Zusammenhang mit einer Schrift, die ich nicht so einfach bei Codepen einbinden kann steht. Aber ich versuch nochmal an einem anderen Beispiel zu verdeutlichen, wie sich mein Problem darstellt:

Das HTML ist relativ einfach:

<a class="a-button__link" href="">
 <svg class="a-svg-icon a-button__icon" role="img" viewBox="0 0 100 100" aria-labelledby="" data-js-module="a-svg-icon" data-js-sprite-path="/svg-sprites/ui.svg">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ui-arrow-right-mobile"></use>
 </svg>
Go to Homepage
</a>

Das CSS (auf das Wesentliche beschränkt):

.a-button {
    position: relative;
    transition: background-color 0.3s ease-in-out;
    background-color: #202020;
    padding: 0;
    border: none;
    min-height: 2.5rem;
    display: -webkit-box;
    display: flex;
    text-align: left;
}

.a-button__link {
    font-size: 1rem;
    line-height: 1.375rem;
    font-family: "corporate";
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5625rem 1.25rem 0.5625rem 2.625rem;
}

.a-button__icon {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    left: 1.25rem;
    top: 50%;
    margin-top: -0.375rem;
    color: #fff;
}

Das sieht dann folgendermassen im Browser aus (ich habe den Text mit dem Cursor markiert):

1. OSX Chrome

2. WINDOWS Chrome

In beiden Fällen werden jeweils die Zeile und das SVG zentriert dargestellt. Allerdings werden die Glyphen innerhalb der Zeile unterschiedlich positioniert. Dadurch erscheint der Text dann unter OS X nicht zentriert.

Mit einer Arial sieht das Ganze dann so aus:

1. OSX Chrome

2. WINDOWS Chrome

Hier sieht es in beiden Fällen vernünftig aus.

Die horizontale Ausrichtung mehrerer Elemente innerhalb eins Containers kann man natürlich auch anders konstruieren, bspw. mit Flexbox. Aber das führt jeweils zum selben Ziel. Nämlich dass der Text augenscheinlich nicht zentriert ist.

Hat Jemand eine Idee?

gruss, heinetz