1

私は現在、ウェブビューを備えたアプリを持っています。Webview は、各デバイスが使用する特定のフォントを決定する css を読み込みます。

私の iOS デバイスでは、iOS5+ に含まれている HelveticaNeue CondensedBold を使用しています。これはシステム フォントではないため、以前の iOS および Android では使用できないため、Google の OpenSans-CondensedBold を使用しています。

私が直面している問題は、2.3.X を使用する Android デバイスにあります。font-family フォールバックがまったく機能していません。HevelticaNeue フォントが存在しないため、失敗するだけで、次の 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;
}
4

1 に答える 1

0

フォント ファイルを 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'); 
}

コンパスを使用している場合、その場でフォントファイルをエンコードする方法があるようです

この方法にも関連する質問があります

于 2013-06-05T11:56:39.333 に答える