wp 2012 google web fontsを指定したらテキストが二重に表示されるは何故か?

制作中のサイト
http://kuulei90.com/
ページタイトル

h1 とh2にgoogle web fontsを使用しています。
デスクトップ(firefox)で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ(safari)で見たら
文字は二重にはなってないけど、太くなってしまっています。

フォントは、クローンのstyle.cssで指定してます。

何故でしょうか?

カテゴリー: 質問と回答 | タグ: , , , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

wp 2012 google web fontsを指定したらテキストが二重に表示されるは何故か?」への3件のフィードバック

  1. タカハシ先生タカハシ先生

    h1とh2にはユーザーエージェントCSSによって、font-weight:boldが指定されているはず。
    これをnormalにするとどうでしょう?二重が解消しますか?
    どうも現状のboldは複製したパスを横にずらしただけの形に見える。boldとして設計されたものではない。
    無料だから文句は言えないか。

    以下、試してみたい解決法。

    1.boldに該当するフォントも利用できるなら、そちらをfont-familyに指定する
    2.二重になった隙間を埋める様にtext-shadowで誤摩化す
    3.font-weightはnormalにする

    あと、どうもサイトの表示が重い気がします。余計なscriptやfontを読み込んでいないかな?

    返信
    1. 真中のぶ真中のぶ 投稿作成者

      h1とh2にはユーザーエージェントCSSによって、font-weight:boldが指定されているはず。
      これをnormalにするとどうでしょう?二重が解消しますか?

      これで解消しました!

      いろいろやってみて、ようやく解消しました。
      先生、ありがとうございました。今回の件で、何か不具合が起きた時に、多方面からチェックするわけですが、ユーザーエージェントCSSという方面も視野に入れるという事を学びました。

      ※ユーザーエージェントCSSとういのは、見ているブラウザ自体のCSSという事です。(先週、勉強会でやった)

      余計なscriptやfontを読み込んでいないかな?

      1つ余計なのを読み込んでいたので削除しました。

      ・ちなみに、h1のwebフォントはheader.phpのヘッドの中にgoogle web fontsを読み込む指定を書いて、style.sccで指定しています。
      ・サイト内の英語全部に適応されているgoogle web fontsは、WPのプラグインでやっています。「WP Google Fonts」という名前のプラグインです。

      返信

タカハシ先生 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.