9

@font-face ルールについて読んでいて、プロジェクトでそれを使用して、sIfr のようなものの代わりにタイトルに「フランクリン ゴシック メディア」をレンダリングする価値があるかどうかを調べようとしています。それをサポートしていないブラウザーの場合は、Arial にフォールバックできると考えました。

問題は、どのブラウザーがこの方法でのフォントの埋め込みをサポートしているかについて、決定的な答えを得るのに苦労しているということです。

これまでのところ、IE がサポートしていることはわかっていましたが、.ttf ファイルはサポートしていません。他のブラウザはわかりません。

誰かが私にある種の互換性チャートを教えてくれたら、それは素晴らしいことです.

ジョン

4

9 に答える 9

7

この記事では、ブラウザーのサポートの中間点について説明します。最も関連性の高い部分を次に示しますが、すべてを読む価値があります。

CSS3 (および 1997 年と 1998 年の CSS2 のドラフトでさえ) は、@font-face 規則を使用して、標準化されたフォント埋め込みの方法を長い間約束してきました。多くの人がおそらく知らないのは、このルールがすでに Opera 9.5 でサポートされており、Mac、Windows、および iPhone OS 用の Safari のバージョンが出荷されており、Firefox 3.1 および IE6 以降で約束されていることです。

悲しいことに、Opera 9.5 と Firefox 3.1 では @font-face のサポートがほのめかされていましたが (以下の #4 の私のコメントを参照)、実際にはそうではありません。

ただし、キャッチがあります。IE 以外のすべてのブラウザは、TrueType フォント ファイルへのリンクをサポートしています。Microsoft は、独自の EOT ファイル形式のみをサポートしています。

編集: Ric Tokyoの回答からのこの更新を含めます。

[更新 2] Opera 10 および Firefox 3.1 は、現在出荷されているアルファ版またはベータ版で TrueType および OpenType (ただし EOT は除く) へのリンクをサポートするようになりました。
于 2009-01-28T16:27:28.893 に答える
5

Safari 3.1 (およびWebkit Nightlyビルド)、Firefox 3.1、および Opera 10 は、.ttf (TrueType フォント) および .otf (OpenType フォント) の @font-face 埋め込みをサポートしています。Internet Explorer バージョン 5 以降は、.eot (独自の埋め込みオープン タイプ形式) の @font-face 埋め込みのみをサポートします。

Microsoft は、ほとんどのフォント形式を .eot に変換するために使用できるWEFT (Windows のみ)と呼ばれる恐ろしい小さなフォント変換ツールを作成しています。

CSS3.info には、@font-face ルールの使用方法に関する簡単なチュートリアルがあります。このサイトは、CSS3 トリック (この場合は CSS2 提案のトリック) を試すための優れたリソースです。

A List Apartには、このテーマに関するより詳細な記事があります。

Web ページに埋め込むフォントは、そのライセンスで許可されていることを確認してください。フォントは Web サーバーのパブリック ディレクトリに保存され、誰でも無料でダウンロードできます。この使用は、ライセンスで常に明示的にカバーされているわけではありませんが、通常、デザイナーに直接連絡して尋ねることができます。通常、ページへのリンクを含める限り、フォントを使用できます。Franklin Gothic Medium がこの用途に承認されているかどうかはわかりませんが、承認されているとは思えません。

フリーフォントのリソースをいくつか紹介します。十分に掘り下げれば、通常は似たような顔を見つけることができます。

于 2009-01-28T17:06:21.453 に答える
1

Web キットも

quirks モードは長い間、js と css の互換性テーブルの優れたリソースでした。

于 2009-01-28T16:29:37.923 に答える
1

@nezroy、ここに更新があります：

[更新 2] Opera 10 および Firefox 3.1 は、現在出荷されているアルファ版またはベータ版で TrueType および OpenType (ただし EOT は除く) へのリンクをサポートするようになりました。

于 2009-01-28T16:31:13.927 に答える
0

Webkit は ttf フォントをダウンロードして、それらがページ ソースにあるときに自動的に使用できると誇らしげにブログ投稿を書いた Safari の人々を思い出します。IE は、ビットマップ フォントのダウンロードを永久にサポートしています。

于 2009-01-28T16:29:56.800 に答える
0

ここにそれについて書いた：

http://interactivity.ifactory.com/2010/04/font-face/

基本的に、現在のブラウザの 95% がサポートしています。

IE6+、FF 3.5+、Chrome、Safari 3.1+、Opera。

于 2010-04-23T00:00:51.760 に答える
0

わかりましたので、これを行う最善の方法は次のとおりだと思います....

  • 最初に ttf フォントを使用する
  • IE の OET フォントにフォールバックする
  • 埋め込みフォントをまったくサポートしていないブラウザーの場合は、Arial、sans-serif を使用してください。

すばらしい、EOT フォントをいくつか見つけなければなりません。

于 2009-01-28T17:22:42.683 に答える
0

一部の Java スクリプトを恐れていない場合は、次の投稿が役立ちます: http://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/。

私は自分で使用したことはありませんが、どのブラウザーでもどのフォントもサポートすることを約束しています...

于 2009-01-28T16:35:12.950 に答える
-3

彼らはそうしません、あなたの最善の策は、次のようなことをすることです:

<h1 id="MyHeading">my heading</h1>

h1#MyHeading {
    text-indent: -1000px;
    width: 200px;
    height: 50px;
    background-image: url(myheading.jpg);
}

この記事では、他のいくつかの代替案について説明します。

編集：なぜこれが反対票を投じられたのかわかりません。要するに、すべてのブラウザーでサポートされている、アクセス可能で、seo に適した方法でやりたいことができないということです。ユーザーを疎外したい場合は、他のソリューションのいずれかを選択してください。そうしないと、ユーザーを私の -1 で満足させられません。

于 2009-01-28T16:29:04.040 に答える