CSSの「font-family」を変更 (MT)

| | コメント(0)

Win+Firefox で、「0」「○」「ulタグのtype="circle"」や「●」「■」が見分けにくかったり、見にくい文字があったのでフォントを変えました。
Win+IE とかだとほとんど変わらないかも。

Mac+IEでテキストエリアが文字化けすることがあるそうなので、その対策も一緒にしました。

Win+Firefox で見えにくかった対策

以下のクラス名部分を変更しました。

  • .blogbody
  • .comments-body
  • .trackback-body

最初の状態の「.blogbody」の「font-family」部分はこんな感じ。

font-family:palatino, georgia, verdana, arial, sans-serif;

変更前はこんな感じに見えます。

palatino, georgia, verdana, arial, sans-serif
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789

「font-family」を変更しました。

font-family: "Osaka", "MS Pゴシック", "trebuchet MS", "trebuchet", "verdana", "arial", "sans-serif";

変更後はこんな感じに見えます。

"Osaka", "MS Pゴシック", "trebuchet MS", "trebuchet", "verdana", "arial", "sans-serif"
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789

● 各フォントの内訳

palatino
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
georgia
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
verdana
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
arial
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
sans-serif
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
"Osaka"
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
"MS Pゴシック"
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
"trebuchet MS"
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789
"trebuchet"
  • あいうえお
  • ●○×■△
  • abcdefghijklmn
  • 0123456789

・417057 - [IE5]sans-serif を指定した HTML ファイルを表示すると文字化け
http://www.microsoft.com/japan/support/kb/articles/417/0/57.asp
sans-serif を指定した HTML ファイルを表示すると文字化けする話。
IE 5.x, 6.0, 6.0 SP1で起きるとの事なので、一応念頭に。
Windows2000/XPでは起きないそうです。
FontFamily 属性を定義する部分に、sans-serif の前に日本語フォント名を設定することで回避できるそうです。

Mac+IEでテキストエリアが文字化けする対策

Mac+IEでテキストエリアが化けることがあるそうです。
「Osaka」などの和文フォントをfont-familyの先頭で指定すればいいようなので、追加しました。
Macがないから確かめられないけどいいはず・・・。

/* Mac+IEでテキストエリアが文字化けする対策 */
textarea {
  font-family: "Osaka", "MS Pゴシック", "trebuchet MS", "trebuchet", "verdana", "arial", "sans-serif";
}

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、ikeが2004年7月 5日 22:27に書いたブログ記事です。

ひとつ前のブログ記事は「蛍光クラゲの遺伝子を使って」です。

次のブログ記事は「ブロガーに蔓延する「燃え尽き症候群」」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

最近のコメント

Powered by Movable Type 4.261