7

我正在使用我的客户在 Web 应用程序的索引页面上作为标题徽标提供的图标字体中的大图标。徽标占设备宽度的 60%，由一个大圆形徽标（约占图标的 40%）组成，下方有文字，纵向模式下占设备宽度的 60%。

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

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

它在桌面预览和我的 google nexus 4 Dolphin 浏览器上看起来不错，但在 chrome（在 nexus 上）中，标语被切断，有点像“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;
}

我正在使用 Foundation 5 和 iconmoon 的自定义版本。我无法向您展示演示，因为所有图像都受 NDA 约束。

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

4

3 回答 3

6

就我而言，我通过优先考虑字体的 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');
    }
}
于 2014-06-20T15:08:59.573 回答
2

这是 Android 版 Chrome 中的一个已知问题，非常令人恼火。我自己在几种情况下都有过。似乎每当浏览器出现：

  • 在风景中
  • 有问题的对象或其祖先之一通过任何方法居中（文本对齐、绝对定位或边距：0 自动）

该错误已在铬论坛中提到： https ://code.google.com/p/chromium/issues/detail?id=391183

我希望我有办法解决它，但在撰写本文时似乎还没有明确的解决方案。让我们希望尽快修复错误。

于 2014-08-26T07:20:39.620 回答
0

试试媒体查询

/* 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-12T09:26:34.067 回答