自分用のメモです。font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で...
IE との兼ね合いで，font-size は%で指定しておくのが，いちばん無難だと思うのですが，IE6, 7 にちょっと痛いバグがありました。 小さなサイズの文字が指定どおりの大きさにならないのです。 11px以下のフォントが指定より大きくなる まず，font-size のページを IE6 または IE7 でご覧ください。 順にフォントサイズが小さくなっていくはずなのですが，74%から72%あたりの日本語のフォ...
スタイルシートで font-family: "メイリオ"; と指定しているサイトをちょくちょく見かけるが これは今の時点ではやめておいた方がいいんじゃないかと思う。 確かに Windows XP にもメイリオを入れられるようになったが、 こないだ書いたように Windows XPでメイリオを使う方法まとめ - 頭ん中 メイリオをダウンロードして XP に入れるだけでは 綺麗な縁で表示されない。 から。 ブラウザ...
『 CSSであまり使われていないが使った方がいいフォント8選『8fontsyouprobablydon'tuseincss,butshould』｜CREAMU 』
CSS 3やHTML 5で提案されている諸機能への対応が進んだSafari 3.1。今回はその中からWeb Fontに関する機能を見ていこう。 現在、Webページで利用できるフォントはユーザーの環境にインストールされたものだけで、文字の表現の幅は非常に限られている。しかし、Webフォントの機能を利用できるようになれば、制作者がサーバー上に用意したフォントでWebページを表示できるようにな...
Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実― この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Safariの登場など、環境が複雑化している現在、下手にfont-familyは指定しないほうがいいなと思って、ブログでのフォント指定をやめてみた。 ただ、メイリオで表示してもらいたい場合、文字コードがUTF-8では、欧文フォントが「メイリオ」、日本語フォントは「MS...
Webコンテンツ制作時にフォントの細かな指定に悩んだことは無いだろうか？文章を中心とするコンテンツであれば、フォント（font-family）、フォントサイズ（font-size）、行間（line-height）といった部分には気を使いたい。...
『 ポイント、ピクセル、パーセント、emの変換した際の近似値チャート。 』
「ブラウザ毎の処理を吸収したパーセント数値」、つまり共通のフォントを使う数値指定をすればよいんじゃないか、ということになったので、以上の表の中で好きなサイズ（笑）を選ぶ分には、ユーザーの設定状況が同じ（96ppi/12pt で ＭＳ Ｐゴシックがデフォルト）であれば、ほとんどそろいます。揃ってくれ！ ところで 同じポイント相当の指定が複数ある点にお気づきだと...
もあります（普及はしていない）。これらの低解像度、高解像度ディスプレイは、多数ではないものの相当数のユーザーが存在します。 標準のマックで、1インチ程度の大きさのつもりで、72pxと指定したものを、windowsで17型UXGAで見ると、約0.61インチになります。元がこれぐらい大きい文字なら問題はありませんが、これを、10pxなんかですとえらいことになります。自分のMacでは3....
チェック対象は、HTML文書内のstyle要素内のCSSの指定と外部CSSファイルです。今回はカウント7以上の全てのフォントをひっくるめて載せてます。 左側の数字は調べた範囲での出現数、右側がフォント名です。 あくまでもCSS中に出現したフォントを数えたもので(一つのファイル内での重複は省いて数えています)、世の中のパソコンにインストールされてる割合ではありません。 こ...
CSS Font and Text Style Wizardサイト上でCSSによるフォントスタイルを確認できる便利ツール...
ユーザビリティーの大家、Jakob Nielsen氏の最近の記事 Top Ten...
ちょこっとしたツールですが便利なのでご紹介。 CSSTYPEではテキストのスタイルをウェブ上でシミュレーションしていくことができる。自分の好きなテキストを使ってシミュレーションできる点が便利である。 もちろん気に入ったスタイルができたらCSSのコードを生成してくれる。このコードを使ってサイトを作れば思ったとおりの出来映えになるというわけだ。 設定できる項目...
6月20日に、Macromedia Flash Conferenceへ行ってきました。その一番最後の時間枠は、FlashのコンクールというかコンテストというかでFlashの作品をいろいろ募集している、さまざまなサイトの紹介をするスペシャルセッションでした。こういった場では、かなり大きいスクリーンに画面を表示させて、たくさんの受講者みんなで見るというスタイルが採られるわけですが、いくら大きなス...
フォントサイズを指定する際、絶対単位を使う人は少ないと思います。絶対単位で指定すると、IEでフォントサイズの変更ができなくなるためです。そこで、フォントサイズに関するCSSハックをまとめてみました。 今まではユニバーサルセレクタですべてのフォントサイズを100%に揃え、そこを基点に指定を行っていました。 * { font-size: 100%; } p { font-size: 80%; } これでも問題はない...
『 フォント、サイズ等を指定してどう見えるかをリアルタイムで確認 』
『 ↓YUIのFontsCSS使ってもなんでか見た目上同じにならないことがある。これなら大丈夫かってーとわからないけど。 』
個別のフォント名 (font family) は一重引用符で括ります。総称名 (generic family) は括りません。複数のフォントを指定する場合、先に見つかったものが採用されます。全て見つからなかった場合は、ブラウザに設定されたデフォルトのフォントで代用されます。 次の例は、 p 要素のフォントを 'Arial', 'Tahoma', sans-serif に指定するものです。 p { font-family: 'Arial', 'Tahoma', sans-serif } 文章の読...
OSのみならずブラウザにも左右されるWebにおけるフォント。多くの場合はHelvetica(WindowsではArialになる)やVerdanaなどの一般的なフォントを指定し、多少サイズをいじる程度のアプローチか、まったく無指定でユーザーに任せるといったアプローチであることと思う。徹底的に調節するとなるとものすごくツライから。Yahoo! UI Libraryで提供されているFonts CSSはそのフォント調節の手助け...
『 各ブラウザの差異を吸収してフォントを調整してくれるライブラリ。標準がarial,13ptなので日本語で使うには要調整。 』
