在右側切斷的大Iconfont圖標

我正在使用圖標字體中的大圖標，我的客戶端在Web應用程序的索引頁上作爲標題徽標提供。該徽標大至設備寬度的60％，由一個大型圓形徽標（大約40％的圖標）和下面的文本組成，其寬度最高可達設備縱向模式的60％。在右側切斷的大Iconfont圖標

我得到了文字作爲一個矢量圖標字體圖標的標誌，因爲客戶想要的文字完全符合品牌CI的要求。

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

它看起來正常的桌面預覽和我的谷歌Nexus 4海豚瀏覽器，但鉻（上關係）的口號被切斷有點像這個「口號是H」。如果我切換到橫向，它會再次正確顯示。

.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; 
}

我正在使用基金會5和iconmoon的自定義版本。由於所有圖像都由NDA綁定，因此我無法向您展示演示。

我不知道爲什麼會發生這種情況？

來源

2014-03-12 KADlancer

您是否試過不同的'font-size' _unit_？如果使用'em'而不是'rem'，甚至是'px'或什麼的，會發生什麼？（後者可能不是你想要的，我想，但只是爲了看看這是否是一個錯誤。） – CBroe

你找到了這個問題的解決方案嗎？ – Sam7

可悲的是我沒有。在某種程度上，我能夠通過使用媒體查詢來「減少損失」，但是當這個項目離開我的手時，我不再處理這個問題。客戶認爲這是「很好的去」。我還有一份該項目的匿名代碼摘錄，因此我可能會在將來爲此構建一個演示案例以找到更好的解決方案。 – KADlancer

試試看媒體查詢

/* 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; } 
}

來源

2014-03-12 09:26:34

我可以爲調試做到這一點，但我試圖瞭解這個問題，特別是因爲它只存在於一個設備/瀏覽器上，我認爲它應該與標準代碼一起使用。 – KADlancer

在我來說，我通過優先的SVG格式的字體解決了這個問題。這是不幸的，因爲它有最大的覆蓋面積（啓用HTTP壓縮有助於雖然）

除了確保不使用＃符號在字體網址：

@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'); 
    } 
}

來源

2014-06-20 15:08:59 Sam7

Sony Xperia Z1適合我，謝謝 – loicfavory

這是瀏覽器的已知問題在Android上，這是一個非常令人生氣的。我自己在幾種情況下已經擁有它。似乎表現每當瀏覽器：

處於橫向
所討論的對象或通過任何方法（文本對齊，絕對定位或餘量：0汽車）爲中心其祖先之一

這個bug已經在鉻論壇上提到： https://code.google.com/p/chromium/issues/detail?id=391183

我希望我有辦法解決這個問題，但在寫有時間似乎並沒有成爲一個明確的解決辦法。讓我們希望錯誤修復即將到來。

來源

2014-08-26 07:20:39

這清除了原因，謝謝 – banesto

在右側切斷的大Iconfont圖標

回答

相關問題