2

CSS の例:

@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>

Droid Serif は、最近の Linux システムで非常に一般的なフォントです (少なくとも、私が使用している Ubuntu では利用できます)。

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

何がこれを引き起こしているのでしょうか？私は何か間違ったことをしていますか、それとも「ローカル」値はブラウザによって考慮されていませんか?

編集:ご参考までDroidSerifItalicに、Font Squirrel からダウンロードした場合の Droid Serif フォントのポストスクリプト名です (少なくとも私が読んだことはあります)。

EDIT-2:念のため、Ubuntu (v12.04) で Chromium Web ブラウザーを使用しています。

4

1 に答える 1

1

私はグーグルの実装を見て、彼らはこの構文/名前を使用しています:

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

この名前を使えばうまくいくと思います！PostScript 名を単に間違えたように見えるかもしれません。

ソース: http://fonts.googleapis.com/css?family=Droid+Serif:400italic

于 2012-04-30T11:31:32.937 に答える