右侧被截断的大Iconfont图标

Question

我正在使用一个大图标，这个图标字体是我的客户在web应用程序的首页上作为标题徽标提供的。徽标大到设备宽度的60%，由一个大的圆形徽标(约占图标的40% )组成，下方有文字，纵向模式下宽达设备的60%。

我得到了一个带有文本的徽标作为一个矢量图标字体图标，因为客户想要的文本完全符合品牌CI的要求。

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

它在桌面预览版和我的google nexus4海豚浏览器上看起来还不错，但是在chrome (在nexus4上)，标语被剪掉了，就像这样："Slogan is 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和图标月亮的自定义版本。我不能给你看演示，因为所有的图像都是由保密协议绑定的。

我有点不知所措，你知道为什么会这样吗？

Answer 1

在我的例子中，我通过优先处理字体的svg格式解决了这个问题。这很不幸，因为它占用的空间最大(不过启用http压缩会有所帮助)。

此外，请确保在字体url中不要使用#符号：

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

Answer 2

这是Android上Chrome的一个众所周知的问题，也是一个非常令人气愤的问题。我自己也有过几次这样的经历。无论什么时候浏览器都会显示出来：

任何方法(文本对齐、绝对定位或页边距:0

• ：0
• )都可以将所讨论的对象或其祖先之一居中(

这个bug已经在铬论坛上提到过了：https://code.google.com/p/chromium/issues/detail?id=391183

我希望我有办法解决这个问题，但在我写这篇文章的时候，似乎还没有一个明确的解决方案。让我们期待一个bug修复即将到来。

Answer 3

试用媒体查询

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