ウェブフォント

流行？webフォント cufon-yui.js

Posted by 管理者

cufon-yui.js が出てきたらwebフォントです。

http://www.netch.jp/articles/2009/06/25/cufon/
ここの詳しく書いてます。

追記
こちらも詳しいです。
http://pointcard.me/japanese-free-web-fonts/
ttf → eotへの変換サービス
http://ttf2eot.sebastiankippe.com/

抜粋
例えば、CSSと同じディレクトリにあるweb-font.ttfを読み込ませたい時はCSSに以下のように記述します（太字の部分にフォントファイルのURL）。「任意のフォント名」の部分は共通になるようにしてください。
ちなみに、Webフォントは読み込みに時間が掛かるのでCSSの上の方に記述することをおすすめします。

[css]
/* Firefox, Opera, Safari */
@font-face {
font-family:任意のフォント名;
src:url("web-font.ttf") format("truetype")
}
/*IE*/
@font-face {
font-family: 任意のフォント名;
src: url("web-font.ttf.eot");
}
[/css]
これで読み込みは完了です。次に例としてH1タグにフォントを適用します。
[css]
h1 {
font-family: ‘任意のフォント名’;
}
[/css]

さて、ご覧のとおりIEに関してはformat～がなく.eotを指定するのですが、IEにはよくあるTTF形式・OTF形式ではなく、独自のEOT形式のフォントを読みこませる必要があります。
そこでEOTファイルに変換する必要がありますが、元のフォントのファイル形式によって手順が異なります。OTFのほうがワンステップ多いところです。

◇使用するフォントがTTF形式の場合
ttf2eotでEOT形式に変換する。

◇使用するフォントがOTF形式の場合
Free online converterで一旦TTF形式に変換してから、ttf2eotでEOT形式に変換する。
最後に、素晴らしいフォントの各作者皆様に感謝申し上げます。

—————

他参考：
アイコンを作るといいぞ
http://design.kayac.com/topics/2012/02/webFontIcons.php

いつ読み込まれたか参照したい。
WEBフォントが読み込まれることで、横幅などが変わってくるため
http://w3q.jp/t/95

WEBフォント使用サイト紹介
http://pr.fontplus.jp/

———————
追加
参照元（http://css3.sophia-it.com/reference/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%EF%BC%9F）

@font-faceの解説

Webフォントを指定するには?

＠ルール書式

@font-face {

　　font-family:【フォント集合名】;

　　src:【フォントへの参照】 [ ,【フォントへの参照】… ];

　　[ 【オプションのフォント記述子】:【オプションのフォント記述子の値】;… ]
}

対応ブラウザ

IE 9：○
Firefox 10.0：○
Opera 11.61：○
Chrome 17.0：○
Safari 5.1：○

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
フォント記述子一覧

font-familyとsrcの指定は、省略しても文法的なエラーにはなりませんが、フォントを実際に要素に適用するためには必須です。

「font-」で始まるフォント記述子は、同じ名前のプロパティとの照合に使用されます。そのため、指定できる値の種類も、同じ名前のプロパティと共通になります。

ただし、bolder（より太字に）のような、相対的な指定方法は、フォント記述子には使用できません。

名前 内容
font-family フォントの属するフォント集合（フォント・ファミリー）名を指定します。
src フォントのデータが格納されているファイルを指定します。
詳細は本文解説を参照ください。
font-style フォントが通常体か、イタリック体か、斜体かを記述します。
キーワードnormalが指定された場合は通常体です。
キーワードitalicが指定された場合はイタリック体です。
キーワードobliqueが指定された場合は斜体です。
font-weight フォントの太さを記述します。
キーワードnormal、boldと100から900までの100刻みの数値が指定できます。
normalは400に相当し、boldは700に相当します。
font-stretch フォントの幅の拡大縮小を記述します。
キーワードとして、
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expandedが使用できます。
normalを通常の幅として、上にあげたものほど縮小され、下にあげたものほど拡大されます。
IEとFirefoxのみ実装。
font-variant フォントが異体字であるかを記述します。
キーワードとして、normal、small-capsが指定できます。
normalが指定された場合は通常の字体です。
small-capsが指定された場合、フォントはスモールキャップ（小文字として小さな大文字を使う異体）です。
Operaは未実装です。
font-feature-settings OpenTypeフォーマットでのタグによる字体指定を記述します。
IEとChrome、Safariが実装していて、ベンダープレフィックスが必要です。
unicode-range フォントが対応している文字の範囲を、ユニコードのコード位置を使って記述します。
必要とする文字範囲に対応していないフォントはダウンロードされません。
書式は「U+」に文字の16進表記のコード位置をハイフンでつなげたものです。（例；「U+0-7F」）
ワイルドカードとして「?」が使えます。（例：「U+3??」）
カンマ区切りで複数の範囲を指定できます。（例：「U+0-7F, U+590-5ff」）
単一の文字だけからなる範囲を指定する場合はハイフン以下は不要です。（例；「U+45」）
Operaは未実装です。
解説文

