New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS: Font ICON 在部分设备中不显示 #193

Closed
minwe opened this Issue Nov 3, 2014 · 25 comments

Comments

Projects
None yet
9 participants
@minwe
Contributor

minwe commented Nov 3, 2014

@chuanze

图标显示不出来,红米手机,海豚浏览器

@yi1i

Font Awesome在酷派 9190L手机中的微信浏览器里图标显示不出,在手机浏览器中倒能显示

@李帖

目前最新版本,在android 版 微信内是不显示图标的。不知道伙伴们是否有遇到类似问题。

via @chuanze

修改一下css代码就可以了。将 [class*='am-icon-'] 改为

[class*='am-icon-'] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

可能是这些浏览器内置的样式覆盖了 font-family: "FontAwesome";       

@minwe

This comment has been minimized.

Contributor

minwe commented Nov 17, 2014

红米手机使用官网测试了一下没有什么问题。

minwe pushed a commit that referenced this issue Nov 17, 2014

@minwe

This comment has been minimized.

Contributor

minwe commented Dec 4, 2014

@huangzhipeng 找小萌的 LG 手机用 http://amazeui.org/css/icon 测试一下

用微信或QQ里面打开页面,字符图标失效,完全乱码;但如果在浏览器(如chrome)下面就完美显示。
使用机型:LG ls980、三星:note3
微信最新版本、手机QQ最新版本。

@minwe minwe added v1.x v2.x labels Dec 4, 2014

@minwe

This comment has been minimized.

Contributor

minwe commented Dec 4, 2014

#292

icon图标显示不出来,在华为荣耀3c机型上(型号:h30-t30)

@minwe

This comment has been minimized.

Contributor

minwe commented Dec 4, 2014

@minwe

This comment has been minimized.

Contributor

minwe commented Dec 4, 2014

三星 Note3(N9008) Android 4.4.2

note3-qq-1
note3-qq-2
note3-wechat-1
note3-wechat-2
default

@huangzhipeng

This comment has been minimized.

Contributor

huangzhipeng commented Dec 4, 2014

LG-D802 Android 4.4.4
微信:6.0
uc: v9.9.7.500

正常

minwe pushed a commit that referenced this issue Dec 4, 2014

minwe added a commit that referenced this issue Dec 4, 2014

Merge pull request #293 from allmobilize/codename-h
add explanations about Font Icon #193
@minwe

This comment has been minimized.

Contributor

minwe commented Dec 17, 2014

https://developer.wordpress.org/resource/dashicons/ 在有问题的设备上测试这个字体图标

@mujiangze

This comment has been minimized.

mujiangze commented Jan 19, 2015

screenshot_2015-01-19-14-16-33
红米note还是不显示。。。

@mujiangze

This comment has been minimized.

mujiangze commented Jan 19, 2015

不引用amazeUI的样式,直接用fontawesome就能显示。

@minwe

This comment has been minimized.

Contributor

minwe commented Jan 19, 2015

@mujiangze 使用的微信?具体是什么版本的?

@mujiangze

This comment has been minimized.

mujiangze commented Jan 19, 2015

