定番フォント ガイドブック 作者: タイポグラフィ編集部出版社/メーカー: グラフィック社発売日: 2017/08/08メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る 時折話題にしてきた、CSS での font-family 指定のベスト・プラクティスだが、様々な検証を経てようやく設定が落ち着いてきたので、オレオレパーフェクト設定を共有しておく。 ゴシック体 (サンセリフ) のフォント指定 明朝体 (セリフ) のフォント指定 等幅 (モノスペース) のフォント指定 フォントを動的に試せる Web アプリを作りました ゴシック体 (サンセリフ) のフォント指定 2017年時点で、Mac でも Windows でも、システム標準のフォントを使ってイイカンジに Web ページを表示する font-family 指定は以下で決まり。 /* Windows 用 Medium
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
ウェブサイトのフォントに迷っているならもうこれを指定すればいいと思うよ。 たとえばwordpressのテーマってほとんどが外国の作者さんですよね。 日本語のフォント指定なんてしてくれてませんし！ DreamWeaverとかがデフォで指定してくるfont-familyもいまいちだし。 じゃあ最近流行のwebフォントはどうか？ 英数字ならファイルサイズが小さく種類もいっぱいあるのに対し、日本語フォントはファイルサイズが大きいのに加え、種類も少ないです。 （FontPlusさんを使うとたくさん使えてサイズ小さくて済みます、使用料を個人で払えるならば…ね。） 英数字だけ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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
