HTML5+CSS3でサイトを作ってみる。

■ 普通のフォントをWebフォントに変換する方法2つ

Webフォントに関しては、どこに載せるべきか迷いましたが、取り急ぎこちらにしておきます。
そして、初歩的な説明は省きます。

Webサービスでさくっと変換

英字など、比較的軽いフォントであればFont SquirrelのWebfont Generatorのサービスが早くて便利。

だかしかし、問題は我々の母国語である、日本語なのです。

日本語のフォントは重くてWebfont Generatorに上がりきらない！！

Webfont Generatorは、データサイズは現状、最大2mbまでだそうです。英字であれば行けるのだろうけど、日本語となると容量オーバーになるものが多いのです。

そこで登場するのが、武蔵システムさんのWOFFコンバータ！

PCにインストールする手間が発生するけれど、ttf,otf,tte,oteをwoff,eotに変換したり、逆にwoffをttf,otfに変換できます。 しかもタダ。

svgへの変換はできないようなので、もしsvgが必要な場合は、他にも変換できるソフトを探す必要があるかも。。 でも、これらの方法で、なんとかWebフォントへの変換はどうにかなりそうですね！

■ ライセンスに関して

Webフォントに変換したはいいが、仕事で使うとしたらライセンスってどうなってる？？
配布されているwebフォントで少し難しいのが、ライセンスがどうなっているかわからない、配布されているドキュメントはあるけれど、 文章が長くてうんざりする！ライセンス明記するにも、どこにどうやって書くの！という所だと思います。そこで調べたのが、

ライセンスに関して説明しているサイト

Web フォントとライセンス
WebフォントのCSSとライセンス記載まとめ

上記二つのサイトです。ライセンスの記述サンプルも掲載されています。ライセンスはスタイルシートに記述すればいいんですね〜。参考にさせていただきます。

■ Webフォントをweight値で切り分ける方法

さて、では実際にWebフォントを使って行きましょう・・・という時に、ふと気づくのが、配布されているWebフォントはweightのファイルがバラバラ・・・ということ。

ひとつひとつコンバートしたはいいけれど、これってcss上でいちいちfont-familyを指定してweightを切り分けなきゃいけないの？
たとえば、こんな感じ？

--[ html ]-----------------------

<p class="fontMedium">
  class="fontMedium"で
  普通のウェイトになるように指定
</p>
<p class="fontBold">
  class="fontBold"で
  太字のウェイトになるように指定
</p>

--[ CSS ]------------------------

@font-face {
  font-family: "myFontMedium";
  src: url("../../asset/font/yasaG.eot?") format('eot'),
       url("../../asset/font/yasaG.woff") format('woff'),
       url("../../asset/font/yasaG.ttf")  format('truetype');
}
@font-face {
  font-family: "myFontBold";
  src: url("../../asset/font/yasaG-bold.eot?") format('eot'),
       url("../../asset/font/yasaG-bold.woff") format('woff'),
       url("../../asset/font/yasaG-bold.ttf")  format('truetype');
}
.fontMedium{font-family: "myFontMedium";}
.fontBold{font-family: "myFontBold";}

でもこれだと、ちょっとめんどくさいですよね。。

やっぱりfont-weightで切り分けたい！ってことでちくちくやったのが以下なんですが、 このようにすれば、weightを指定で各スタイルを切り分けるのができるっぽい。 この辺は、なんかこうやったらなんとなくできたよ、っていうレベルなので、 絶対こう、というのが現状言えないんだけど。。

--[ html ]-----------------------

<p class="fontNormal">
  <!-- font-weightはインラインスタイルでなくても可。 -->
  <span style="font-weight:100;">
  weight="100"を普通のウェイトとして指定
  </span>
  <span style="font-weight:200;">
  weight="200"を太字のウェイトとして指定
  </span>
</p>

--[ CSS ]------------------------
@font-face {
  font-family: "myFontNormal";
  src: url("../../asset/font/yasaG.eot?") format('eot'),
       url("../../asset/font/yasaG.woff") format('woff'),
       url("../../asset/font/yasaG.ttf")  format('truetype');
  font-weight:100;
}

@font-face {
  font-family: "myFontNormal";
  src: url("../../asset/font/yasaG-bold.eot?") format('eot'),
       url("../../asset/font/yasaG-bold.woff") format('woff'),
       url("../../asset/font/yasaG-bold.ttf")  format('truetype');
  font-weight:200;
}

.fontNormal{font-family: "myFontNormal";}
.fontNormal span{font-family:inherit;}

要は、@font-faceの中でもうweightを指定するっていうことですね。 この@font-face内のfont-weight値をいろいろいじってみると、わかりやすいと思います。
この辺はよくわからんので、間違ったこと言っていたらどなたか教えてくださいませ。