872 Style
  1. TOP
  2. MEMO
  3. CSS
  4. FONTをいじる

FONTをいじる

文字の色を変える

color : #??????
色番号の他に、定義されている色の名前を使うこともできます。

color : Red
color : Blue
color : Silver
color : Teal
color : Green
color : Purple

文字を太くする

font-weight:bold;
font-weight:normal;

斜体をかける

font-style:italic;
font-style:normal;

文字の大きさを変える

font-size : 値;

%,px,em,exなどの単位と、xx-small,x-small,small,medium,large,x-large,xx-large
本来は、px等は文字の大きさをブラウザで変更できなくなるので、使うのは避けた方がよいでしょう。
ただし、レイアウトをどうしても崩したくない場合はpxを使うと良いでしょう。

10px 12px 14px 16px 18px 24px 30px 40px
xx-small x-small small medium large x-large xx-large

何も指定していない場合は、だいだい16pxくらいの大きさになると思うので、ちょっとでかすぎるかな~と思ったら、スタイルシートに

body {font-size : 90%;}

と書いてあげれば、ちょっと小さくなり文字も可変できます。
ちなみに、このサイトは14pxで表示しています。
ちょっと小さいかなってところは、12pxです。

フォントを変える

font-family:"フォントの名前";

フォントはどんなものでもOKですが、使っている環境によって表示できない物もあります。
自分では表示できていても、他の人はそのフォントをインストールしていなければただのゴシックで表示されてしまいます。
また、そういう書体は、Webで表示するために作られていない場合もあるので、汚く見える場合があります。どうしても、そういう書体を使いたい場合は、GIF等の画像にしてしまった方がきれいです。

環境に依存せずに使用できる書体は、

MS Pゴシック,Osaka,sans-serif [ゴシック系]
MS P明朝,平成明朝,serif [明朝系]
MS ゴシック,Osaka―等幅,monospace [ゴシック等幅系]
Arial
Arial Black
Impact
Times New Roman
Verdana
Courier New
Comic Sans MS

最近では、OSのバージョンアップに伴って他の書体も増えてきています。

「MS UI Gothic」はひらがなとカタカナの文字幅を漢字の4/5ほどに狭くし、少ないピクセル数でも判別しやすいように書体が一部変更されていて、Windows 98以降に搭載されました。

例えば、Windows Vista では、「MS UI Gothic」に代わるシステムフォントで「メイリオ」という書体があり、直線部分と曲線部分がはっきりしていて、若干膨らんだ印象の字形で横組みでの可読性を重視していて、欧文部はプロポーショナルフォント、和文部は等幅フォントになっているため、全体としてはプロポーショナルフォントになっています。

Macintosh では OS 9 当時の標準書体は「Osaka」でしたが、OS X 以降は、「ヒラギノ角ゴ Pro W3」があります。モダン・ゴシックの流れを汲みつつ、オーソドックスさを取り込んだ書体となっている。この書体のデザインには、手作業で下書きをし、アウトラインの生成から仕上げはMacintoshで行うという手法がとられたそうです。

上の文章はそれぞれその書体でかかれていますが、違いがわかるでしょうか?
もちろん、書体が入ってなければその書体で見ることはできません。

日本語書体の説明の次は欧文ですが個人的には、こっちの方が違いがはっきりとわかるので好きです。上で紹介したいくつかの書体ですが、ちょっとだけしか出てないのでもったいないからもう少し長めにしてみました。

Arial
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Arial Black
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Impact
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Times New Roman
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Verdana
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Courier New
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Comic Sans MS
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

その他に

Helvetica
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

Tahoma
A quick Brown Fox Jumps Over The Lazy Dog. 0123456789

個人的にTahomaが気に入っているので、このサイトのフォント設定はTahomaを使用しています。