CSS3: デフォルトのフォントスタイルを指定する

モダンブラウザであればフォントのことは特に気にしなくても、いい感じに出力されますが、レガシーブラウザの対応までを考慮すると、フォントの指定も重要となってきます。
今回は CSS でスタイルを定義する際、ベースとなるフォント指定をメモしておきます。

目次

  • デフォルトのフォントスタイルを指定する
  • まとめ

デフォルトのフォントスタイルを指定する

body 自体にゴシック系のフォントをとりあえず指定し、.mincho と .gochic クラスを任意のテキストに指定すれば、明朝体とゴシック体を使い分けられると思います。

/*transform: rotate(.03deg);*/ のコメントを解除すると、古い PC の IE(9,10)で 文字の ディザを軽減する効果 があります。
ただし、position:fixed 等をしている場合は transform とコンフリクトを起こし、正しく表示されない(fixed が効かない)可能性があるので、注意が必要です。

body {
  font: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  /*transform: rotate(.03deg);*/
}

.mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS 明朝", serif;
  /*transform: rotate(.03deg);*/
}

.gothic {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  /*transform: rotate(.03deg);*/
}

まとめ

今回の指定の仕方が正解というわけではありませんが、日本語環境の場合、フォントの見え方でサイトの良し悪しが大きく左右されてしまうので、意識的にデフォルトフォントの指定をしておいて損はないと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents