Question

我目前有一个带有webview的应用程序。 webview加载css，确定每个设备应使用的特定字体。

对于我的iOS设备，我使用HelveticaNeue CondensedBold，因为它包含在iOS5 +中。由于我不能用于早期的iOS和Android，因为它不是系统字体，因此我使用Googles OpenSans-CondensedBold。

我遇到的问题是在使用2.3.X的Android设备上。 font-family回退根本不起作用。由于HelvelticaNeue字体不存在，它只是失败并且不会回退到下一行的OpenSans。

font-family: 'OpenSans-CondensedBold', 'Helvetica', 'Arial';

如果我在上面的例子中从css中删除了HelveticaNeue-CondensedBold，那么OpanSans字体可以完美地在Android上运行。

下面的当前CSS。

@font-face {
    font-family: 'OpenSans-CondensedBold';
    src: url('/webfonts/opensans-condbold.eot');
    src: url('/webfonts/opensans-condbold.eot?#iefix') format('embedded-opentype'),
         url('/webfonts/opensans-condbold.woff') format('woff'),
         url('/webfonts/opensans-condbold.ttf') format('truetype'),
         url('/webfonts/opensans-condbold.svg#OpenSans-CondensedBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-size: 13px;
    font-family: 'HelveticaNeue-CondensedBold', 'OpenSans-CondensedBold', 'Helvetica', 'Arial';
    font-weight: normal;
    font-style: normal;
}

Answer 1

您可以尝试将字体文件编码为base64数据uri .. sencha touch 2也正在执行此操作，它似乎可以正常工作。

要执行此操作，请在此处上传您的字体文件http://dopiaza.org/tools/datauri/index.php 然后在CSS中使用生成的代码

@font-face {
    font-family: "My Font";
    src: url(data:application/x-font-woff;base64,[base-encoded font here]) format('woff'), 
         url(data:image/svg+xml;base64,[base-encoded font here]) format('svg'), 
         url(data:application/x-font-ttf;base64,[base-encoded font here]) format('truetype'); 
}

如果你正在使用指南针，它似乎有a method来动态编码字体文件

这个方法也存在a related个问题

Android 2.3.X css font-family后备无法正常工作

1 个答案: