大Iconfont图标在右侧切断 [英] large Iconfont icon cut off on the right side

问题描述

我使用来自图标字体的大图标，我的客户端作为标题徽标在网络应用程序的索引页上。该徽标大小为设备宽度的60％，由一个大圆形徽标（大约40％的图标）和下面的文本以及纵向模式下设备宽度的60％组成。

I'm using a large Icon from an icon font my client delivered as a header logo on the index page of a web app. The logo is as large as 60% of the device width and consists of a large round logo (about 40% of the icon) with text below and as wide as 60% of the device in portrait mode.

我得到的标志文字为一个向量图标字体图标，因为客户想要的文本正是品牌CI的要求。

I got the logo with text as one vector icon font icon because the customer want's the text to be exactly as the brands CI demands.

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

它在桌面预览和我的google nexus 4海豚浏览器看起来不错，但在chrome（在nexus）的口号被切掉一些像这样口号是h。如果我切换到风景，它会再次正确显示。

It looks alright on the desktop preview and my google nexus 4 Dolphin Browser but in chrome (on the nexus) the slogan is cut off somewhat like this "Slogan is h". If I switch to landscape, it's displayed correctly again.

.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绑定。

I'm using a custom version of foundation 5 and iconmoon. I can't show you a demo as all images are bound by the NDA.

我在这里失去了，任何想法为什么会发生这种情况？

I'm at a loss here, any idea why this happens?

推荐答案

在我的情况下，我解决了这个问题的优先级svg格式的字体。这是不幸的，因为它有最大的足迹（启用http压缩有帮助虽然）

In my case I solved the problem by prioritizing the svg format for fonts. Which is unfortunate, since it has the largest footprint (enabling http compression helps though)

还要确保不要使用＃符号在您的字体url：

As well make sure not to use the # symbol in your font 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');
    }
}

这篇关于大Iconfont图标在右侧切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！