Add Icon Fonts to Text Links
2013年3月25日 CSS CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Webフォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまりiPhoneやiPadといった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロー
[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
地味だけど強力なWebフォントのお話。まだ日本のWebデザインで普及してないから書いとく - bathtimefish's blog
今日SNSでつぶやいたネタを少し広げて書いておこうと思う。 Webフォントサービス「フォントプラス」を電通レイザーフィッシュが採用 興味深い採用事例。サイト運用コスト軽減のためWebフォントを使う。たしかに大規模なコーポレートサイトの場合効果があるかもしれない。結果が知りたいところ。 と言ったら、MJの例の人が「画像つくる手間なくなるのいいからウチでもつかってるよ。」的なレスくれたりして、なるほどなーと思った。 WebFont。CSS Font Module Level 3でCSSによる仕様がまとめられている。まあ日本ではまだ活用事例が少ない地味なHTML5関連の技術である。 すごく簡単に言うと、どんなフォントでも使えるようになるって機能。Web上にフォントを置いておいて、Webサイトを表示するときにそのフォントを使うことでコンピュータの中にないフォントでもWebサイトで利用できるというこ
Web フォントでアイコン表示。 Font Awesome 使ってみた
Blog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Font Awesome は簡単に言ってしまえば、Twitter Bootstrap のアイコンを Web フォントで扱えるようにしたもの。Twitter Bootstrap のアイコンは CSS Sprite で利用できるようにひとまとめになった 「画像」 として提供されていますが、Web フォントとして提供されることで、よりサイズ、カラーなどを柔軟に扱えるようになっています。 Font Aweso
まるで画像。テキストを曲線上で表現する·CSSWARP MOONGIFT
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
text-rendering: optimizeLegibility
WordPress の次期デフォルト・テーマ、Twenty Twelve の CSS を見ていたら、body 要素に text-rendering: optimizeLegibility という見慣れないプロパティが指定されていたのでちょっと調べてみました。 The ‘text-rendering’ property – SVG 1.1 (Second Edition) text-rendering | Mozilla Developer Network Cross-browser kerning-pairs & ligatures CSS Text-Rendering | Trent Walton text-rendering プロパティは CSS ではなく SVG の仕様に定義されています。現在のところ利用できるブラウザは Firefox、Chrome、Safari。指定できる値は a
The 10 Best Script and Handwritten Google Fonts
A good script font is hard to find. I’m extremely picky when it comes to this particular area of typefaces and tend to hate most of what I see. With this post, you can skip the work of sorting through the junk, and cut straight to the best script and handwritten Google Fonts that are readable, attractive and perfect for your site. All of the fonts are shown with a unique CSS treatment (and provide
人気サイトのfont-family - r7kamura's Hakolog
国内でトラフィックランキング1-20位周辺のサイトの、body要素に対するfont-family指定方法を調べた。 /* yahoo.co.jp */ body { font-family: "MS PGothic", "Osaka", Arial, sans-serif } /* google.co.jp */ /* google.com */ /* youtube.com */ body { font-family: arial, sans-serif } /* fc2.com */ body { font-family: Verdana, Helvetica, "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif, /* Meiryo */; } /* facebook.c
意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://pointcard.me/japanese-free-web-fonts/
資料：日本のコーダーのfont-family指定 | ウェビンブログ