久しぶりに WEB フォントがどのようになっているか IE11、Google Chrome、Firefox で確認してみました。どういうわけか、WEB 上には『これだ』という情報が無く、現時点でもいろいろ変化の途中なのかな・・・と思った次第ですが、いろいろチェックした結果二つの大きな事が解りました。 1) 3つのブラウザで、WOFF 形式で表示可能 2) WOFF の変換は、ttf to woff converter というオンラインサービスで行う必要がある 最も大きな事は 2番目です。最初、武蔵システムの WOFF コンバータを使ってうまく行かず、既に表示されているサイトからフォントをダウンロードして動作する事を確認し、要するに WOFF ファイルが悪いという事が解って、できるだけ新しい日付の記事等で、コンバータを探してたどり着いたのが Everything Fonts という、このコンバータのサイトです。ここでは、API を有償で公開していますので、ある程度またはかなりの信頼性があります。他のツールを見ても幅広く、余程フォントに関して精通しておられる方のサイトと見受けられます。 結局、元々の ttf ですら厳密にはいろいろな問題のあるファイルが流通している、または自分で作ってしまっている事が考えられます。そこから、WOFF へ変換して、うまく行ったのが Everything Fonts のみという結果です。 クロスドメイン用に Google ドライブ Google ドライブで誰でも簡単 ＷＥＢ ページ Google ドライブですと、Access-Control-Allow-Origin: * を返してくれるので、Ajax のデータや、このようなフォント置き場としてブログ等から利用できます。ただ、フォントとなるとそれなりに大きいので、最初はかならずダウンロードが発生します( フルの日本語フォントならそれなりに時間を要します )。なので、一応ブログでは必要な記事でのみ呼び出す事にします。
<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/FancyBalloons_x.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>
ファンシーバルーン
タグ：Webフォント
|
|
【WEBブラウザの最新記事】
- CSS の @media screen と IFRAME を使用して PC コンテンツとスマホページを完全に別作成して切り替える
- WEB ブラウザで WEBカメラから静止画像を canvas へ転送して、その画像をローカルへ保存するテンプレート
- WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます
- iPhone を EpocCam というアプリで Wi-Fi の WEBカメラにする場合のいろいろ知っておく事。
- ブラウザ別『Java 無効』
- IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
- ブラウザの入力履歴の削除( 特にパスワード )
- IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
- ブラウザを使用した簡易パーセントエンコーディング変換
- 各ブラウザで、onbeforeunload を使おうとすると
- IE の占める割合の変遷と IE8 でないと動かないシステムの現実
- Flash Playerに危険な脆弱性( またかというかこっちもか )。13.0.0.206 である事を確認しましょう。
- デベロッパーツールを使用してクッキーの一覧を表示する
- Seesaa ブログの『保存ボタンが表示されない』
- Firefox のみのレイアウトトラブル / float:left と line-height
- ブラウザ毎の「開発者ツール」の起動と知っておくべき要点
- ブラウザ別『ソース』の表示
- 各ブラウザの現在の「document.charset」と「document.characterSet」
- Favicon の動的変更・または追加( IE8、Firefox、Chrome、Opera、Safari )
- Opera の window.open のバグ
