安全でアクセシブルなアイコン・フォント

2014/01/28 65 users アイコン・フォント Bullet フォント ブラウザー

Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？どうすれば安全に(bullet... 続きを読む

画像の代わりに使えるアイコンタイプのWebフォントのまとめ｜Webpark

2012/08/28 390 users アイコンタイプ Format src font-family

アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentyp... 続きを読む

有料から無料になったCSS3による42種のウェブアプリボタンセット「Zocial」 - GIGAZINE

2012/01/30 641 users GIGAZINE Zocial 有料 CSS3 ベクター形式

もともとは24ドル(約1800円)の有料セットだったのですが、今は無料でダウンロード可能なのが「Zocial」です。42種類のCSS3によるフォントフェイス(font-face)と、ベクター形式によって自由なサイズでキレイに描画できるアイコンボタンの組み合わせとなっています。 Zocial ~ CSS3 Buttons, Sass Framework. http://zocialbuttons.c... 続きを読む

CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2011/11/16 446 users Webフォント Webデザインクリップ CSS3 Web制作

CSS3のWebフォント機能を使うと、サーバー上にあるフォントファイルを使用するので、ユーザーのPCにインストールされていないフォントを表示できるようになり、ユーザーのフォント閲覧環境に依存しません。適用方法も簡単で、使用したいフォントファイルをサーバーにアップロードし、CSS3の@font-faceでフォントファイルを指定し読み込ませるだけで利用できます。これによりフォントによる自由な表現が可能... 続きを読む

[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework | コリス

2011/11/09 91 users コリス タイポグラフィ グリッド フレームワーク CSS

MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを... 続きを読む

Google ChromeでＭＳ ＰゴシックをArial+メイリオに置換する - Weblog - hail2u.net

2011/04/22 60 users Weblog hail2u.net unicode フォント

最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳ Ｐゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-... 続きを読む

CSS3のよく使いそうな１０個のテクニックのまとめ:phpspot開発日誌

2011/04/20 162 users phpspot開発日誌 まとめ テクニック CSS3 RGBa

The top 10 CSS3 techniques | Feature | .net magazine CSS3のよく使いそうな１０個のテクニックのまとめエントリのご紹介。 font-face によってマシンに入ってないフォントを使うCSS例 opacity による要素の透明度指定 rgbaでRGBと透明度を併せて指定 border-radiusによる角丸 box-shadowによるブロックに影... 続きを読む

text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011 | 海外SEO情報ブログ

2011/03/15 132 users text-indent 明言 エントリ CSS セッション

今日のエントリもSMX West 2011のセッションからのレポートです。text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。CSSのtext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。ところがGoogleは、現在この方法を推奨していません。 推奨していないというよりも使うべきでないと明言... 続きを読む

[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法 | コリス

2011/02/06 170 users コリス iOS font-family CSS 記述

IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。各ブラウザ・スマートフォンに対応させる@font-faceの指定方法各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。@font-face {font-family: 'MyFontFamily';sr... 続きを読む

Webフォントを使ってみよう！@font-face 関連の情報いろいろ - かちびと.net

2010/10/27 279 users アンチエイリアス Webフォント net フォント コピペ

Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります... 続きを読む

[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集 | コリス

2010/10/25 492 users コリス Gloss Font Webkit系 CSS

対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-... 続きを読む