Webフォントの仕組みを利用すると、ウェブ上に公開されたフォントを、Webページの表示用のフォントとして指定することができます。

もっともシンプルなケースでの指定は、以下のようになります。この例では、フォントのファイルである、font1.woffはHTMLファイルと同じディレクトリに公開されています。
[html]
@font-face {
font-family: myfont; /* フォントにフォント集合名を付ける */
src: url(font1.woff); /* フォントのURLを指定する */
}
[/html]

div#out{
font-family:myfont; /* フォント集合名を使って要素に適用する */
}
Webフォントの利用は、サーバー上のフォントの用意、@font-faceルールでのフォントの登録、要素のスタイル指定でのフォントの適用、という３つの手順からなっています。

サーバー上のフォントの用意

Webフォントで、サーバー上のフォントとして利用可能なのは、URLを通じてアクセス可能な形で公開されている、Webフォントに対応した以下のフォーマットのフォントです。

フォーマット 拡張子 内容
WOFF (Web Open Font Format) .woff Webページ埋め込み用フォーマット。軽量でライセンス情報を埋め込むことができます。
TrueType .ttf サイズの拡大縮小に対応可能な、PC環境で一般的なフォーマット。IE8以前のIEは未対応。
OpenType .ttf .otf TrueTypeをPostscriptフォントを含むように拡張したフォーマット。
実体がPostscriptフォントの場合は拡張子が「.otf」になります。IE8以前のIEは未対応。
Embedded OpenType .eot Microsoft開発のWebページ埋め込み用フォーマット。IEのみ対応。
SVGフォント .svg .svgz 字形をSVG(Scalable Vector Graphics)で記述したフォーマット。IEとFirefoxは未対応。
Webフォントでは、サーバー上のフォントは、既定では、同じドメインで公開されているHTMLファイルにしか適用できません。

この制限を越えてフォントを利用できるようにするためには、フォントを公開しているサーバーの側で、「Access-Control-Allow-Origin」HTTPヘッダーをフォントへのリクエストに対するレスポンスに付加する必要があります。

自分でフォントを公開しなくても、こうした第三者が公開したフォントを利用することもできます。すでにフォントの検索提供サービスが複数存在しており、公開されたフォントを有償または無償で利用できるようになっています。

サーバー上のフォントの使用に関しては、フォントのライセンスを確認し、使用条件に違反しないように注意する必要があります。

@font-faceルールでのフォントの登録と要素への適用

用意したサーバー上のフォントを適用するためには、まず、@font-faceルールで、読み込んだフォントを表す、仮想的なフォントの登録を行う必要があります。

（@font-faceルールは、CSSで個別の見た目の指定に属さない設定を行うための構文である、＠ルールの一つです）

ここで登録するフォントは、読み込んだフォントを本体とする仮想的なフォントで、通常のフォントと同じように、fontプロパティなどを使用して、対象の要素に適用することができます。

