2012-04-30 3 views
2

例CSS:@ font-face CSSルールでは、 'ローカル'値( 'src'属性)はもう使用できませんか?

@font-face { 
    font-family: 'Droid Serif'; 
    font-weight: normal; 
    font-style: italic; 
    src: url('DroidSerif-Italic-webfont.eot'); 
    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
     local('Droid Serif'), local('DroidSerifItalic'), 
     url('DroidSerif-Italic-webfont.woff') format('woff'), 
     url('DroidSerif-Italic-webfont.ttf') format('truetype'), 
     url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); 
} 

h1 { 
    font-family: 'Droid Serif'; 
    font-weight: normal; 
    font-style: italic; 
} 

例HTML:

<div id="content"> 
    <h1>This is a big, big title</h1> 
</div> 

ドロイドセリフ(少なくとも、それは私が使用してUbuntuで利用可能です)、これらの日のLinuxシステム上で非常に一般的なフォントです。

local('Droid Serif'), local('DroidSerifItalic')を明確に定義していますが、ブラウザ(私の場合はChromium)は単に自分のコンピュータで利用可能なフォントを使用するのではなく、単にフォントファイル(WOFF形式)をダウンロードしています。

これを引き起こす原因は何ですか?私は間違ったことをやっているのですか、それともブラウザが考える「ローカルな」価値ではありませんか?

EDIT:あなたはフォントリス(私が読んだ少なくともこと)から、それをダウンロードした場合、あなたが思っている場合にはDroidSerifItalicはドロイドセリフフォントのためのポストスクリプト名です。

EDIT-2:それは十分に明確ではありません念のために、私はUbuntuの(v12.04)上のクロムのWebブラウザを使用しています。

+0

どのブラウザをお使いですか? –

+0

@AllanKimmerJensenそれは質問にありますが、私はあなたのためにそれを引用してみましょう - "...しかしブラウザ(**'私の場合はクロム '**)" * –

+0

ああ、申し訳ありませんでした、私はそれが助けてくれることを望む答えを加えました。 –

答えて

1

私はGoogleの実装を見て、彼らはこの構文/名前を使用します。

src: local('Droid Serif Italic'), local('DroidSerif-Italic') 

私はあなたがこの名前を使用する場合、それが動作すると思います!ポストスクリプトの名前が間違っているように思えるかもしれません。

出典:http://fonts.googleapis.com/css?family=Droid+Serif:400italic

+1

あなたは絶対に正しいです。なぜなら、私はこれを既に試していなかったのですか?ありがとう、今は他の人にも役立つでしょう。 :) –

+0

プロジェクトによって異なります。また、GoogleのフォントAPIを使用することをお勧めします。これは、ユーザーが既にファイルをキャッシュしているため、パフォーマンスが向上する可能性があります。これを使わない理由があるかもしれませんが、ほとんどがプラスです。 –

+0

私は、チップのおかげで、理解しています。 :) –

関連する問題