Question

我使用来自图标字体的大图标，我的客户端在网络应用的索引页面上作为标题徽标提供。徽标大小为设备宽度的60％，包含一个大圆形徽标（约占图标的40％），文字在下方，宽度为60％，在纵向模式下设备。

我将带有文字的徽标作为一个矢量图标字体图标，因为客户希望文本与CI所要求的品牌完全一致。

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

它在桌面预览和我的谷歌nexus 4 Dolphin浏览器上看起来不错，但在Chrome（在nexus上），口号被切断了，就像这样＃34;标语是h＆＃34;。如果我切换到横向，它会再次正确显示。

.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的约束。

我在这里不知所措，知道为什么会这样吗？

Answer 1

在我的情况下，我通过优先考虑字体的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');
    }
}

Answer 2

这是Android上Chrome中的一个已知问题，这是一个非常令人愤怒的问题。我自己曾在几种情况下使用它。似乎每当浏览器显示：

在风景中
有问题的对象或其祖先之一以任何方法为中心（文本对齐，绝对定位或边距：0自动）

Chrome论坛中提到了这个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; }
}

大Iconfont图标在右侧切断

3 个答案: