Question

我有一个PhoneGap应用程序，它立即执行window.location ='http://example.com'，然后继续在网站上工作。它工作得很好......除了在Android上我的字体表现得很奇怪。我正在使用几种网页字体，使用：

加载

<link href="http://webfontpath/blah.css" rel="stylesheet">

当我在网上查看网站时，以及当我在iPhone上的PhoneGap应用程序中加载它时，这非常有用。但是，在Android上，这两种字体中的字符只显示为空白。至少，他们会一直按下我的一个按钮，此时字体会神奇地弹出视图，并在用户进入应用程序的剩余时间内保持不变。

我原本以为这是一个CORS问题，但我已经检查过，并且我已经在confg.xml中将访问源设置为“*”。此外，如果它是一个安全的东西，当我点击页面时，它们弹出并没有多大意义。

我还尝试将其中一种字体复制到我自己网站上的某个文件夹中，并在那里引用它 - 行为保持不变。

我在想，在字体实际加载之前，PhoneGap可能正在向我显示页面，所以我在5秒后添加了一些Javascript刷新页面，但这并没有更新字体。实际上我似乎必须点击屏幕上的按钮。

我知道这一切听起来都很奇怪，但是，确实如此。

Answer 1

我没有明确的答案，但可能是一种可行的解决方法。

也许渲染：before和：after在字体准备好之前，在这种情况下它呈现空白。如果你强制重绘它应该修复，它点击时它会执行。试试下面的

$(document).ready(function() {
  var $style;
  $style = $('<style type="text/css">:before,:after{content:none !important}</style>');
  $('head').append($style);
  return setTimeout((function() {
    return $style.remove();
  }), 0);
});

PhoneGap / Cordova直到我点击页面才显示字体

1 个答案: