Hints of fonts on the web -- Introduction
Section 1：概説 Section 2：画像化テキスト Section 3：サンセリフ欧文(1) Section 4：サンセリフ欧文(2) Section 5：サンセリフ欧文(3) Section 6：セリフ欧文(1) Section 7：セリフ欧文(2) Section 8：セリフ欧文(3) Section 9：草書系・筆書系欧文(1) Section 10：草書系・筆書系欧文(2)・装飾系欧文 Section 11：等幅欧文・その他の欧文 Section 12：ゴシック系和文(1) Section 13：ゴシック系和文(2) Section 14：明朝系和文(1) Section 15：明朝系和文(2) Section 16：その他の和文 Appendix A：無償利用できるフォント Appendix B：Windows の標準フォント Appendix C：PostScript
SVGよりアイコン・フォント！ な理由
両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果的に使える。 font-size color text-shadow PNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントはCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイル
ソーシャルアイコンを画像ではなくWebフォントで表示する際の備忘録 | なまら春友流
Webフォントはクライアントにインストールされていないフォントも表示してくれるという優れもの。 サイトの表現の幅が広がるし画像を使うわけではないのでSEO的にもいいのかな。 SNSのアイコンもWebフォントにするとマウスをのせた後の処理などもしやすい。 導入も簡単。ん？簡単？？？ いや、難しかったっすｗ ってことで知ってる人には簡単だと思うけれど、私には敷居が高かったので備忘録として。 AGENDA Webフォントって？ Webフォントの使い方 Webフォントのダウンロード Webフォントのアップロード 実際に表示させてみるための準備 Firefoxだけ表示されない 1. まずWebフォントって？ Webフォントを使う際におさえておきたい5つのポイント – フォントブログ 意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER’S BLOG –
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
完全にフォントだけで勝負しているカッコよくてシンプルなサイト集
日本デザインセンター / Andreas Pihlström / TYP他...全14件
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
free dingbat fonts | DingbatDepot.com
Come on in and get yourself some free Dingbat fonts. These typefaces are just like any other regular fonts, in so far as they come in a TTF font format. You download and install them on your computer just like any other regular font. However, instead of outputting basic text like a "normal" font, dingbat fonts will output and display "dingbat" characters in your design. Choose from any of the ding
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font comparer