タグ

FontとCSSに関するeriko315のブックマーク (4)

  • SVGよりアイコン・フォント! な理由

    両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果的に使える。 font-size color text-shadow PNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイル

    SVGよりアイコン・フォント! な理由
  • フォント表示サンプル

    FONTS Revised 2003/12/10 CSS ではフォントの種類を指定できます。フォントとは、描画される文字のことで、文字の種類には、ゴシック体、明朝体などがあります。各々のフォントの種類には、太字や斜体などのバリエーションがあります。 CSS では、次の 5 つの総称名で分類されています。これらを、 generic family と呼びます。 sans-serif ゴシック体風。ひげ無し。 serif 明朝体風。ひげ付き。 monospace 等巾フォント。大文字、小文字、英数文字の巾が等しい。 fantasy 装飾体。花文字、ポップ文字など。読めないフォント絵文字、シンボル・フォント)は除く。 cursive 手書き体風。 CSS でのフォントの指定方法 CSS の説明は別項に譲ります。 CSSフォントを指定する場合、次のように記述します。 font-family:

  • livedoor ニュース - CSSでの指定にオススメな8つの欧文フォント

    CSSでの指定にオススメな8つの欧文フォント 2008年05月11日16時00分 / 提供:デジタルマガジン あなたのWebサイトはもうXHMTL+CSSへ移行されましたか?tableを使ってデザインしていた時よりもコードが見やすくなり、視覚障害者にも優しいので、まだという方は暇な時にチャレンジしてみて下さい。 そんなCSSでのデザインですが、書体を決めるのになかなか苦労します。ここはどのブラウザでも、どのOSでも同じように見せたい。だけどできることなら画像は使いたくないし、かと言ってインストールしている人が少ないフォントじゃ意味がない。しょうがないからArialで我慢・・・なんて妥協はもったいないです。 海外のサイト「- Web Design Marketing Podcast & Blog」に、各OSにインストールされている欧文フォントの比率が掲載されていたので紹介します。CSSで作る

  • CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ

    CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名(generic-family)である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま

  • 1