SQLの窓

2014年07月07日


2014年7月7日現在。WEBフォントの実際

久しぶりに 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 ドライブで誰でも簡単 WEB ページ

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ブラウザの最新記事】
posted by lightbox at 2014-07-07 20:56 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり