[css] 今日覚えたWebフォントの使い方 [ @font-face ]

Pocket

Tweet

とあるサイトで見たフォントが可愛かったので、どのフォントだろうと思って何となく聞いてみたら”M+ OUTLINE FONTS | WEB FONTS“ということを教えてもらい、「あぁ、昔、自分のマシンでも使ってたなー」なんて思い出しながら、Webfont として自由に利用できることも分かったので、実際に試してみましたヽ(´ー｀)ノ

1.とりあえず使い方

1
2
3
4
5
6

@font-face
{
font-family: mplus-1p-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')
     format("truetype");
}

font-family

以降のcssで利用するためのフォント名を指定しておくのです

src

フォントの位置を指定しますが、url(”) 内には ‘http://〜’ ではじまるほかさいとでも ‘/fonts/〜’ や ‘../fonts/〜’ などのローカルWebサイトの、絶対・相対指定もできます。 format(“・・・”) にて、フォントのフォーマットも指定しています。詳しくは “Webフォントを指定するには？ – @font-faceの解説 – CSS3リファレンス“

その後は、”font-family” で指定したフォント名を指定することで、そのフォントが使えちゃうヽ(´ー｀)ノこれで、特に環境にあまり左右されずに、毎度、指定したフォントが利用できて嬉しい。
ただ、フォントを読み込むのに時間かかる上、chrome や safariだと、読み込み中は文字が表示されないという残念なことにもなるので、多少の諦めは必要かも知れず。

2.ちょっと便利な使い方

フォント一つで、italic も bold も対応してくれてるとありがたいわけだけれども、そうもいかないこともあって。そういう場合には、別々のフォントを、同じ “font-family” へ定義することができたりするようです。

特に、この M+フォントは文字の太さでフォントファイルも変わっているので、それ相応に変更することが望ましいと思われます。なので、”font-weight:normal” の時は regular フォントを、”font-weight:bold” の時は bold フォントを指定するようにして上げるコトで、正しく表現できます。

どうするかというと、”@font-face” で読み出しするときに、”font-weight” にて、属性を個別に与えるようにします。
具体的には、こう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@font-face
{
font-family: mplus;
font-weight: normal;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')
     format("truetype");
}
@font-face
{
font-family: mplus;
font-weight: bold;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-bold.ttf')
     format("truetype");
}

この場合、”font-family:mplus” として指定したときに、”font-weight:normal” とすると、”mplus-1p-regular.ttf” で表示し、”font-weight:bold” とすると、”mplus-1p-bold.ttf” で表示することができます。

おしゃんてぃ。

[tmkm-amazon]4839946965[/tmkm-amazon]
[tmkm-amazon]4844363654[/tmkm-amazon]