CSSの font-familyについての参考サイト 2014

参考になったサイトいろいろ。


CSSのfont-family指定に関する考察 2014年版 ｜ セブンシックス

下記について触れられていて、参考になる。

• ブラウザ/OSのデフォルトフォント
• Macが全角のfont-familyを無視する件とその例外条件
• 游書体
• 大手サイトのfont-family

CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）

Win/Macの日本語/アルファベットのfont-familyのブラウザ別対応状況表あり。

游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。

Osaka−等幅は貴重なOS X唯一の和文等幅フォントであるため、monospaceでは利用します。

ブラウザ、モバイル、OSそれぞれにデフォルトでインストールされている日本語フォント一覧

ブラウザ/OSごとの、指定なし/serif/sans-serifそれぞれのデフォルトフォントを調べている。



「游ゴシック」フォントと「Yu Gothic」フォントの違い - ななふぉ

違うらしい。



「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い - 強火で進め

分かりやすい。


上記を参考に、個人的な好みとしてはこんな感じ？

画面表示用（ゴシック）

font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;

印刷用（明朝）

font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;

優先順位は、

1. 游書体（Win用）
2. Yu書体（Mac用）
3. ヒラギノProN（Mac/iOS用）
4. メイリオ/MS P明朝（Win用）
5. デフォルトフォント

PHPExcelで PDFが文字化けする問題の解決方法

PHPExcelではExcelの他にPDFも出力できる。

$writer = PHPExcel_IOFactory::createWriter($xls, "PDF");
$writer->save($path);

しかし、これだとPDFで日本語を出力しようとすると文字化けする。

文字化けを回避するには、フォントをセットする必要がある。

$writer = PHPExcel_IOFactory::createWriter($xls, "PDF");
$writer->SetFont('arialunicid0-japanese');
$writer->save($path);

これができるようになったのはわりと最近のようだ。（参考：PHPExcel - phpexcel - View Issue #11919: Can't set font on writing PDF）

ただし環境によってはこれでも見られないらしい。（参考：PHPExcel の PDF出力で日本語文字化け2 携帯ビューア - PC・通信メモ）


また、PHPExcelで作るPDFはExcelとして出力した場合と比べていろいろ違う（罫線とか数値フォーマットとか横幅とか）ので、綺麗に出すにはPDF用にいろいろ工夫しないといけないようだ。


参考

• PHPExcel 1.7.2でPDFに日本語混ぜると化ける | Go for it!
• PHPExcel の PDF出力で日本語文字化け - PC・通信メモ
• SE奮闘記: PHPからエクセルを操作するPHP-Excelを使ってみた

Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはIE専用。
2行目のsrcはIE9用？


Firefox 4

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはChromeと同じ。


Chrome 10

@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}

URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか？


Safari 5 (for Windows)

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？


Opera 11

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。

• IE8-
  
• IE9+、Firefox、Chrome
• Safari、Opera
  

参考：Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

YUI2と YUI3の CSSの比較

ついにGoogle Libraries APIがYUI3系の配信を開始した。
YUI 2 CSS ToolsからYUI 3 CSS Resourcesへ乗り換えるための準備として、変更されている点を洗いだしてみた。
（追記：比較したのは、YUI 2.8.2r1と YUI 3.3.0。）


fonts.css

変更なし


grids.css

根本的に変わったので、小手先の変更による対応は無理。
ただしclass名のプリフィクスも変わった（2はyui、3はyui3）ので、2と3は共存できる。


reset.css

buttonのmargin、paddingのリセットがなくなった。

button {
    margin: 0;
    padding: 0;
}

↓

削除

delとinsのtext-decorationのリセットがなくなった。

del, ins {
    text-decoration: none;
}

↓
削除

supとsubのvertical-alignが変わった。

sup {
    vertical-align: baseline;
    ↓
    vertical-align:text-top;
}
sub {
    vertical-align: baseline;
    ↓
    vertical-align:text-bottom;
}

button、optgroup、optionのfontのinheritがなくなった。
また、input、textare、selectのfont-styleのinheritがなくなった。

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
button {
    *font-size: 100%; /* IEでリサイズ可能にするためだったらしい */
}

↓

input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}

base.css

bodyのmarginが削除された。（余計なお世話だったので朗報だ。）

body {
    margin:10px;
}

↓

削除

optgroup、del、sup、subのリセットされていたstyleの上書きが削除された。
reset.cssの方から削除されたので、baseで上書きする必要がなくなったらからだろう。

optgroup {
    font-weight:normal;
}
del {
    text-decoration: line-through;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}

↓

削除

クリック系のform要素の1pxのpadding（Opera対策らしい）が削除された。

button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] {
    padding:1px;
}

↓

削除

テキストボックス系のwidthが追加された。
これでテキストボックスのフォントをメイリオにしたときビヨーンと広がる問題が解消される。

input[type=text], input[type=password], textarea{
    width: 12.25em;
    *width: 11.9em;
}

こうして見ると、grids.css以外は大きな変更は少ないようだ。
del, ins, sup, subなんかはあまり使っていないだろうし。buttonが好きな人には影響あるのかな？
base.cssでbodyのmarginがなくなったのは影響があるかもしれないが、これもそのまま使っているサイトは少ないと思う。


（2011/2/9 追記）
base.cssのinput[type=text]とinput[type=password]の追加は影響する場合あり。属性セレクタより弱いセレクタで横幅を指定しているページでは、このbase.cssのスタイルに負けちゃうように変わっちゃうから。