タグ

webフォントに関するmut00tumのブックマーク (3)

  • これは便利!アイコン型WebフォントのCDN「Font Awesome」

    まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f

    これは便利!アイコン型WebフォントのCDN「Font Awesome」
  • フォントブログ

    フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ

    フォントブログ
  • Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts

    Googleにホスティングされて いるWebフォントCSS3等で 3Dやレタープレスなどのエ フェクトをかけた状態をサク サク確認できる、というWeb サービスのご紹介です。 Google Web Fontの使用頻度が高いなら結構役立つかもしれません。装飾したCSSの発行もしてくれます。 右カラムでGoogle Web Fontを選択、左カラムの上部にエフェクトを選択するボタンがあります。選択すれば即座にプレビューに反映されます。上記はLeandeというエフェクト。 下部でCSSのソースやWebフォント用のコードをコピー出来ます。 フォントGoogle Web Fontにあるもの全てが揃っているわけでは無さそうですが、増えていくんじゃないでしょうか。ご利用は以下よりどうぞ。 Best Google Web Fonts

    Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts
  • 1