一些 Bootstrap3 字形在phonegap android webview 上无法正确显示

2023-12-23

请看一下附上这个截图 https://dl.dropboxusercontent.com/u/53674497/Screenshot_2013-10-17-10-43-09.png。 这是我的 PhoneGap 测试应用程序 - 在 Galaxy S4 上拍摄。

您应该会看到铃铛、书签、公文包和相机图标(以及更多图标)未按预期显示。

以下是我的观察:

  1. 所有图标都可以在 PC 和移动设备上的浏览器(chrome、safari)中正确显示
  2. 所有图标都可以在ios的同一个应用程序中正确显示(在iphone/ipad、ios7中检查)

“问号”只能在 Android 应用程序中看到。

有谁知道原因吗?


这是转义序列的问题。如果您可以可靠地维护 UTF-8 编码的 CSS 文件,则可以覆盖 Bootstrap 默认值以使用实际的非转义字形。

(根据您的浏览器,以下代码将显示为包含一堆框。不过,复制代码并将其粘贴到 UTF-8 文档中应该会保留这些值。)

@charset "UTF-8";

.glyphicon-bell:before {
  content: "????";
}
.glyphicon-bookmark:before {
  content: "????";
}
.glyphicon-briefcase:before {
  content: "????";
}
.glyphicon-calendar:before {
  content: "????";
}
.glyphicon-camera:before {
  content: "????";
}
.glyphicon-fire:before {
  content: "????";
}
.glyphicon-lock:before {
  content: "????";
}
.glyphicon-paperclip:before {
  content: "????";
}
.glyphicon-pushpin:before {
  content: "????";
}
.glyphicon-wrench:before {
  content: "????";
}

您还可以更改转义序列来解决此问题,但浏览器支持有所不同。如果您仅针对 Android/BlackBerry,则以下内容应该可以正常工作:

.glyphicon-bell:before {
  content: "\d83d\dd14";
}
.glyphicon-bookmark:before {
  content: "\d83d\dd16";
}
.glyphicon-briefcase:before {
  content: "\d83d\dcbc";
}
.glyphicon-calendar:before {
  content: "\d83d\dcc5";
}
.glyphicon-camera:before {
  content: "\d83d\dcf7";
}
.glyphicon-fire:before {
  content: "\d83d\dd25";
}
.glyphicon-lock:before {
  content: "\d83d\dd12";
}
.glyphicon-paperclip:before {
  content: "\d83d\dcce";
}
.glyphicon-pushpin:before {
  content: "\d83d\dccc";
}
.glyphicon-wrench:before {
  content: "\d83d\dd27";
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一些 Bootstrap3 字形在phonegap android webview 上无法正确显示 的相关文章

随机推荐