prototype.js でクロスドメインの Ajax の読み込みテスト と同じで、http ヘッダーに、「Access-Control-Allow-Origin: *」を指定すると利用可能になります。 Google ドライブを使うのが簡単です IE8 の場合は、指定しなくても動くような気もするのですが(一応テストしていますが、動作したので)、Firefox では、http ヘッダーを読んで、このヘッダーが無いと読み込みをキャンセルしています。( Firebug の 接続で読み込み時間を見ているとそんな感じ ) Ajax では、PHP で出力すれば良かったですが、フォントは .htaccess に指定します。
header add Access-Control-Allow-Origin *
※ ヘッダ名には最後にコロンを含めることもできますが、無くても構いません。 ※ set, append, add, unset では大文字小文字は 区別されません。 ※ add, append, set では value を三つ目の 引数として指定します。 ※ value に空白がある場合は二重引用符で 囲む必要があります。 ( 空白がなければ、二重引用符は必要無い ) Firebug で確認しましたが、戻ってきたヘッダーは以下のようになっています。
Server: ZWS Date: Wed, 27 Apr 2011 23:32:49 GMT Content-Type: text/plain Content-Length: 392828 Accept-Ranges: bytes Access-Control-Allow-Origin: * Last-Modified: Wed, 27 Apr 2011 07:46:17 GMT
実際の記述方法は以下を参照して下さい。 WEB フォントの記述方法の考察りいポップ角
webフォントとしてもご利用可能です(2012.9.3より)。 ※webフォントとしてご利用になる場合、ファイル形式の変換はご自由にしてくださってOKです。
▼ ブログ記事用( りいポップ角で使用しています )
<script> if ( !window[window.location.hostname+'.FancyBalloons'] ) { window[window.location.hostname+'.FancyBalloons'] = true; (function() { var str=""; str+="<style> \n"; str+="@font-face { \n"; str+=" font-family: 'fb'; \n"; str+=" src: url('https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/font/riipopkkr.woff') format('woff'); \n"; str+="} \n"; str+="</style> \n"; document.write(str); })(); } </script> <style> #web_font_content { font-family: 'fb'; font-size:60px; } </style> <span id="web_font_content">りいポップ</span>
※ この記述は、表示されているページで必要な CSS の記述を一度だけにする方法です また、IE 用の .eot のフォントファイルを作成するのは、以下のサイトより。 ttf2eot ですが、WOFF を使うのが現実的だと思います。変換は以下のサイトで( ファイルサイズは、0.4M までです ) ttf to woff converter▼ woff2 用 ttf to woff2 converter ※ IPA フォントは WEBフォントとして使用できます。但しライセンス表記に注意です OTF を TTF に変換したい場合は、以下のサイトが利用できます。 Online font converter ですが、fontforge-cygwin を使うほうが確実です。 使い方としては、こちらが参考になります( と言うか参考にして実運用しています )
※ 最近単一化がグレイアウトされているフォントに時々出会いますが、そのまま ttf へ出力可能っぽいです。 関連する記事 2014年7月7日現在。WEBフォントの実際
|
【記録の最新記事】
- Java、PHP、jQuery : 最近の記事と関連する記事のまとめ / インデックス
- Google MAP API が 1日に 25,000 ビューを超えると表示される画面
- ブログ更新通知先に関する情報
- さくらインターネットの CRON の設定で、標準エラー出力を postmaster に送らない
- VBScript 用 onClick 一行書き
- 『家に帰ると妻が必ず死んだふりをしています』というブログを発見しました
- Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできないのは、Windows7 のエアロ系で起きるようです。
- Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできない問題が、開発版(34.0.1794.5 canary) で修正されたそうです
- Google Chrome 32.0.1700.76 の具体的な問題点
- ファイル名リストをクリップボードへコピー
- キーボード説明用画像( フリーフォントでキーボード画像作成 )
- 何だこれ。Microsoft の 看板的ワードの誤字『EIblog をご覧ください。』って・・・
- 9月27日10時頃、Google Chrome でのみ AdSense の表示がおかしくなりましたが・・・
- 注意 : フィッシング詐欺メールのタイトル『【ドラゴンクエストX 目覚めし五つの種族 オンライン】認証』
- まぎらわしい『AdSenseの終了』を知らせる『日本語ページ』
- Trigger Rally(WebGL+Three.js) のコースを無視してひたすら悪路を走りまくる
- Windows 8.1 に期待は無いけれど、3D プリンタへの期待は膨らむのです
- Adobe Readerの脆弱性を突かれて人生初の『ウィルス』に感染・・・
- また4月なんで、フリーのレンタルサーバーの確認してみると・・・
- Flash Player のインストーラをダウンロードする方法