我正在使用我的客户端提供的图标字体中的大图标作为Web应用程序索引页面上的标题徽标.徽标大小为设备宽度的60%,包含一个大圆形徽标(约占图标的40%),文本在下方,宽度为60%,在纵向模式下设备.
我将带有文本的徽标作为一个矢量图标字体图标,因为客户希望文本与CI要求的品牌完全一致.
_____###_____ ____#####____ _____###_____ Slogan is here
它在桌面预览和我的谷歌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; }
我正在使用基础5和iconmoon的自定义版本.我无法向您展示演示,因为所有图像都受NDA约束.
我在这里不知所措,知道为什么会这样吗?
解决方法
在我的情况下,我通过优先考虑字体的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'); } }