デザインFacebookTwitterLINEPocketメールアドレスこのサイトを開設して1年を期に、サイトのデザインをしれっと更新しました。年始の抱負の記事でも宣言したとおりWeb系の記事を書きたかったので、今回のデザイン変更で実装した技術まわりを記事に起こしていきます。第1回目となる今回、「ウェブフォント」について。実際のコードで見るとこんな感じ。[発展]アイコンフォントの指定は一癖あるフォントの見出しウェブフォントってなんだろう?メリットが多くても、ガンガン使えるわけじゃないデメリットはお金が解決?実際に使ってみようず!ウェブフォントってなんだわさウェブサイトの文字は、閲覧する人のPCにインストールされているものを使います。インストールされていないフォントは指定しても表示できません。凝ったフォントで見出しをつくろうと思ったら画像にするほかになかったわけです。サーバーにフォントを置いてページと一緒に読み込んでしまえば、手持ちにないフォントも表示できるよね。いうのがウェブフォントの基本的な考えです。小さなアイコンもフォントにしてしまうテクニックも徐々に普及してきています。・画像じゃなくテキストなので、検索に引っかかる・ベクトルデータなので、拡大してもキレイ・アイコン画像も「1文字」で再現できる・凝った見栄えもらくらく実装できるガンガン使えるというわけでもないメリットが多いからジャンジャン使おう!と行きたいところ。いくつかの障壁、問題点を理解しておく必要があります。上から順に見ていくと、まずデータ量がネックになります。アルファベットのみならまだしも、「ひらがな・カタカナ・漢字」を扱う日本語フォントはどうしてもデータサイズが大きくなります。ものによっては5MB超にもなるデータは、いくら高速回線が普及してるといえども喜ばれるものではありません。自分のサーバー上にフォントのコピーを置くことになるので、いわば「再配布が可能な状態」にしていることになります。有料で購入するフォントはまず利用できません。Motoyamaさんの「LigatureSymbols」をアイコンフォントとしてそれぞれ利用させて頂いています。http://kudakurage.com/ligature_symbols/)Windowsでのフォントの表示については、もう仕方がないのかなと思います。ある程度は諦めましょう(また、視認性の悪いフォントを記事本文に使っているケースをたまに見かけますが、そういうエゴは喜ばれないです。読みにくいのに読ませる文章なんて、悪いデザインの見本だと思いますお。ウェブフォントをもっと効率的に使う手段もデータサイズやライセンスの問題を、お金が解決してくれるケースもあります。フォントの大御所モリサワさんや、フォントプラスさんでは、月極でウェブフォントを使わせてくれるサービスが始まっています。これらのサービスでは、必要な文字のフォントデータだけを抽出して送ってくれる機能などが盛り込まれているとのことで、1フォントのために5MB、という不安を拭い去ってくれるそうです。GoogleやAdobeでも配信が行われていますが、こちらは英字フォントのみで日本語には対応していません。ウェブフォントはどうやって使うかCSSをある程度理解していれば、だれでも簡単にウェブフォントの設定ができます。準備はたったの3ステップ1.CSSでウェブフォントを指定する2.CSSでクラスやセレクタにフォントファミリーを指定する3.HTMLを書く実際のコードで見るとこんな感じ。{}ここにフォント名、フォントファイルを書き込みます。1フォントに対して「eot」、「woff」、「ttf」、「svg」の4ファイルを指定していますが、これはブラウザごとの互換性のための記述。eotはIE系に、woffは最近のモダンブラウザに、ttfはそれ以前のもの、svgは保険、くらいの認識でいいと思います。最近のブラウザだけカバーできればいいという場合は、「woff」だけあれば大丈夫(なはず)。‘’;今回はh1要素にウェブフォントを当てたかったので、h1に対してfont-familyを指定しています。※参考画像ではフォント1種類だけを書いていますが、sans-serifとか他のフォントもちゃんと記述しときましょう。※ステップ1と違うフォントの指定ですみません((3.HTMLを書くh1にfont-familyが当たっているなら、h1の中身はウェブフォントが当たった状態で表示されます!つまりステップはこれだけ![発展]アイコンフォントの指定は一癖ある(以下、コードを見てすげーと思った筆者の感想)通常、アイコンフォントはアルファベット1文字に1つのアイコンが割り当てられている。「c」にはケーキが、「p」にはペットボトルの図形が割り当てられたフォントがあったとする。それぞれの図形を見出しとして表示させたいとき、「cたべもの」「pのみもの」という記述になり、ソースを見ただけでは理解不能な謎のHTMLとなってしまう。これはマークアップとしてあまり好ましくない。今回利用した「LigatureSymbols」というアイコンフォントではその点が考慮して作られており、特定の単語を記述した時だけ対応する図形に変化するという構造になっている。公式のデモを見ていただければわかると思うが、このフォントを当てたCSSで擬似要素:beforeを作成し、そのcontentに”attr(title)”という記述を行っている。HTML側ではspanやpタグにフォントを呼び出すクラスと、対応する図形に化ける単語をtitle属性に入れれば良い。することで空要素を作成する必要もなく、意味のある単語だけがHTML上に示されることになる。CSSとHTML、奥が深い。実際のコードで見るとこんな感じ。[発展]アイコンフォントの指定は一癖あるスポンサーリンクなかのひと:タカヒロAuthor:Takahiro都内でウェブデザイナーとして勤務する、1992年生まれのデジタルネイティブ。写真を撮ったり撮られたり、クロスバイクに乗っておいしいものを探しに出かけたりしながら日々を過ごします。メッセージフォームMessageform内容をご確認のうえ、チェックを入れて送信するボタンを押してください。お返事が必要なご連絡は別途お問い合わせフォームよりお送りください。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。