@ font-face src:local-ユーザーがすでにローカルフォントを持っている場合、どのように使用しますか?


83

@font-faceユーザーがすでにフォントを持っている場合にブラウザがフォントをダウンロードしないように使用する正しい方法は何ですか?

@ font-faceを使用して、システム(Linux)にすでにインストールされているDejaVuを定義しています。Firefoxはフォントをダウンロードしていませんが、Chromiumは毎回フォントをダウンロードしています。

font squirrelに基づく私のCSSコードとその質問は、次のようになります。

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-webfont.eot');
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... @font-face definitions for italic and bold omitted ... */

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-BoldItalic-webfont.eot');
    src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
    font-weight: bold;
    font-style: italic;
}

回答:


104

ローカルファイルを最初に確認する場合は、次のようにします。

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}

ここで何をすべきかについてより詳細な説明があります


3
src(OPの例のように)2秒ある場合はどうなりますか?私たちlocalは最初のものを着ますか、それとも2番目のものを着ますか?
mpen 2015年

-7

私は実際には何もしていないfont-faceので、これをほんの少しの塩で取ってください。しかし、特定のWebフォントがユーザーのマシンにインストールされているかどうかをブラウザーが明確に判断する方法はないと思います。

たとえば、ユーザーは自分のマシンに同じ名前の別のフォントをインストールすることができます。明確に伝える唯一の方法は、フォントファイルを比較して、それらが同一であるかどうかを確認することです。そして、ブラウザは最初にWebフォントをダウンロードせずにそれを行うことはできませんでした。

Firefoxは、font宣言で実際に使用するときにフォントをダウンロードしますか?(例h1 { font: 'DejaVu Serif';)?



ええ、衝突は起こりそうにないと思います。続ける。
Paul D. Waite 2010年

5
cssのfont / font-familyは、ブラウザに何もダウンロードさせません。フォントがローカルで見つからない場合は、無視されます。そのため、通常はフォントスタック(フォントのリスト)を使用します。最初のフォントがない場合は、2番目のスタックを試します。@フォントフェース比較的「新しい」何か(あるstackoverflow.com/questions/2219916/is-font-face-usable-now
dbarbosa

@dbarbosa:私は方法font/font-family動作を知っています。私は明らかにどのように@font-face機能するのかわかりません!
Paul D. Waite 2010年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.