2012-12-17 7 views
8

私はTumblrテーマを開発しており、すべてのブラウザで使用しているフォントを使用したいと考えています。 Firefoxではcssフォントの他のドメインに対するhttp要求が許可されていないため、現在のところ、このフォントはFirefoxでは機能しませんが、他のすべてのブラウザでは標準の@ font-face構文を使用して動作します。FirefoxでのTumblrのBase64フォントエンコーディング

いくつか見て、フォントを直接CSSファイルにエンコードするためにbase64を使用することを提案しました。今はそれをやろうとしていますが、うまくいきません。私はこれまでこの技術を使ったことがないので、何かが足りないかもしれません。私はtumblrテーマのスタイルシートにリンクしており、font-family:futuraBoldを特定の要素に割り当てています。 http://www.opinionatedgeek.com/dotnet/tools/base64encode/

をして.OTFフォントファイルをアップロード:私はここにbase64でエンコーダを使用

@font-face { 
    font-family: “futuraBold”; 
    src: url(“data:font/opentype;base64,BASE64CODE”); 
} 

:ここ

は次のようにスタイルシートが見えるものです。

何か不足していますか?

+2

私の提案は、エキスパートモードで[フォントリス](http://www.fontsquirrel.com/fontface/generator)を試してみて、選択することで助けましたBase64エンコード次に、それが機能していないかどうかを確認します。 – Ally

+0

たとえば、私はOswaldを試してみましたが、ここで私に与えられたエンコードされた文字列の始まりです: 'src:url(data:application/x-font-woff; charset = utf-8; base64、...' – Ally

+0

( '' ')で置き換える必要があります。 –

答えて

2

私はあなたが一重引用符または二重引用符を必要としないことを除いてすべて正しいです。 それはちょうどこのように行く必要があります。

@font-face { 
    font-family: futuraBold; 
    src: url(data:font/opentype;base64,BASE64CODE); 
} 

希望これは

関連する問題