問題タブ [font-face]

画像、 Flash、またはその他のグラフィックを使用せずに、Web サイトにカスタム フォントを追加する方法はありますか?

たとえば、私は結婚式の Web サイトに取り組んでいましたが、そのテーマに適したフォントをたくさん見つけました。しかし、そのフォントをサーバーに追加する正しい方法が見つかりません。また、そのフォントを CSS とともに HTML に含めるにはどうすればよいですか? グラフィックなしでこれを行うことは可能ですか？

私は姉がフラッシュで作成したウェブサイトを html に変換するのを手伝っています。

@font-face を介して css ファイルで定義しようとしているフラッシュで派手なフォントを使用します。Firefox、IE、および Chrome でページを開こうとしましたが、適切なフォントがどこにも表示されません。

私が使用している宣言は次のとおりです。

http://judith.huinink.net/chilax/index.htmには html が含まれています。

http://judith.huinink.net/chilax/chilax.cssには完全な CSS が含まれています。

フォントファイルをダウンロードできることを確認しましたが、ブラウザでページを開いたときにフォントが使用されません。何かを見落としているに違いない。誰か提案はありますか？

更新: ヘッダー リクエスト情報が原因のようです。リクエスト ヘッダーの max-age プロパティを変更するにはどうすればよいですか? ティア。

こんにちは、私は Web サイトで @font-face を使用していますが、テキストの読み込みが遅れています (おそらくページごとにフォントを読み込むため)。正しく表示するには、クライアントがフォントを一度ダウンロードする必要があることを理解していますが、すべてのページですか?

ブラウザにそのファイルを強制的にキャッシュさせる方法はありますか? または、フォントの読み込み時間を短縮する別の方法はありますか? (これはServer Faultに投稿する方が適切な質問ですか?)

前もって感謝します。最悪の場合、私は遅延を受け入れるので、「@font-faceを脱ぐ」という回答は必要ありません... ;)

追加情報：

• Mac と Windows (XP と 7) の両方で、Safari (4) と Firefox (3.5RC1) の両方でこれをテストしました。
• 私がテストしたすべてのブラウザーは現在、キャッシュを許可するように設定されています (デフォルトでオンになっています)。
• URL は動的ではなく、単純に「/fonts/font.otf」です。
• ページがフォントをロードして正しく表示するので、フォント URL は正しいですが、通常より遅くなります。

• リクエストヘッダー:

  Cache-Control:max-age=0
  If-Modified-Since:Wed, 24 Jun 2009 03:46:28 GMT
  If-None-Match:W/"484d9f2-a5ac-46d10ff2ebcc0" リファラー
  : http://testurl.com /
  User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6; en-us) AppleWebKit/530.13 (Gecko のような KHTML) バージョン/4.0 Safari/530.15

• 応答ヘッダー:

  接続: キープアライブ
  日付: 2009 年 6 月 25 日 (木) 02:21:31 GMT
  Etag: "484d9f2-a5ac-46d10ff2ebcc0"
  キープアライブ: タイムアウト = 10、最大 = 29
  サーバー: Apache/2.2.11 (Unix) mod_ssl/ 2.2.11 OpenSSL/0.9.8i DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635

私は、変換された .js ファイルをサーバーに保存する (そして EULA を破る) ことなく、クエリを実行して必要に応じて返すことができる MySQL データベースに実際のフォント データを保存する Cufón を実装するためのより安全な方法を研究しようとしています。 .

これは可能ですか？私はまだこれをテストする初期段階にあります。

@font-face と Cufón を組み合わせて、今のところこのソリューションを既に実装しています。 http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/

Appleのドキュメントによると、@font-faceはiPhoneバージョンのSafariでの使用が推奨されていません。iPhoneには11個のフォント、AFAIKしか含まれていません。いずれにせよ、作成しているアプリには素敵なブラックレターフォントが必要です。ランダムなテキストを生成するので、画像はオプションではありません。どのような選択肢がありますか？私はCufónのようなJavaScriptソリューションに固執していますか？

CSS ファイルで OpenType フォントを参照していますが、Firefox 3.5 では動作しないようです。Safariで完全に機能します。フォントは相対的に参照されており、同じサーバー上でホストされていますが、別のサブディレクトリにあります。

FF3.5 で @font-face に問題があった人はいますか?

ページが読み込まれる前に、@ font-faceフォントをプリロードするか、キャッシュすることは可能ですか？ページが読み込まれる前に、ページが最終的に読み込まれるときに醜いジャンプが発生しないようにすることはできますか？

css3.0 は、最新の Opera、Safari、および Firefox ブラウザで Font-Face タグを正しくサポートしていますが、Internet Explorer では引き続き microsoft .eot 形式が必要であることを理解しています。

ホスティング サーバーが Windows でない可能性がある場合、.ttf から eot ファイル サーバー側を生成する信頼できる方法はありますか?

背景を少し提供するために、プロセス全体を自動化する必要があります。これは印刷製品の Web サイトです。プロセスの一部には、デザイナーがテンプレートを作成し、印刷可能な製品のフォントをアップロードすることが含まれます。これらの一部には、HTML フォームとして顧客にレンダリングされる編集可能な領域があります。ただし、フォントを提供しないと、編集の正確なリアルタイム プレビューを提供することはできません。

テキストはテキストエリアまたはテキスト入力フィールドにあり、編集可能なままにしておく必要があるため、Flash および Javascript の手法は機能しません。

したがって、互換性のあるブラウザ用の ttf ファイルにリンクする Font-Face が必要です。

ありがとう

私はウェブページにフォントを埋め込む方法を理解しようとたくさんググった。私が理解しているように、フォントを.ttfおよび.eot形式でWebページにアップロードする必要があります。そして、スタイルシートで@font-faceを使用します。

Kingthings_Italique.eotとKingthings_Italique.ttfをWebページのルートに配置しました。

このようなスタイルシートを作成します。

最初に私はそれをこのように参照します

そして、私はそれをこのように使おうとします

しかし、ie8とchrome2のどちらを使用しても、フォントは変更されません。

http://randsco.com/?p=680&more=1&c=1正解を理解していれば、それは可能であるはずです。

IE8でソースを開いた場合、フォント名を表示できるはずですか？IE8コードでキングを検索しても、何も見つからないためです。

CKEditor フォント コンボ ボックスにフォントを追加したいと思います。これ自体は簡単です。ただし、追加したいフォントは、@font-face CSS3 属性で使用するカスタム フォントです。なんとかできましたが、エディター自体にカスタムフォントが表示されません。CKEditor によって作成された html を取得してページの div に表示すると、カスタム フォントがうまく表示されます。また、@font-face 属性を CKEditor のテキスト領域に何らかの方法で追加して、ユーザーが入力時にカスタム フォントを表示できるようにしたいと考えています。

これは可能ですか？