2013年2月23日土曜日

Web Font をgoogle ドライブに入れてみた

昔、ウェブフォントというものが出た!ということを知り、それはいいと思ったが、な~んだ高いわ!と諦めていた。

が、手書きフォントのサイトを偶然見て

やっぱりいいなぁと思って調べたら…なるほどフリーのフォントをサーバーにあげたらいいんだ。
IEにも対応できるんだということに気がついた。

見本どおりにしてみた…。



@font-face {
/* フォントの名前を付けます */
font-family: 'IPAEX';
/* IE 用に EOT 形式を読み込みます */
src: url('https://グーグルサイトの絶対パス/ipaexm.eot');
/* IE 以外用に TTF 形式を読み込みます。(iPhone にも使いたいなら SVG 形式をあわせて読み込みます。ここでは割愛) */
src: local('hide from IE'), url('https://グーグルサイトの絶対パス/ipaexm.ttf') format('truetype');
}

↑と書いたらどうなるのだろうか…。


こちらの明朝体をいただき…。

サーバー機能を持ったGoogle ドライブにフォントを入れてみる…。


簡単ですね。 IE用に eot を作るのはここでやった。

SVG変換など何かと高機能なのがあるけど eot には未対応

こちらのコンバータを利用

SVG に変換してみたかったが、ファイルがでかいので無理だったみたい。
いろいろ変換するサービスはあるようです。

商用OKのオシャレなフォントも出てきましたけど、True Type アウトラインのフォントでないとできません。 例えばこちらのPostScriptアウトラインになるとできません! むっちゃいいんやけど。

こちらに細かい指定の方法あり

このブログの div.aki のところを 明朝にしてみました。上の黄色い背景色のところです…

若干表示されるのに時間がかかりますが…ちゃんとできてるじゃありませんか…。
ますます、このブログの表示が遅くなりました。

ま、これは実験サイトなので…

そうなってくると、jquery で preloader つけないといかんね。

http://www.no-margin-for-errors.com/projects/prettyloader/ 
↑プリティローダーこれもいいかも。 

こうなってきますと、Google Drive 使えるよな~。 

IE9は無理だったけど。
そりゃそれでいいや。

モジラもダメラだった。

IRONでOKというだけですね。


Font.com に無料のがあるみたいだが…こんなの使わないだろう。

ま、一度でもお金払ったらあらゆるサイトで使えるのだったら、いいかもしれないけど。

css3の勉強で… border-radius:5px; で周囲を丸くもしてみました。

Kindleコミック 人気タイトル 10%ポイント還元

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索