Ich verwende ein großes Symbol aus einer Symbolschrift, die mein Client als Header-Logo auf der Indexseite einer Web-App bereitgestellt hat. Das Logo ist bis zu 60% der Gerätebreite groß und besteht aus einem großen runden Logo (ca. 40% des Symbols) mit darunter liegendem Text und bis zu 60% der Gerätebreite im Hochformat.

Ich habe das Logo mit Text als eine Vektorikone erhalten, weil der Kunde möchte, dass der Text genau den Anforderungen des Marken-CI entspricht.

_____###_____
____#####____
_____###_____
Slogan is here

In der Desktop-Vorschau und meinem Google Nexus 4 Dolphin Browser sieht es in Ordnung aus, aber in Chrom (auf dem Nexus) ist der Slogan etwas abgeschnitten wie dieser "Slogan ist h". Wenn ich ins Querformat wechsle, wird es wieder korrekt angezeigt.

.header-box-logo {
  color: #fff;
  font-size: 6.4rem;
  margin: 1rem auto;
  display: inline-block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'iconfontnamehere';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Ich verwende eine benutzerdefinierte Version von Foundation 5 und IconMoon. Ich kann Ihnen keine Demo zeigen, da alle Bilder von der NDA gebunden sind.

Ich bin hier ratlos, weißt du, warum das passiert?