問題タブ [google-font-api]

私は自分のページの 1 つでGoogle Fonts の Open Sans フォントを使用しています。フォントに関して Google とほぼ同じスタイルを使用していますが、発音区別符号は残りの文字よりもやや太くなっています。

(ライブバージョンはwww.cabsurf.comで見ることができます)

私の CSS の唯一の違いは、フォント ファミリを宣言する方法です。

しかし、宣言に Open Sans だけを残しても同じように見えます。

上記の Google Fonts ページに同じテキストを配置しました (Chrome の inspect 要素を使用)。テキストは横に正しくレンダリングされているので、フォントは問題ないことがわかります。

私は何が間違っているのですか？

編集：

MacOS X 10.8.4 で Chrome 27 / Firefox 22 を使用する

私のサイトの一部のテキストが、Chrome で奇妙なことに 2 行に分かれています。FF と IE では、1 行にうまく収まります。ブラウザには、フォントをレンダリングする独自の方法がある場合があることを読みました。これを修正する方法はありますか？

HTML:

CSS:

フィドルへのリンク: http://jsfiddle.net/yishaib/Qqgxt/

※もちろん、文章をいじってます。

PT Sans をニュースレターに追加しようとしていますが、何らかの理由で読み込まれません。ほとんどすべてのコードをコピーしましたが、機能しません。助けてくれる人にはとても感謝しています。

CSSコードは次のとおりです。

および HTML コード:

編集: CSS の残りの部分は次のとおりです。

Google フォントを Google Apps Script の HTML サービスにインポートできますか?

私はやろうとしています:

そして使う

しかし、サンセリフ フォントに戻り続けています。

助けてくれてありがとう、

Vollkorn google フォントを使用した見出しがいくつかあります。Firefox と Chrome でのみ、デフォルトの太字と通常のフォント スタイルを使用すると、実際のテキストが要素の下の境界を超えて押し出されることに気付きました。斜体にすると元に戻ります。これは、フォントの太さが通常の場合には発生しません。

この動作を示す非常に単純な HTML ファイルを作成しましたが、問題は私だけに存在し、ファイルを他の人に送信しましたが、これらの 2 つのブラウザーでは問題ありませんでした。

これを jsFiddle で再現しようとしましたが、うまくいきませんでした。 http://jsfiddle.net/5WDJU/1/

これがPastebinのコードです。簡単にするためにjQueryを貼り付けました。 http://pastebin.com/yXzHqKrD

これは、私のコンピューターの問題を示すスクリーンショットです。

また、GoogleフォントのWebサイトにアクセスしてFirebugでスタイルを切り替えることでこれを再現しようとしましたが、うまくいきました。

jsFiddle やフォント Web サイトのように、これを修正する特定のスタイルがありませんか? それでも、ファイルを送信した人のコンピューターで発生しない理由がわかりません。これは、Google フォントの潜在的な落とし穴ですか?

Google Fonts API を使用してウェブサイトに Ubuntu フォントを使用しようとしましたが、Google が持っている Ubuntu フォントとマシンにインストールされているローカルの Ubuntu フォントとの間で競合が発生したため、問題が発生しました。最終的な結果として、font-weight 400 では Ubuntu フォントを使用できません。私は font-weight 300 と 500 に制限されています。メイン サイトはとにかく font-weight 300 ですが、見出しを強調するために font-weight 400 を使用したいと考えていました。

Google Fonts がローカル フォントへの参照をすべて削除するために使用する CSS を編集することで、これを回避したいと考えています。これを手動で試してみましたが、動作します。問題は、Google が提供する CSS がブラウザーに合わせてカスタマイズされているため、表示された CSSを編集してローカルに保存すると、同じブラウザーを使用しているユーザーに対してのみフォントが機能することです。

では、その場で CSS を編集して、ローカル フォントへの参照を削除することは可能でしょうか?

.

私は大まかな解決策のアイデアを持っていますが、それが実際に実装できるかどうかを知るには十分な教育を受けていません. 基本的に、エンド ユーザーが を通じて要求する PHP スクリプトを使用できます<link rel="css.php">。この PHP ファイルは、ブラウザに関する情報を含むユーザーの HTTP リクエストを読み取り、まったく同じ HTTP 情報を使用して Google Fonts API へのリクエストを送信します。Google Fonts は、ユーザーが必要とする CSS を提供します。残りは文字列操作です。これは機能しますか？