@font-faceルールで、フォントの属性を記述するのに使用される、srcやfont-familyなどの要素を、フォント記述子と言います。名称が同じ場合でも、これらはプロパティとは異なります。
[html]
@font-face {
/* この仮想的なフォントのフォント集合名を定義 */
font-family: myfont;
/* この仮想的なフォントの本体となるフォントへの参照URL */
src: url(http://example.com/serverfont.woff);
}
[/html]
フォント記述子「font-family」では、この仮想的なフォントが属するフォント集合（フォント・ファミリー）の名前を宣言します。このフォントを参照する際にこの名前が使われます。

フォント記述子「src」には、この仮想的なフォントの本体となるフォントを指定します。ローカル環境にインストールされたフォントと、サーバー上のフォントを指定することができ、それぞれで書式が異なります。

ローカル環境にインストールされたフォントへの参照の場合は「local(フォント名)」という書式で、フォント名を指定します。

サーバー上のフォントへの参照の場合は「url(フォントのURL)」という書式で、フォントが置かれているURLを指定します。

フォントのフォーマットがSVGフォントだった場合は、フォントのIDをハッシュ形式（#id）で指定します。（例：IDがfontidだった場合、「url(http://example.com/font.svg#fontid)」）

サーバー上のフォントへの参照に限り、「url(フォントのURL) format(フォントのフォーマット)」という書式で、フォントのファイルフォーマットを指定することもできます。この指定は、フォントを正しく読み込むための補助情報としてブラウザに利用されます。

フォーマットを指定する文字列は以下の通りです。

フォーマット フォーマット指定
WOFF (Web Open Font Format) “woff”
TrueType “truetype”
OpenType “opentype”
Embedded OpenType “embedded-opentype”
SVGフォント “svg”
「src」でのフォントの指定は、カンマ区切りで、優先度順に複数の候補を記述することができます。

複数の候補を指定することで、すでにローカル環境にフォントがインストールされている場合にはダウンロードを抑制したり、あるいは、サーバーがアクセス不能な時にはローカル環境の代替フォントを使用する、といったことが可能になります。

なお、IE8以前のIEはカンマ区切りでの複数の候補の指定と「format()」に対応していません。

以下の例では読み込むフォントとして候補を３つ指定しています。
[html]
@font-face {
font-family: myfont;
src: local(Font1), url(font1.woff), url(http://example.com/font1.woff);
}
[/html]
フォントの適用については、通常のフォントも@font-faceルールで登録したフォントも全く同じです。以下では、font-familyプロパティを利用して指定しています。
[html]
@font-face {
font-family: myfont;
src: url(font1.woff);
}
[/html]
/* font-familyが一致するので、上で登録したフォントが適用され、 */
/* font1.woffがダウンロードされて表示に使用される。 */
[html]
div#out{
font-family:myfont;
}
[/html]
クロスブラウザ対応のための、「src」フォント記述子の記述方式

Webフォントでは、IE6～IE8が、対応しているフォーマットや実装に独自性が強いこともあり、最新版ではない複数の種類のブラウザに対応するためには、記述に工夫が必要です。

ここではFontspringによって考案された方式を紹介します。
[html]
@font-face {
font-family: ‘MyFont’;
src: url(‘myfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6～IE8 向け */
url(‘myfont.woff’) format(‘woff’), /* 主要最新ブラウザ向け */
url(‘myfont.ttf’) format(‘truetype’), /* IE以外の旧ブラウザ向け */
url(‘myfont.svg#svgId’) format(‘svg’); /* モバイル等その他のブラウザ向け */
}
[/html]
IE6～IE8は、複数のフォント候補の指定に対応しておらず、format()の指定にも対応していません。そこで、最初にIE6～IE8向けのEmbedded OpenTypeフォーマットの指定を行い、URLの最後に「?」を付けます。これによって、IEは「?」以降の、他のブラウザのための候補の指定を、クエリー文字列としてみなして無視します。

それ以降の候補は、通常の優先度順の記述です。まず、最新ブラウザ向けに、WOFFフォーマット、それ以前のバージョンの主要ブラウザ向けに、TrueTypeフォーマット、それ以外のモバイルブラウザ等のためにSVGフォント・フォーマットを指定します。

各ブラウザ向けのファイル・フォーマットを用意したうえで、このように記述することで、ほとんどのブラウザに対応することができます。

@font-faceルールでのフォントの登録の応用

@font-faceルールで行うフォントの登録では、「フォント集合名」と「フォントの本体への参照」以外にも、追加の属性を記述することができます。

以下の例では、同じフォント集合「myfont」に、文字の太さの異なる二つの仮想的なフォントを定義しています。
[html]
@font-face {
font-family: myfont;
src: url(http://example.com/myfont-normal.woff);
font-weight:normal;
}

@font-face {
font-family: myfont;
src: url(http://example.com/myfont-bold.woff);
font-weight:bold;
}
[/html]
ここで注意する必要があるのは、@font-faceルールでフォントの属性を記述する、font-familyやfont-weightといったフォント記述子は、フォントを、「どのように表示するか」を指定するものではない、ということです。

そうではなく、フォント記述子の指定は、このフォントが、どのような特徴を持っているのか、ということを記述するものです。

たとえば、フォント記述子で、「font-weight:bold;」という記述をした場合、これは、「このフォントを太字にして表示せよ」という指定ではありません。そうではなくて、「このフォントを太字のフォントとして登録する」という指定になります。そのため、要素のスタイル指定で、「font-weight:bold;」が指定された場合は、このフォントが適用されます。

一般に、要素にフォント関連のスタイル指定を行ったとき、どのフォントが選択されるかは、指定したプロパティに、フォントの属性が一致しているかどうかが基準になります。

以下の例では、要素のスタイル指定によって「フォント集合がmyfont」で、かつ、「太字」のフォントをこの要素に適用するように指定されています。

ブラウザは、ローカル環境にインストールされているフォントの一覧に、@font-faceルールで登録された仮想的なフォントを含めたうえで、このような特徴を持ったフォントを検索します。

その結果、@font-faceルールで登録された、「myfont-bold.woff」を実体とする仮想的なフォントが条件に合うため、この要素の表示のために選び出されます。

（ただし、これは「もっとも近い」フォントを選び出す既定のアルゴリズムにもとづいて行われるため、プロパティが完全に一致しない場合でも、そのフォントが選択されることもあります）

こうしたケースでは、「myfont-bold.woff」は、太字のフォント・データが収められたファイルであることが普通です。
[html]
div#out1{
/* myfont-bold.woffが適用される */
font-family:myfont;
font-weight:bold;
}
[/html]
フォント記述子には、すでに述べた「src」のほかには、以下の記述子が指定可能です。

フォント記述子に指定できる値は、相対指定（bolder「より太く」や、wider「より幅広に」など）が使用できないほかは、同名のプロパティと同じです。

ここで指定されたフォントの属性は、ブラウザがフォントを実際にダウンロードするかどうかの判断にも使用されます。@font-faceルールで登録されていても、実際にはどの要素のスタイル指定にも一致しない（つまり、ページの表示に実際には使用されない）フォントのファイルはダウンロードされません。

したがって、このような指定は、フォントを属性ごとに分割したファイルとして提供し、必要なものだけダウンロードさせる、という目的に使用できます。

名前 内容
font-family フォントの属するフォント集合（フォント・ファミリー）名を指定します。
font-style フォントが通常体か、イタリック体か、斜体かを記述します。
font-weight フォントの太さを記述します。
font-stretch フォントの幅の拡大縮小を記述します。
unicode-range フォントの対応している文字の範囲を、ユニコードのコード位置を使って記述します。
font-variant フォントが異体字であるかを記述します。現在のところ、スモールキャップ（小文字として小さな大文字を使う異体）のみが指定できます。
font-feature-settings OpenTypeフォーマットでのタグによる字体指定を記述します。
サンプルソース

サンプルを試すときは、フォントのURL（「/fonts/font1.woff」「/fonts/font2.woff」「/fonts/font3.woff」）の部分を、実際に表示させるサーバー上のフォントのURLに置き換え、「format(‘woff’)」の部分を、実際のファイルフォーマットに合わせてください。

IE9は、TrueTypeとOpenType形式のフォントが持っている、埋め込み許可設定をチェックするため、Webフォント向けに作成されたわけではないフォントは、適用できないことがあります。
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[/html]

/* フォント集合 myfont の通常のフォントとして登録します */
[html]
@font-face{
font-family:myfont;
src: url(/fonts/font1.woff) format(‘woff’);
}
[/html]

/* フォント集合 myfont の太字フォントとして登録します */
[html]
@font-face{
font-family:myfont;
font-weight:bold;
src: url(/fonts/font2.woff) format(‘woff’);
}
[/html]

/* フォント集合 myfont のイタリック体フォントとして登録します */
[html]
@font-face{
font-family:myfont;
font-style:italic;
src: url(/fonts/font3.woff) format(‘woff’);
}

p {
width:400px;
}

p#p1{
font-family: myfont;
}

p#p2{
font-family:myfont;
font-weight:bold;
}

p#p3{
font-family:myfont;
font-style:italic;
}
</style>
</head>
<body>
<p id="p1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse vitae condimentum sem.
Proin consectetur volutpat neque, facilisis vestibulum nisl eleifend in.
</p>
<p id="p2">Nunc id mauris tortor.
Vivamus aliquet dignissim consectetur.
In sit amet purus massa, eu interdum nisl.
Phasellus eu ante nisi.
Curabitur congue sagittis nibh, vitae scelerisque nibh ultricies ut.
</p>
<p id="p3">Vestibulum fermentum, sem eu mollis vehicula,
odio neque lacinia metus, vitae rhoncus purus mi eget nunc.
Nam dignissim porta velit eu vehicula.
Suspendisse metus ligula, pharetra sed venenatis ut, ultricies sit amet erat.
Duis elit ante, laoreet vitae imperdiet condimentum, tristique ut dui.
Nulla dignissim, justo non dapibus interdum, tellus nisl sagittis magna,
id fringilla leo magna at velit. Duis feugiat libero odio, id vehicula mi.
Sed urna lacus, ultrices sit amet euismod eget, laoreet semper justo.
</p>

</body>
</html>
[/html]