@minwe 嗯,用的微信浏览器查看的,同事的vivo手机的微信也不行。尝试了很多网上的办法不行,后来把amazeUI.basic.css文件里的@font-face引入字体路径改成本地相对路径,( {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=4.2.0');)本地font文件夹里放相对应的4.2版本的字体文件
就正常显示了

@mujiangze

This comment has been minimized.

mujiangze commented Jan 19, 2015

@minwe
default
微信都是最新的版本,因为之前做项目用到就是在微信里面某些机型(比如我的这个)不显示,在自带浏览器里面显示正常。

@qixiaobo

This comment has been minimized.

qixiaobo commented Feb 25, 2015

nexus s 和红米note相同现象

@Linrstudio

This comment has been minimized.

Linrstudio commented Mar 6, 2015

红米手Q不显示 icon

@Linrstudio

This comment has been minimized.

Linrstudio commented Apr 9, 2015

注意了,如果手Q或微信不是X5内核,可能部分安卓手机不显示 iconfont,可以理解为安卓的 webview BUG。

@minwe

This comment has been minimized.

Contributor

minwe commented Dec 3, 2015

再次用以前有问题的酷派手机测试了一下,都能正常显示了。

应该是随着 QQ 和微信版本升级,webview 的 bug 已经修复,加上手机更新换代,我们就不再关注这个问题。

@minwe minwe closed this Dec 3, 2015

@minwe minwe added the wontfix label Dec 3, 2015

@tufei1995

This comment has been minimized.

tufei1995 commented Apr 5, 2016

如果CSS是其他网站引入的,比如CDN,那么字体文件就会存在跨站请求的问题,所以字体不会显示

@meicj

This comment has been minimized.

meicj commented Jul 8, 2016

问题:在酷派 8730L下,所有字体图标不能正常显示,暂未找到有效方法

测试机型:酷派 8730L
系统版本:安卓4.3
软件:自带浏览器

http://www.w3cmark.com/demo/iconfont.html 页面效果截屏(所有方式的图标不能显示):
image

http://amazeui.org/css/icon?_ver=2.x 页面效果截屏(所有图标不能显示):
image

包括上面@chuanze 说的方法使用 font: normal normal normal 14px/1 FontAwesome; 也不能正常显示

@minwe

This comment has been minimized.

Contributor

minwe commented Jul 8, 2016

@meicj

你可以测试一下 http://t.amazeui.org/kitchen-sink/#/icon?_k=bxrqbc

以及 http://getbootstrap.com/components/#glyphicons ,如果都不能显示,那就是硬伤了。

@meicj

This comment has been minimized.

meicj commented Jul 10, 2016

@minwe

感谢你的回复,经过一番折磨昨天终于解决了这个问题, 并 整理了一篇文章

再次感谢。

@minwe

This comment has been minimized.

Contributor

minwe commented Jul 10, 2016

@meicj

推演测试得很仔细、完整,通过对比研究找到问题的思路也值得学习。

原来遇到类似问题的同学可以参考。

根据 https://css-tricks.com/snippets/css/using-font-face/ 上的描述:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

上面的设置支持到 Safari 3+,svg 格式只是为了 iOS 4.1- 的设备,基本可以忽略了,所以 Amaze UI 在以后的更新中打算直接删除 svg 设置。

另外,CIU 上的数据只针对 Android 原厂的浏览器及 WebView,对国内某些厂商进行破坏性二次开发的 UA,显然是不准确的。这个问题本质上还是酷派进行二次开发以后的产生的 bug。

@meicj

This comment has been minimized.

meicj commented Jul 10, 2016

@minwe 确实针对不需要兼容 iOS4.1- 的设置,可以直接去掉 svg,取决于应用场景

minwe pushed a commit to amazeui/amazeui-touch that referenced this issue Jul 11, 2016

minwe pushed a commit that referenced this issue Jul 11, 2016

@CFM880

This comment has been minimized.

CFM880 commented May 3, 2017

还有可能是CDN的问题,看看在浏览器调试中能否Preview字体,不能的话,就是字体加载失败了,这时候无论是什么设备应该都不能显示(ps:现在我们腾讯云的cdn的字体,在Android设备上就是属于这种情况,而iOS设备没问题)

使用cdn css net 是的IonicIcon字体

cdn css net

使用自己的腾讯云上的cdn

default

@lwxyfer

This comment has been minimized.

Member

lwxyfer commented May 12, 2017

@CFM880 不知道你解决没有,你的情况可能是跨域造成的字体加载问题。可以换其他浏览器测试下。

参考:

@CFM880

This comment has been minimized.

CFM880 commented May 13, 2017

@lwxyfer 目测不是跨域引起的,只是在Android 显示不全,目前没有把字体文件放在自己的cdn上,使用cdn css net上的ionic字体是OK的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment