※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。7上で動作確認を行っています。※ユーザーの設定より、異なる挙動をする場合があります。フォント記述子一覧font-familyとsrcの指定は、省略しても文法的なエラーにはなりませんが、フォントを実際に要素に適用するためには必須です。「font-」で始まるフォント記述子は、同じ名前のプロパティとの照合に使用されます。そのため、指定できる値の種類も、同じ名前のプロパティと共通になります。bolder(より太字に)のような、相対的な指定方法は、フォント記述子には使用できません。フォントの属するフォント集合(フォント・ファミリー)名を指定します。フォントのデータが格納されているファイルを指定します。詳細は本文解説を参照ください。フォントが通常体か、イタリック体か、斜体かを記述します。キーワードnormalが指定された場合は通常体です。キーワードitalicが指定された場合はイタリック体です。キーワードobliqueが指定された場合は斜体です。フォントの太さを記述します。キーワードnormal、boldと100から900までの100刻みの数値が指定できます。normalは400に相当し、boldは700に相当します。フォントの幅の拡大縮小を記述します。キーワードとして、ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expandedが使用できます。normalを通常の幅として、上にあげたものほど縮小され、下にあげたものほど拡大されます。IEとFirefoxのみ実装。フォントが異体字であるかを記述します。キーワードとして、normal、small-capsが指定できます。normalが指定された場合は通常の字体です。small-capsが指定された場合、フォントはスモールキャップ(小文字として小さな大文字を使う異体)です。Operaは未実装です。OpenTypeフォーマットでのタグによる字体指定を記述します。IEとChrome、Safariが実装していて、ベンダープレフィックスが必要です。フォントが対応している文字の範囲を、ユニコードのコード位置を使って記述します。必要とする文字範囲に対応していないフォントはダウンロードされません。書式は「U+」に文字の16進表記のコード位置をハイフンでつなげたものです。(例;「U+0-7F」)ワイルドカードとして「?」が使えます。(例:「U+3??」)カンマ区切りで複数の範囲を指定できます。U+590-5ff」)単一の文字だけからなる範囲を指定する場合はハイフン以下は不要です。(例;「U+45」)Operaは未実装です。解説文Webフォントの仕組みを利用すると、ウェブ上に公開されたフォントを、Webページの表示用のフォントとして指定することができます。シンプルなケースでの指定は、以下のようになります。この例では、フォントのファイルである、font1.woffはHTMLファイルと同じディレクトリに公開されています。*/}Webフォントの利用は、サーバー上のフォントの用意、@font-faceルールでのフォントの登録、要素のスタイル指定でのフォントの適用、という3つの手順からなっています。サーバー上のフォントの用意Webフォントで、サーバー上のフォントとして利用可能なのは、URLを通じてアクセス可能な形で公開されている、Webフォントに対応した以下のフォーマットのフォントです。Webページ埋め込み用フォーマット。軽量でライセンス情報を埋め込むことができます。サイズの拡大縮小に対応可能な、PC環境で一般的なフォーマット。IE8以前のIEは未対応。TrueTypeをPostscriptフォントを含むように拡張したフォーマット。実体がPostscriptフォントの場合は拡張子が「.otf」になります。IE8以前のIEは未対応。Microsoft開発のWebページ埋め込み用フォーマット。Graphics)で記述したフォーマット。IEとFirefoxは未対応。Webフォントでは、サーバー上のフォントは、既定では、同じドメインで公開されているHTMLファイルにしか適用できません。この制限を越えてフォントを利用できるようにするためには、フォントを公開しているサーバーの側で、「Access-Control-Allow-Origin」HTTPヘッダーをフォントへのリクエストに対するレスポンスに付加する必要があります。自分でフォントを公開しなくても、こうした第三者が公開したフォントを利用することもできます。フォントの検索提供サービスが複数存在しており、公開されたフォントを有償または無償で利用できるようになっています。サーバー上のフォントの使用に関しては、フォントのライセンスを確認し、使用条件に違反しないように注意する必要があります。用意したサーバー上のフォントを適用するためには、まず、@font-faceルールで、読み込んだフォントを表す、仮想的なフォントの登録を行う必要があります。(@font-faceルールは、CSSで個別の見た目の指定に属さない設定を行うための構文である、@ルールの一つです)ここで登録するフォントは、読み込んだフォントを本体とする仮想的なフォントで、通常のフォントと同じように、fontプロパティなどを使用して、対象の要素に適用することができます。@font-faceルールで、フォントの属性を記述するのに使用される、srcやfont-familyなどの要素を、フォント記述子と言います。名称が同じ場合でも、これらはプロパティとは異なります。}フォント記述子「font-family」では、この仮想的なフォントが属するフォント集合(フォント・ファミリー)の名前を宣言します。このフォントを参照する際にこの名前が使われます。フォント記述子「src」には、この仮想的なフォントの本体となるフォントを指定します。ローカル環境にインストールされたフォントと、サーバー上のフォントを指定することができ、それぞれで書式が異なります。ローカル環境にインストールされたフォントへの参照の場合は「local(フォント名)」という書式で、フォント名を指定します。サーバー上のフォントへの参照の場合は「url(フォントのURL)」という書式で、フォントが置かれているURLを指定します。フォントのフォーマットがSVGフォントだった場合は、フォントのIDをハッシュ形式(#id)で指定します。format(フォントのフォーマット)」という書式で、フォントのファイルフォーマットを指定することもできます。この指定は、フォントを正しく読み込むための補助情報としてブラウザに利用されます。フォーマットを指定する文字列は以下の通りです。"svg"「src」でのフォントの指定は、カンマ区切りで、優先度順に複数の候補を記述することができます。複数の候補を指定することで、すでにローカル環境にフォントがインストールされている場合にはダウンロードを抑制したり、あるいは、サーバーがアクセス不能な時にはローカル環境の代替フォントを使用する、といったことが可能になります。IE8以前のIEはカンマ区切りでの複数の候補の指定と「format()」に対応していません。以下の例では読み込むフォントとして候補を3つ指定しています。}フォントの適用については、通常のフォントも@font-faceルールで登録したフォントも全く同じです。以下では、font-familyプロパティを利用して指定しています。font1.woffがダウンロードされて表示に使用される。font-family:myfont;}クロスブラウザ対応のための、「src」フォント記述子の記述方式Webフォントでは、IE6~IE8が、対応しているフォーマットや実装に独自性が強いこともあり、最新版ではない複数の種類のブラウザに対応するためには、記述に工夫が必要です。ここではFontspringによって考案された方式を紹介します。*/}IE6~IE8は、複数のフォント候補の指定に対応しておらず、format()の指定にも対応していません。OpenTypeフォーマットの指定を行い、URLの最後に「?」を付けます。これによって、IEは「?」以降の、他のブラウザのための候補の指定を、クエリー文字列としてみなして無視します。それ以降の候補は、通常の優先度順の記述です。最新ブラウザ向けに、WOFFフォーマット、それ以前のバージョンの主要ブラウザ向けに、TrueTypeフォーマット、それ以外のモバイルブラウザ等のためにSVGフォント・フォーマットを指定します。各ブラウザ向けのファイル・フォーマットを用意したうえで、このように記述することで、ほとんどのブラウザに対応することができます。@font-faceルールでのフォントの登録の応用@font-faceルールで行うフォントの登録では、「フォント集合名」と「フォントの本体への参照」以外にも、追加の属性を記述することができます。以下の例では、同じフォント集合「myfont」に、文字の太さの異なる二つの仮想的なフォントを定義しています。font-weight:bold;}ここで注意する必要があるのは、@font-faceルールでフォントの属性を記述する、font-familyやfont-weightといったフォント記述子は、フォントを、「どのように表示するか」を指定するものではない、ということです。なく、フォント記述子の指定は、このフォントが、どのような特徴を持っているのか、ということを記述するものです。フォント記述子で、「font-weight:bold;」という記述をした場合、これは、「このフォントを太字にして表示せよ」という指定ではありません。なくて、「このフォントを太字のフォントとして登録する」という指定になります。そのため、要素のスタイル指定で、「font-weight:bold;」が指定された場合は、このフォントが適用されます。一般に、要素にフォント関連のスタイル指定を行ったとき、どのフォントが選択されるかは、指定したプロパティに、フォントの属性が一致しているかどうかが基準になります。以下の例では、要素のスタイル指定によって「フォント集合がmyfont」で、かつ、「太字」のフォントをこの要素に適用するように指定されています。ブラウザは、ローカル環境にインストールされているフォントの一覧に、@font-faceルールで登録された仮想的なフォントを含めたうえで、このような特徴を持ったフォントを検索します。その結果、@font-faceルールで登録された、「myfont-bold.woff」を実体とする仮想的なフォントが条件に合うため、この要素の表示のために選び出されます。(ただし、これは「もっとも近い」フォントを選び出す既定のアルゴリズムにもとづいて行われるため、プロパティが完全に一致しない場合でも、そのフォントが選択されることもあります)こうしたケースでは、「myfont-bold.woff」は、太字のフォント・データが収められたファイルであることが普通です。font-weight:bold;}フォント記述子には、すでに述べた「src」のほかには、以下の記述子が指定可能です。フォント記述子に指定できる値は、相対指定(bolder「より太く」や、wider「より幅広に」など)が使用できないほかは、同名のプロパティと同じです。ここで指定されたフォントの属性は、ブラウザがフォントを実際にダウンロードするかどうかの判断にも使用されます。@font-faceルールで登録されていても、実際にはどの要素のスタイル指定にも一致しない(つまり、ページの表示に実際には使用されない)フォントのファイルはダウンロードされません。したがって、このような指定は、フォントを属性ごとに分割したファイルとして提供し、必要なものだけダウンロードさせる、という目的に使用できます。フォントの属するフォント集合(フォント・ファミリー)名を指定します。フォントが通常体か、イタリック体か、斜体かを記述します。フォントの太さを記述します。フォントの幅の拡大縮小を記述します。フォントの対応している文字の範囲を、ユニコードのコード位置を使って記述します。フォントが異体字であるかを記述します。現在のところ、スモールキャップ(小文字として小さな大文字を使う異体)のみが指定できます。OpenTypeフォーマットでのタグによる字体指定を記述します。サンプルソースサンプルを試すときは、フォントのURL(「/fonts/font1.woff」「/fonts/font2.woff」「/fonts/font3.woff」)の部分を、実際に表示させるサーバー上のフォントのURLに置き換え、「format('woff')」の部分を、実際のファイルフォーマットに合わせてください。IE9は、TrueTypeとOpenType形式のフォントが持っている、埋め込み許可設定をチェックするため、Webフォント向けに作成されたわけではないフォントは、適用できないことがあります。plusシャープが製造するスマートフォンの端末。RECキヤノンが発売した小型デジタルカメラ。人工知能の研究分野における第一人者。Appleの共同創設者スティーブ・ジョブズ「Mac」や「iPhone」を生み出した経営者。MPEG-4オーディオファイルの拡張子。iPhoneの着メロにするAACファイルにつく拡張子。2007で作成したファイルのデフォルトの拡張子。2007の標準的な保存形式。XML形式となっている。