問題タブ [font-face]

私はあなたのために少し奇妙なものを持っています（いわば）。私は自分のサイト用に小さな「近日公開」ページを考案しました。これはローカルで（WAMPセットアップで）問題なく動作します-対応するブラウザー（ChromeやSafariなど）では、ページは見栄えがよく、CSS3トランジション効果が少しありますホバーすると。また、他のブラウザーでは、ページは視覚的に（実質的に）同一に見え、ホバー効果はトランジションなしで機能します。

ホスティングにアップロードした後も、サイトはChromeとSafariで正常に表示され、正常に動作しますが、Firefoxでは何らかの理由で、@ font-face宣言が機能していないようで、IEではレイアウトが少し異なります。

私は大いに困惑しています！ファイルは私のホスティングで私がローカルに持っているものと同じです。

URLはhttp://iamfriendly.com/です。

CSSファイルは次の場所に表示されます。

http://iamfriendly.com/wp-content/themes/iamfriendly_comingsoon/css/screen.css

と

http://iamfriendly.com/wp-content/themes/iamfriendly_comingsoon/css/typography.css

任意の提案をいただければ幸いです！

リチャード

カスタムフォントと@font-faceタグを使用しています。Windowsでは、Firefox、Chrome、IEのいずれであっても、すべてが見栄えがします。

Macでは、それは別の話です。何らかの理由で、Macフォントレンダラーはフォントが実際よりもはるかに短いと考えています。

たとえば、次のテストコードについて考えてみます（実際の例はこちら）。

WindowsFirefoxとMacFirefoxで開きます。マウスを使用して選択します。

Windowsでは、フォントが完全に選択されていることがわかります。

Macでは、フォントの約半分しか選択されません。選択しているものを見ると、フォントの高さ全体ではなく、その部分が中央に配置されていることがわかります。

このかなり大きな不一致を修正する方法はありますか？

次のコードは、GoogleChromeベータ版とIE7で機能します。ただし、Firefoxには問題があるようです。Firefoxがクロスドメインのインポートについてあまり友好的ではないことを知っているので、CSSファイルがどのように含まれるかという問題であると思われます。

しかし、これはすべて静的HTMLであり、クロスドメインの問題はありません。

私のlanding-page.htmlでは、次のようにCSSインポートを実行します。

main.css内に、次のような別のインポートがあります。

type.css内には、次の宣言があります。

type.cssと同じ場所に「font」というディレクトリがあります。このフォントディレクトリには、すべてのwoff / ttf/svgファイルなどが含まれています。

私はこれに困惑しています。ChromeとIEで動作しますが、Firefoxでは動作しません。これはどのように可能ですか？私は何が欠けていますか？

私はチャンクファイブと呼ばれるフォントを使用していますが、font-faceを埋め込んだ場合、Windowsがフォントをレンダリングする方法が原因で、Windows 7ブラウザーではほとんど読めないように見えます（あいまいで太すぎます）。font-weightやtext-shadowなどを変更してみましたが、効果がありません。これを変更する方法はありますか、それともcufonに頼る必要がありますか？

一部のヘッダーに @font-face を使用しています。

置き換えられた書体は、寸法と全体的な文字が異なります。切り替えが発生すると、古い書体のルールはあまり良くありません。

条件付き Javascript スクリプトを作成する以外に、@font-face フォント (ブラウザーがサポートしている場合) の一連の CSS ルールと、置き換えられていないデフォルト フォントの CSS ルールを設定する方法はありますか?

やあみんな、私はIExplorer、Chrome、Safariなどに問題があります。Firefoxだけがこの@font-faceルールのすべてで完全に機能します。

Cssの場合：

.htmlで

CalibriフォントはOSにインストールされているためか、問題はありません。HANDフォントが問題です。さらに、IExplorerはcss（color、font-size、align ..）で税関を書く必要はありません。それだけです。解決策を見つけたいと思っています。

追伸：2つの異なるオンラインコンバーターを使用して.ttfフォントをeotに変換しました-スパムでごめんなさい：/（http://ttf2eot.sebastiankippe.com）www.kirsle.net/wizards/ttf2eot.cgi実行に問題があるためグーグルコードのttf2eotどうもありがとう！

フォント面の埋め込みを使用するときに、Windowsでアンチエイリアスとしてフォントをレンダリングする方法はありますか？

http://code.google.com/webfontsは、Windows 7（chrome / firefoxを試した）と比較して、Ubuntu/Macではるかに見栄えがします。

オフラインのHTML5テストアプリケーションを作成しようとしていますが、同時に新しいgooglefontsapiで遊んでいます。リモートフォントをキャッシュする方法を知っている人はいますか？単にAPI呼び出しをキャッシュマニフェストに入れるだけでは機能しません。これは、APIが実際に他のファイル（ttf、eotなど）をロードするためだと思います。

フォントAPIをオフラインで使用する場合のアイデアはありますか？

参考までに、これは私が行っている呼び出しです。

Webサイトで使用するフォントリポジトリのタイプを作成しようとしています。これにより、他の設定を行わなくても、css内のリポジトリ内の任意のフォントを呼び出すことができます。これを行うために、各フォントのさまざまなファイルタイプを含むリポジトリ内の各フォントのフォルダーを配置するサブドメインを作成しました。また、サブドメインのルートにfont-face.cssというcssファイルを配置し、@font-face各フォントの宣言を入力しました。フォントは絶対リンクでリンクされているため、どこからでも使用できます。

私の問題は、それらが配置されているサブドメインのフォントしか使用できないようですが、他のサイトではフォントが表示されないことです。firebugを使用して、font-face.cssファイルが正常にリンクおよびロードされていることを確認しました。では、なぜフォントが正しくロードされないのですか？フォントファイルなどに保護はありますか？私はこれを許可されるべきすべてのフォントを使用しているので、なぜこれが発生しているのかわかりません。アパッチの問題かもしれませんが、リンクするとフォントを問題なくダウンロードできます。

ああ、そして明確にするために、私はこれを設定することによって著作権を侵害していません。私が使用しているすべてのフォントは、この種のものを許可するためにライセンスされています。ただし、このフォントのリポジトリにアクセスできるのは自分だけである方法を設定したいのですが、それは別のプロジェクトです。

少し前にデザインのブログを読み始めたのですが、@font-face が Web の新たな機能であるという印象を持っていたため、昨年末かそのような時期に人気が出たようです。しかしその後、Internet Explorer が IE4 以降 (何らかの変換を伴う) を持っていることがわかりました。

では、最近 @font-face をオンラインで見るのは一般的ですか? このようなことを行う前に、アクセシビリティ、合法性、またはレンダリングに関して何か心に留めておくべきことがありますか? Hulu.com では、Canvas と「cufon」という JavaScript を使用してフォントをレンダリングしていることがわかりました。