großes Iconfont-Icon auf der rechten Seite abgeschnitten

Ich verwende ein großes Icon aus einer Icon-Schrift, die mein Client als Header-Logo auf der Indexseite einer Web-App geliefert hat. Das Logo ist so groß wie 60% der Gerätebreite und besteht aus einem großen runden Logo (etwa 40% des Symbols) mit Text darunter und so breit wie 60% des Geräts im Hochformat.großes Iconfont-Icon auf der rechten Seite abgeschnitten

Ich habe das Logo mit Text als ein Vektor Icon Schriftart Symbol, weil der Kunde möchte der Text genau so sein, wie die Marken CI verlangt.

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

Es ist auf der Desktop-Vorschau und mein Google Nexus 4 Dolphin Browser aber in Chrom (auf dem Nexus) in Ordnung sieht der Slogan etwas abgeschnitten wird wie folgt "Slogan h ist". Wenn ich auf Landschaft umstelle, 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 benutze eine benutzerdefinierte Version von Foundation 5 und iconmoon. Ich kann Ihnen keine Demo zeigen, da alle Bilder an die NDA gebunden sind.

Ich bin hier ratlos, irgendeine Idee, warum das passiert?

Quelle

2014-03-12 KADlancer

Haben Sie eine andere 'font-size' _unit_ ausprobiert? Was passiert, wenn Sie 'em' anstelle von' rem' oder sogar 'px' oder etwas verwenden? (Letzteres ist vielleicht nicht das, was Sie wollen, nehme ich an, aber nur um zu sehen, ob das ein Fehler ist.) – CBroe

Haben Sie schon eine Lösung für dieses Problem gefunden? – Sam7

Leider habe ich nicht. Ich war in der Lage, den Schaden zu minimieren, indem ich Medienabfragen in gewissem Umfang verwendete, aber als dieses Projekt meine Hände verließ, arbeite ich nicht mehr an diesem Problem. Der Kunde entschied, dass es "gut zu gehen" sei. Ich habe immer noch eine Kopie des anonymisierten Codeauszugs aus dem Projekt, also werde ich vielleicht in Zukunft einen Demo-Fall erstellen, um eine bessere Lösung zu finden. – KADlancer

Probieren Sie es Medienabfrage

/* Galaxy Nexus (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) { 
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; } 
} 

/* Galaxy Nexus (landscape) ----------- */ 
@media only screen and (min-width : 361px) and (orientation: landscape){ 
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; } 
} 

/* Galaxy Nexus (portrait) ----------- */ 
@media only screen and (max-width : 360px) and (orientation: portrait) { 
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; } 
} 

/* Nexus 7 (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) { 
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; } 
} 

/* Nexus 7 (landscape) ----------- */ 
@media only screen and (min-width : 604px) and (orientation: landscape) { 
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; } 
} 

/* Nexus 7 (portrait) ----------- */ 
@media only screen and (max-width : 603px) and (orientation: portrait) { 
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; } 
}

Quelle

2014-03-12 09:26:34

Ich könnte das für das Debuggen tun, aber ich versuche, das Problem zu verstehen, besonders da es nur auf einem Gerät/Browser existiert, was meiner Meinung nach mit Standard-Code gut funktionieren sollte. – KADlancer

In meinem Fall habe ich das Problem, indem die Priorisierung der SVG-Format für Schriften gelöst. Welches ist bedauerlich, da es die größte Fußabdruck (ermöglicht http Kompression hilft aber) hat

Neben sicher, nicht in Ihrer Schrift url das Symbol # verwenden:

@font-face { 
    font-family: 'myIconFont'; 

    src:url('fonts/myIconFont.eot?-7pdf04'); 
    src:url('fonts/myIconFont.eot?#iefix-7pdf04') format('embedded-opentype'), 
     url('fonts/myIconFont.woff?-7pdf04') format('woff'), 
     url('fonts/myIconFont.ttf?-7pdf04') format('truetype'), 
     url('fonts/myIconFont.svg?-7pdf04') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family: 'myIconFont'; 
     src: url('fonts/myIconFont.svg?-7pdf04') format('svg'); 
    } 
}

Quelle

2014-06-20 15:08:59 Sam7

Funktioniert gut für mich auf Sony Xperia Z1, danke – loicfavory

Dies ist ein bekanntes Problem in Chrome auf Android und es ist ziemlich ärgerlich. Habe es in ein paar Situationen selbst gehabt. Scheint sich zu manifestieren, wenn der Browser:

in Landschaft ist
Das betreffende Objekt oder einer ihrer Vorfahren wird durch ein beliebiges Verfahren (text-align, absolute Positionierung oder margin: 0 auto) zentriert

der Fehler wurde in den Chrom-Foren erwähnt: https://code.google.com/p/chromium/issues/detail?id=391183

ich wünschte, ich hatte einen Weg, es zu lösen, aber zu der Zeit dort zu schreiben, scheint keine endgültige Lösung. Hoffen wir, dass bald ein Bugfix kommt.

Quelle

2014-08-26 07:20:39

Das klärt den Grund, danke – banesto

großes Iconfont-Icon auf der rechten Seite abgeschnitten

Antwort

Verwandte Themen