忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2024 . 03
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    クライアントの環境に依存しないウェブフォントを利用してみる



    このエントリーをはてなブックマークに追加
    今までのWebページはfontを指定してもクライアントのPCにWebページ側から指定されたフォントがインストールされていなければ正しく表示されませんでしたが、CSS3からサーバー側にインストールされているフォントをクライアント側に表示させる事が可能になるそうです。

    ただ、このブログはサーバーの設定をいじれないので今回はグーグルの公開しているAPIからWebフォントを利用してみたいと思います。

    http://www.google.com/webfont

    上記リンクURLの文字列もグーグルのWebFontを利用してみました。

    利用方法は簡単で好きなフォントを選んで指定されたlinkタグをhead内に挿入し、CSSに適用したいタグやclassを書きこむだけです。

    例)
    リンクのタグ
    <link href='http://fonts.googleapis.com/css?family=Miltonian+Tattoo' rel='stylesheet' type='text/css'>
    フォントのCSS
    h1 { font-family: 'Miltonian Tattoo', arial, serif; }


    注意点など。。

    グーグルのwebフォントは今のところ英数字だけのようです。
    といいますのも日本語のfontは漢字・ひらがな・カタカナなど膨大な量がありいちいちwebから呼び込んでいたら時間がかかってしまいます(日本語フォントは容量的に3Mくらいあります)

    ですので正直な話、日本語サイトではわざわざWebFontを使わないで、数キロバイトの画像イメージに置き換えたほうが効率がいい気がします。

    ちなみに日本語WebFontを利用出来るサービスも存在します。
    http://decomoji.jp/
    こちらの「デコもじ」というサイトでは一部無料でWebFontの公開を行っているようです。
    せっかくなので私も使ってみました。
    このブログのタイトルと説明文をデコもじのサービスを利用してWebFont化してみました。


    実際のブログタイトルと説明文をマウスでドラッグしてみるとテキストで表示されているのが確認できると思います。(やっぱり読み込みがちょっと重い感じがします・・・)
    PR




    ■ この記事にコメントする
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード
    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    ■ コメント一覧
    ■ この記事のトラックバック
    この記事にトラックバックする:
    ブログヘッドラインなどに使われているドリコムRSS Liteの代わりを探す HOME html5のDOCTYPE宣言の書き方
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]