Web制作で使えそうなアイコンフォント | Gatespace's Blog
最近よくアイコンフォントを使っています。 アイコンフォントのメリットですが、 フォントなのでテキストとのベースラインが合わせやすい フォントなので拡大縮小はcssのfont-sizeで指定出来る フォントなのでcssで簡単に色を変えられる ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。 があります。 デメリットとして単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる（重くなる）というのがあります。 とはいえ、レスポンシブとかサイズとかカラーバリエーションを考えてpngを作るのも手間です。 今回は、自分がよく使うアイコンフォントを備忘録代わりに書いておきます。 なお、この手のアイコンフォントはアップデート（主にアイコンの追加）が多いので、最新版やIE7以下での対応などは各公式サイトでご確認ください。 アイコンフォントの基本的な使い方 ダウ
head内にコードを一行書き足すだけで潤沢なアイコンフォントがすぐ使える「Font Awesome」が便利 * prasm（プラズム）
アイコンフォント、便利です。 自分でいちいちアイコンを書く必要がなくなるし、レティーナや高解像度のディスプレイでも表示が汚くならないし、アイコンフォント、便利です。 まだアイコンフォントを使ったことのない方は、導入面倒なんじゃないの？とお考えかもしれませんが、意外に簡単です。 簡単って言うか、一行です。嘘だと思ったら、ここから先の記事をどうぞ。 使い勝手のいいアイコンフォント「Font Awesome」 とにかく導入は手軽です。 Get Started with Font Awesome ＜head＞＜/head＞内に一行コードを書き足します。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 必要なスタイルシートを外部から読み込むだけです。 メリ
Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)
概要 ▶ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。それは本文組にWebフォントを使用して、Windowsのウェブブラ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。 TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。 それは本文組にWebフォントを使用して、Windo
かなり充実してきたGoogle Web Fonts API｜Webpark
通常、フォントはユーザー側の環境に影響されますが、Google Web Fonts APIを使うとGoogleのサーバー上にあるフォントを使うので、ユーザー側の環境を気にせず自由に使用できます。 以前からあるサービスですが、久々に見たらフォント数がかなり増えていたので紹介してみます。 ちなみに現在105個の英語フォントが提供されています。 ここでフォントを選んで、次の画面でコードを取得します。 今回の場合以下のようになります。 まず使用するフォントを読み込んで <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'> フォントを使用する場所をCSSで指定します。 h1 { font-family: 'Terminal Dosis Lig
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
CSSのem指定のサイズが一発でわかっちゃう「EmChart」:phpspot開発日誌
EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」
フォントをem指定 - XHTML+CSS - Notebook - Css-Style.jp
フォントをem指定 以前紹介したフォント関連の指定とは別にフォントの指定を紹介します。 と言いましてもWeb Designingで紹介されていたものなので、相変わらずメモの変わりにとっておいている程度です。今回はemを使ってピクセル単位の感覚で文字サイズをコントロールするというものです。 やり方はいたって簡単ですので、覚えておいて損はないかと思います。 bodyの指定 まずbody要素に対して"font-size: 62.5%;"と指定します。 body { font-size: 62.5%; } これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。 body要素に対して"font-size: 10px;"としてしまうと、IEのメニューから文字サイズを変更できなくなりま
CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 – creamu
DiaryTechnology CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 CSSでフォント指定をちょっと凝ってみたい。 そんなあなたにおすすめなのが、『8 fonts you probably don’t use in css, but should』。CSSであまり使われていないが使った方がいいフォント8選だ。 以下にご紹介。 ・Palatino Linotype / Palatino（WINDOWS 97.09% / MAC 78.86%） ・Tahoma（WINDOWS 96.09% / MAC 72.02%） ・Impact（WINDOWS 95.85% / MAC 88.08%） ・Century Gothic（WINDOWS 85.44% / MAC 42.50
テキストスタイルをジェネレートできる CSS Type Set[to-R]
テキストスタイルをジェネレートできる CSS Type Set CSS Type Setはテキストのスタイルをジェネレートできるサイトです。 デザインなどをしているとき、テキストに違和感を感じることがありますが、そういう時に使えそうです。 line-heightやletter-spacing、word-spacingも一緒にシュミレートできるので、色と文字間隔の関係やフォントと行間の関係なども簡単に確認できるので非常に便利です。 ただ残念なことに日本語フォントに対応してないようですので、日本語フォントに対応させる為のブックマークレットを作っておきました。 CSS Type Setに日本語を追加 上のリンクを右クリックでお気に入りに追加(IE)/このリンクをブックマーク(Firefox)でお気に入りに登録して、CSS Type Setでそのお気に入りを実行することで利用できます。 気に入った
![テキストスタイルをジェネレートできる CSS Type Set[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/73d23b415d523c6c2684f2de451727e98b5b4e8d/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20080215_01.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://pointcard.me/japanese-free-web-fonts/
株式会社コニファ ツール紹介やプログラム集：ブラウザ上で文字の見た目確認する・その１（cssで文字サイズ指定・サンプル）