Web Design Leaves

Google Web Fonts をタイトルのロゴに使用しようとしたが、ブラウザによっては文字がきれいに表示されない。自分の Windows の環境では Firefox と IE ではきれいに表示されるが、Chrome、Safari、Opera では、文字の周りがぎざぎざしていてちょっとそのまま使用するのは難しい。

検索したところ、CSS3 の text-shadow でぼかしを使って対応する方法をみつけたので試してみるがある程度は良くなるが、今度はきれいに表示されていた Firefox と IE で文字がもったりした感じになってしまう。

text-shadow : 横オフセット値　 縦オフセット値　 ブラー（ぼかし）値 　色

文字に影をつけるプロパティ。
設定をカンマで区切って指定すると、複数の影を重ねて表示することが可能。
オフセット値の単位は px でも em でも指定可能。

例 text-shadow: 0 0 1px #666;

また、Opera ではぼかしを使ってみてもまだかなり汚い。

そこで JavaScript で OS とブラウザを判定し、jQuery を使って Chrome、Safari　の場合は text-shadow を適用し、Opera の場合は画像を表示するように下記のようにしてみた。

var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('win') != -1){    // Windowsでの処理
  // chrome, safari の場合は text-shadow を適用
  if(ua.indexOf('chrome') != -1 || ua.indexOf('safari') != -1) {
    $('div#header h1').css('text-shadow', '0 0 1px #871CA6').find('span').css('text-shadow', '0 0 1px #BA97C4');
  // opera の場合は画像で表示する
  }else if(ua.indexOf('opera') != -1) {
    $('div#header h1').css({background: 'url(images/logo_top.png) no-repeat top left', ,textIndent: '-9999px', width: '350px', height: '29px'});    
  }
}else if(ua.indexOf('mac') != -1){
  // 処理Macでの処理（Mac での表示はまだ確認していないので、未対応）    
}

メモ：
css() メソッドで background プロパティを指定する場合、画像へのパス（url）はその要素が記述してあるファイルからのパスを指定（スクリプトファイルからのパスではない）。

以下は WordPress での例。違いは画像へのパスをフルパスで記述する必要がある。

//画像フォルダへのパス
var img_dir = "http://" + window.location.hostname + "/wp-content/themes/mysite/images/";
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('win') != -1){    // Windowsでの処理
  if(ua.indexOf('chrome') != -1 || ua.indexOf('safari') != -1) {
    $('div#header h1').css('text-shadow', '0 0 1px #871CA6').find('span').css('text-shadow', '0 0 1px #BA97C4');
  }else if(ua.indexOf('opera') != -1) {
    $('div#header h1').css({background: 'url(' + img_dir + 'logo_top-trans.png) no-repeat top left', textIndent: '-9999px', width: '350px', height: '29px'});    
  }
}else if(ua.indexOf('mac') != -1){
  // 処理Macでの処理    
}

画像を作成する際は、フォントをダウンロードする必要があるが、以下はその方法。

• Google Fonts にアクセス。
• ダウンロードするフォントを選択（Add to Collection をクリック）。
• ページ右上の下向きの矢印（Download）をクリック。
• 「ウェブで使うにはダウンロードする必要はない」というような内容の次のようなメッセージが表示される。
  Download fonts
  You do not need to download the font to use it on your webpages. Instead, refer to the “Use” section.
  Download the font families in your Collection as a .zip file
  Sync Google fonts to your desktop using SkyFonts
  Download all font families, including source files, at the Google Code Project
• 「Download the font families in your Collection as a .zip file」の「.zip file」の部分をクリックするとダウンロードできる。
• Windows の場合はコントロールパネルから「フォント」を選択して、ダウンロードしたフォントをドラッグするとインストールできる。