制作中のサイト
http://kuulei90.com/
ページタイトル
1 2 3 4 5 6 |
<hgroup> <h1 class="site-title"> <a rel="home" title="kuulei" href="http://kuulei90.com/">kuulei</a> </h1> <h2 class="site-description">official web site</h2> </hgroup> |
h1 とh2にgoogle web fontsを使用しています。
デスクトップ(firefox)で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ(safari)で見たら
文字は二重にはなってないけど、太くなってしまっています。
フォントは、クローンのstyle.cssで指定してます。
何故でしょうか?
h1とh2にはユーザーエージェントCSSによって、font-weight:boldが指定されているはず。
これをnormalにするとどうでしょう?二重が解消しますか?
どうも現状のboldは複製したパスを横にずらしただけの形に見える。boldとして設計されたものではない。
無料だから文句は言えないか。
以下、試してみたい解決法。
1.boldに該当するフォントも利用できるなら、そちらをfont-familyに指定する
2.二重になった隙間を埋める様にtext-shadowで誤摩化す
3.font-weightはnormalにする
あと、どうもサイトの表示が重い気がします。余計なscriptやfontを読み込んでいないかな?
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」という名前のプラグインです。
> 1つ余計なのを読み込んでいたので削除しました。
表示スピードが上がりましたね。
> style.sccで
これはツッコミ待ちなのか?