2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
日本向けのサイトでフォントにLucida Grandeを最初に指定してはいけない - ayu118の日々雑感。
※2013-10-27 追記 ブクマしてくださるのはうれしいのですが、この記事は見てのとおりとっても古いです！！ どちらかというと「当時のIE8/Chromeのバグ」という面が強いと思うので、最新の状況は各自でご確認ください！ 最近やっとIE6を捨ててIE8にしてみたわけなんだけども、どうも特定の文字だけ化ける。 例えば、Yahoo!知恵袋の質問ページでは、「質問日時」や「残り時間」の後のコロンが矢印みたいな記号になってしまう。 他にも化けた文字があるのでコピペしてみるとどうも全角数字っぽい。 で、ググってみたところ Firefoxで全角数字が文字化け - （・∞・） という記事を発見。 Firefoxとありますが、ChromeもIE8も同様な現象が発生する様子。IE7は検証してない。 文字化けの理由はLucida Grandeというフォントにあるようだ。 http://pb.practi
CSSのfont-family指定はこれで決まり！（2013冬） - 遠近法ノート
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
font-familyの指定順序参考
なんだかんだと最近フォントの事が気になって気になって夜も眠れない日々を送っていおります…。どうもこんにちは。(･_･; えっと…。 このサイトを訪れてくださる方は、今は半数以上が iOS からです。 次いで Windows。 三番目が Mac から。 先日、Webフォントのことを書いたのですが… Webフォントが楽しい！Webフォントの探し方と使い方・設置の仕方などなど。 | norirow’s Diary せめて、iOS で『ヒラギノ丸ゴシック』が表示できるようになったら嬉しいんですが…。 ということで仕方なく 必要に迫られて Webフォント を勉強することにしました。 … Webフォントを使う理由もそうだけど、フォントをあえて選ぶ理由は、もちろん “自己満足” もあるのだけれど、どちらかといと、せっかく訪れてくれた方が “読みやすい” デザインにしておきたいから。 前述したように、今や
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
“ＭＳ Ｐゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック
CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。 さて、↓の２つのの文字を見比べてください。 実はどちらも同じ "MS Pゴシック"なんです（Chromeで画像化しています）。 CSS3 の transform を使う さて、これをどうやって実現しているかと言うと、CSS3 の transform を使って、アンチエイリアスさせたいテキストを、少しだけ縦方向に拡大しています。 .clear-type { -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transf
人気サイトの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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack
WindowsでもMacでも使えるfont-family「游ゴシック」が美しくていい感じ - ディレイマニア