- 2007-02-17 (Sat) 23:23
- CSS
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」で表示されてしまう。
▼sans-serifのみ指定すると…
body { font-family : sans-serif ; }
▼euc-jpの場合
▼utf-8の場合
そんな変な動きをしてしまうのでfont-familyにはきちんとフォント名で指定する必要がある。ところがここでもブラウザによって解釈がまちまちなのできちんと指定しないと意図通りには表示されない。
フォント名で指定する場合は ‘MS Pゴシック’ などフォント名が日本語のものや間にスペースが入っているもの(’Times New Roman’等)は引用符(”や’)で囲う。ちなみにsans-selifとか総称ファミリー名は引用符で囲ってはだめです。また日本語指定する場合にはCSSファイルの頭に「@charset ‘UTF-8′;」(UTF-8の場合)とつけましょう。
しかしここでも問題があって、まずSafari では ‘ヒラギノ角ゴ Pro W3′ などフォント名に日本語が含まれるものは無効になってしまう。なのでSafariでヒラギノ角ゴを指定したい場合は ‘Hiragino Kaku Gothic Pro’ と表記しなくてはならない。
またFirefoxでは ‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには『’ヒラギノ角ゴ Pro W3′ , ‘Hiragino Kaku Gothic Pro’』と両方表記しなくてはいけない。Vistaのメイリオに対応する場合も日本語で指定する必要がある。
またMacのIE5は以下のような癖がある。
Mac版Internet Explorer 5 ではフォントの複数指定は無効のため、第一候補のフォントが環境にインストールされていない場合は初期値のフォントで表示します。さらに、欧文フォント名が指定されていても、要素に個別に lang属性(XHTML では xml:lang属性)で欧米の言語を示す “en” などを指定しなければ表示には反映されません。
(「font-family CSS辞典」より)
ブラウザはfont-familyで指定したフォントを左から順番に参照し、条件にあったものを設定するので、指定する順番にも気をつけないといけない。では具体的にはどう指定するのがいいのか。
とりあえずデフォルトのフォント(WindowsXPでは ‘MS Pゴシック’ 、WindowsVistaでは ‘メイリオ’ 、Macでは ‘ヒラギノ角ゴ Pro W3′ )で表示させる事を考えてみる。そこで注意したいのは、「Microsoft Officeの入ったMac」というケース。それには ‘MS Pゴシック’ も一緒にインストールされているので、こういった環境でヒラギノよりも前に ‘MS Pゴシック’ が指定してあるとMacでも ‘MS Pゴシック’ でページが表示されてしまう。それらを踏まえると以下のような書き方が問題ないように思える。
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
だがこれだと「Windowsにヒラギノフォントをインストールしている」というケースでは、Windowsなのに ‘ヒラギノ角ゴ Pro W3′ で表示されてしまう(アンチエイリアスがかからずバランスが悪いし、小さい文字だとギザギザ)。それを避けるにはWindows用とMac用に別途CSSを用意するしかない。
var os = (!navigator.appVersion.indexOf ("Win")) ? "win" : "mac";
document.write ('<link rel="stylesheet" xhref="/css/font_' + os + '.css" type="text/css" />');
↑こんなものを書いて、例えば「site_styles.css」みたいなレイアウトするCSSファイルとは別に「font_win.css」「font_mac.css」というCSSファイルをフォント指定用として別途用意する。
▼font_win.css
body {
font-family:'メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
▼font_mac.css
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}
とりあえずこれでデフォルトのフォントで表示できるようにはなる。
しかしフォント用だけに別途用意するのも煩雑だし、そもそも指定した以外のフォントで見たい人には、font-familyなんてありがた迷惑であったりもして悩ましいもんです。
ちなみに自分は「ヒラギノ角ゴ」よりは「ヒラギノ丸ゴ」が好きだったりします。角ゴより文字が太くて読みやすい気がするので。
(追記)むーん、とは言っても「Windowsにヒラギノフォントをインストールしている」っていう環境まで想定する事はあまり必要はないかも。web制作会社の一部ではあるかも、ぐらいですかね。そう考えるとやっぱり定番の以下のようなものがいいのでしょう。※Osakaの指定は入れるかどうか迷ったけど、MacOS9IE5ではfonto-familyの複数指定は無効になるので、特に指定する必要はないのではと思って外しました。
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
- Newer: CSSとprototype.jsで「ぶら下げ」レイアウトをやってみた
- Older: 遅すぎた<button>タグとの出会い…
Comments:13
- 通りすがり 07-03-12 (Mon) 21:31
-
> Windowsなのに ‘ヒラギノ角ゴ Pro W3′ で表示されてしまう(アンチエイリアスがかからずバランスが悪いし、小さい文字だとギザギザ)
僕の場合は、わざわざWindowsに「ヒラギノ角ゴ」をインストールするような人はアンチエイリアスがかかるように設定しているのではないか、という前提で「ヒラギノ角ゴ」を前のほうに持ってくるようにしています。
自分の場合はWindows XPに「メイリオ」を入れてスクリーン フォントの縁を滑らかにするを「ClearType」に設定して使ってます。
- はてブからきたデザイナ 07-03-14 (Wed) 9:29
-
> まず、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」で表示されてしまう。
自分の場合は、上記が”勝手にフォントが(表示が)変わってしまうバグ”でなはくそれがブラウザの”仕様”だと捉えています。むしろ制作者の都合で勝手にページの文字など変えるべきではないと。
Winヒラギノ有り環境ですが、ヒラギノのサイトを見るとなんかヤですね…メイリオは慣れてきましたが、ヒラギノだけはダメです。
結論。何も指定しない。ありのまま、見る人に任せる。それが自然。だと信じて、font-familyは指定ナシで制作しております。
でもやっぱり難しい問題ですよね。
- 通りすがり2 07-03-14 (Wed) 11:06
-
通りすがりで失礼いたします。
Win、IE6の設定でWebページのフォントを MS UI Gothicにしていて(ユーザースタイルシートに非ず)、ヒラギノもインストールしているこの身では、日本語がMS UI Gothic、英数字がヒラギノで表示されるという状態になっています。
日本語はMS UI Gothicの比較的パキパキした文字で、英数字だけアンチエイリアスのかかった比較的ぼやけた文字で、これを一緒に文字として認識していくのはあまり楽ではないです。
この混植状態が意図されているものではなさそうだと思ったので気になってコメントしていきます。直してくれとうい要望というよりは、閲覧状態のうちの一ケースとして参考になりましたら。 - loconet 07-03-18 (Sun) 2:00
-
> 僕の場合は、わざわざWindowsに「ヒラギノ角ゴ」をインストールするような人はアンチエイリアスがかかるように設定しているのではないか、という前提で「ヒラギノ角ゴ」を前のほうに持ってくるようにしています。
なるほど、わざわざヒラギノを入れるくらいだから、ヒラギノで表示させたいと思ってる人もいるのでしょうね。
自分の場合は、仕事上必要でヒラギノをインストールしたら、あるサイトで意図せずヒラギノで表示されてしまったので、必ずしも望んでというケースだけではないと思うのです。難しいですね。> 結論。何も指定しない。ありのまま、見る人に任せる。それが自然。だと信じて、font-familyは指定ナシで制作しております。
はてブからきたデザイナさんの意見もわかります。確かに見る人に任せるのが理想ではあります。ただ、ブラウザの仕様で表示されたもの、と見る人が望んでいるものが同じかというとそうでもないと思います。その環境の違いを吸収した上で、見る人に任せるというのが一番いいのかなと思います。> 日本語がMS UI Gothic、英数字がヒラギノで表示されるという状態になっています。
通りすがり2さんの混植状態も興味深いです。今の設定では英数字のみMS UI Gothicよりヒラギノが優先されてしまうということでしょうか。うーむ、ちょっと再現して確認してみます。しかしWindowsにヒラギノをインストールしてる人は結構いるんですね。参考になりました。 - aoi_gen2 07-07-10 (Tue) 21:55
-
この記事にトラックバックさせていただいたaoi_gen2と言います。
> 日本語がMS UI Gothic、英数字がヒラギノで表示されるという状態になっています。
私の場合、英数がメイリオで、日本語がMS UI Gothicです。
これは、
「UnicodeやUTF-8で記述した文書では、OpenTypeフォントで2バイト文字を表示することができない。」
http://cssbug.at.infoseek.co.jp/detail/winie/b122.htmlより引用
のためだそうです。さらに、自分の経験則なんですが、IE6はフォントの複数指定しても、最初にマッチしたフォントしか有効にならないようです。
加えて、上記OpenTypeフォントのバグの場合、一番最後に指定されたsans-serifが有効になるようで、結果、1バイト文字がメイリオで、2バイト文字がsans-serifであるMS UI Gothicになるようです。
- aoi_gen2 07-07-15 (Sun) 2:18
-
連続投稿失礼します。
フォントの混在を解決する方法として、
htmlタグのなかに、lang=”ja”を記述すると、すべてメイリオで表示できるようです。 - loconet 07-07-18 (Wed) 22:34
-
>「UnicodeやUTF-8で記述した文書では、OpenTypeフォントで2バイト文字を表示することができない。」
これは知りませんでした。なるほど。>さらに、自分の経験則なんですが、IE6はフォントの複数指定しても、最初にマッチしたフォントしか有効にならないようです。
IE6はそのようですね。>htmlタグのなかに、lang=”ja”を記述すると、すべてメイリオで表示できるようです。
なるほど、貴重な情報ありがとうございます。メイリオ対応もそろそろ真剣に考えないといけないと思っていた所だったので参考にさせていただきます! - りごん 07-10-18 (Thu) 20:40
-
はじめましてこんばんは。
WinとMacで別のスタイルシートを用意しなくても複数指定が無効なMacIe5用にcssハックを使ってフォント指定を上書きすればいいのでは…?と単純に思ったのですが、それだと適用されないのでしょうか。
macを所持していないので確認できないのですが例えばbody {
font-family:’メイリオ’,Meiryo,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,'MS Pゴシック’,sans-serif;
/*\*//*/font-family:’ヒラギノ角ゴ Pro W3′;/**/
}としてもフォント指定がmacIe5のみ上書きされたりしないのですか?
- 通りすがりの者 07-11-25 (Sun) 7:05
-
Macでは確かにヒラギノ丸ゴがいちばん読みやすくて好きなのですが、このフォントを指定していると、Windows+Officeの環境でHG丸ゴシックM-PROで表示されてしまい、見にくくなってしまいます。
管理人さんはどう指定されているのでしょう。 - loconet 07-12-02 (Sun) 0:14
-
>WinとMacで別のスタイルシートを用意しなくても複数指定が無効なMacIe5用にcssハックを使ってフォント指定を上書きすればいいのでは…?と単純に思ったのですが、それだと適用されないのでしょうか。
WinとMacを分けたのは、ヒラギノが入っているWin対策なので、MacIe5は考えていなかったです。MacIe5のみ上書きする必要はないのかと思います。OSで分けるCSSハックがあればよいのですが。>Windows+Officeの環境でHG丸ゴシックM-PROで表示されてしまい、見にくくなってしまいます。
あ、そうなんですか、それも不思議な現象ですね。ちょっと検証してみたいと思います。 - 通りすがりの者 07-12-15 (Sat) 19:15
-
私の理解が足らないのかもしれませんが、Windows XP の font-family 指定では名前が正確でなくても、似た性質のフォントがパソコン内にあるとそのフォントが代替フォントとして使われるようです。(OSのわりと低レベルなAPIの内部の余計なお世話機能?) 問題なのは、 font-familyリストの後方には正しいフォント名があるのに、リストの先頭にあるフォント名の代替フォントのほうが優先して使われてしまうということです。
本当は「デフォルトのフォントでいいじゃん」と言いたいのですが、Macのブラウザでデフォルトフォントが明朝体(セリフ系)になっているものがあり、そのまま使っているユーザーも多そうなので、Macユーザーにはせっかくだったらヒラギノ丸ゴで読ませてあげたいのですけどね。
こんど発売される Mac 版 MS-Office ではメイリオがインストールされます。これからは、Macでメイリオが出ないように制御しなければならず、ますます悩みが増えそうです。
- Anonymous 08-02-17 (Sun) 18:37
-
まさしく同感です!
Winでヒラギノが表示されることは本当に気持ち悪いので回避出来ないかと常々考えていました。
(私は、Winにosakaも入れているので、ブラウザもまちまちに、ますます気持ち悪いサイトが沢山あります!)
このへん、多くの人はそういう環境では無いのでなかなか理解されないでしょうが、Winにアドビをインストールしているデザイナーであれば、当然の疑問ですよね。
それから、apple.com/jpでは、振り分けが無さそうなのに、Mac-サファリではヒラギノ、Win-IEではMS Pゴシックで表示されている!アラ、お手本??と思ったのですが、よく見るとFireFoxは未対応でした。
Firefox無視っていうのは、恥ずかしいことだと私は感じてしまいますが、ますます多様化した考え方になってゆくのでしょうね。同じ気持ちの方がいらっしゃると思い、嬉しくて書き込んでしまいました。
また楽しみに拝見させて頂きますね! - anon 08-03-10 (Mon) 9:42
-
私も一時期Macでヒラギノを出すことに凝りましたが、ブラウザの仕様がどんどん変わるのについていくのが大変で、固有フォント名は指定しない、ユーザの選択に任せる(ブラウザを選択するという選択もアリ)方針に変えました。ニュースサイトを調べると指定しないのがいまの流れかなとおもったこともあります。いまだにMovableTypeなサイトはフォントが指定されているところが多いですが…。
MacのSafariとFirefoxでは、bold体の扱いが違います。SafariではWeightを含んだフォント名を指定しなければならなかった代わりにきれいなフォントで表示される一方、FirefoxはWeightの重いフォントを使わず汚い自家製BOLD加工をしてしまうので、回避するためのCSSが煩雑でした。
私はいまMacのブラウザの設定はメイリオを指定しています。読みやすいので。サイトでヒラギノが指定されているのなら許せるけど、サイトでMSゴシックが指定されていたら許せないですね、たぶん。
ちなみに、メイリオ+Firefox(Mac)には「…」が豆腐に化けるという問題があります。
Trackbacks:28
- Trackback URL for this entry
- http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html/trackback/
- Listed below are links to weblogs that reference
- CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 from webデザイナーのナナメガキ
- trackback from LifeHacks with Aipo 07-03-14 (Wed) 22:52
-
CSSでテキストフィールドの見た目を制御する
CSSでフォームの見た目を制御するで書いたとおり、フォームの見た目を調整していきます。 ウィンドウズのIE6,IE7,Firefoxでチェックしていきます…
- trackback from Fledgling Blog 07-07-06 (Fri) 0:45
-
フォントの指定
今私がメインで使用しているブラウザはIE6.0です。 それで、今日気づいたのですが、IE6ではCSSでのfont-familyで複数指定しても、最初にマ…
- trackback from Likeなライトノベル 07-07-14 (Sat) 14:04
-
CSSによるフ読みやすいォントの指定
一応文章を書いて、人に読ませるサイトとして、できるだけきれいなフォント(普段字が…
- trackback from なにわCG道 07-07-23 (Mon) 22:05
-
文字コードがUTF-8だとフォント指定が無視される
仕事でWebサイトの編集作業をしていて、つまづいた。CSSファイルやhtmlファイルのどこにもフォント指定がないのに、なんで英数字だけセリフ付きフォントな…
- trackback from ejanの24/7 07-09-21 (Fri) 8:05
-
フォント変えたよ
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,'メイリオ’,Meiryo,’Tahoma’…
- trackback from ARTIFACT ―人工事実― 08-03-23 (Sun) 17:54
-
CSSでのフォント指定…
Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実―
この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Saf (more…) - pingback from links for 2008-03-23 « 個人的な雑記 08-03-24 (Mon) 7:20
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 (tags: browser fonts webdesign css) […]
- trackback from モカモカ工房 08-04-11 (Fri) 11:11
-
Macでofficeを入れたらDreamweaverとFir…
Macを(今さらながら)10.3(panther)から10.4(Tiger)にア… (more…)
- pingback from フォント:スタイルシートでのメイリオ指定まとめ | 奈良から拓くホームページ 08-05-29 (Thu) 4:28
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ […]
- trackback from 生活の記録 08-09-21 (Sun) 4:52
-
[win]Windows版Safari + メイリオ…
アパートでは何故かVMware上のWindowsしかネットワークにアクセスできないので、最近はWindows版Safariのお世話になることが多い。文字が読みやすいか (more…)
- pingback from フォント:スタイルシートでのメイリオ指定まとめ | The Memory of My Future 09-01-14 (Wed) 7:17
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ […]
- pingback from フォント:スタイルシートでのメイリオ指定まとめ - アイデアブログ: あきらめないをカタチにする 09-04-03 (Fri) 9:09
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ […]
- pingback from ponnao-clip(wp版) - CSSフォント設定検証 09-07-24 (Fri) 11:36
-
[…] ◆以下のサイトで推奨しているもの ★CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ font-family: font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif; […]
- pingback from CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ 09-11-08 (Sun) 17:16
-
[…] Read the original here: CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ […]
- pingback from cssのフォント指定を完璧にするぜ2009 winter | DAICHIFIVE blog 09-12-10 (Thu) 13:01
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 […]
- pingback from cssのフォント指定を完璧にするぜ2009 winter | DAICHIFIVE blog 09-12-10 (Thu) 13:02
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 […]
- pingback from links for 2010-02-21 | ニジュウリョク 10-02-21 (Sun) 23:03
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ (tags: font css) […]
- pingback from CSSでフォントの設定をする « TAKASHI178 WEB DESIGN PORTFOLIO 10-04-14 (Wed) 14:33
-
[…] 参考:CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ CSSでのフォント指定について | デベロッパーセンター […]
- pingback from Wordpress ビジュアルエディタのフォント変更 WP2.9.2 | 国道58号線をのんびりと行く 10-05-13 (Thu) 1:42
-
[…] web デザイナーのナナメガキ さんのページが参考になりました。 http://loconet.web2.jp/blog/ar……amily.html […]
- pingback from LIFE TAM - font-familyについてのメモ。 10-10-03 (Sun) 0:50
-
[…] 今回WordPressでのブログスタートにあたって、「font-familyの指定は何が良いの?」って思って調べてみました。 最終的にこのブログに辿り着いてここのを丸パクリさせてもらいました。 CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ とりあえずこれでfont-family問題はもう大丈夫かな? 「Windowsでヒラギノフォントをインストールしている」というケースではヒラギノ角ゴ Pro W3が表示されてしまうとの事ですが、そこまで気にしなくても良いかなと思ってます。 ちなみにCSS Nite LP9 連動 第2回コーディングコンテストの応募作品の最優先日本語フォントの割合は以下のようだそうです。 メイリオが圧倒的。 下記が一覧だそうですが、確かに圧倒的です。 資料:日本のコーダーのfont-family指定 | ウェビンブログ まぁ、フォントについてのメモは以上。 […]
- pingback from フォントとCSS : Typography | FindxFine -Web制作に関するメモ- 10-10-27 (Wed) 6:30
-
[…] »CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ フォントに限らずWebデザインに関する勉強になるブログです。 […]
- pingback from フォントとCSS : Typography | FindxFine -Web制作に関するメモ- 10-10-27 (Wed) 6:31
-
[…] »CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ フォントに限らずWebデザインに関する勉強になるブログです。 […]
- pingback from WordPressを楽しむ | twentytenのfontを変更! 11-02-08 (Tue) 3:57
-
[…] まぁ、fontについては、正直、悩ましい限りなのですが、こちらのwebデザイナーのナナメガキさんのサイトも参考になると思いますので、fontで悩んでる方が、いらっしゃれば、ググって調べてみてください。 (すげ~、、、。PR3ですよ。トップページがPR2なのに・・・。) […]
- pingback from ユウノマニアックス 11-06-17 (Fri) 23:36
-
[…] フォント関連 14,861 free fonts for Windows and Mac – FontSpace www.fontspace.com Download free fonts | ShowFont.net | Download 10,000 Free Fonts www.showfont.net 商用可も有り!6000を超えるフリーフォントをダウンロードできる「GMK Free Fonts download」 | DesignDevelop design-develop.net 無料で商用利用可能な漢字が使えるフォント7選 – とりあえず9JP 9jp.info Photoshop Vip » 最近公開されたフレッシュなフリーフォント30個まとめ 2011年2,3月度 photoshopvip.net dafont.com www.dafont.com Photoshop Vip » ダウンロードしておきたい100個のフリーフォント保存版まとめ photoshopvip.net Photoshop Vip » 商用可、追加しておきたいピクトグラムをモチーフにしたフリーフォント11個まとめ photoshopvip.net 画像で使われているフォントを調べる方法 | POP*POP www.popxpop.com Webデザイナーなら知っておきたいフォントに関する10個のウェブアプリケーション | impowiki.com impowiki.com CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ loconet.web2.jp ITキヲスク | 漢字が使える日本語フリーフォント40選 smkn.xsrv.jp Fonts2u.com ja.fonts2u.com 自由に使えるオープンソースの日本語フォント – SourceForg フリーフォントダウンロード 最近リリースされた高品質なフリーのデザインフォント -2011年2・3月 | コリス coliss.com 無料で使えるオシャレで個性的なフォント60選 – GIGAZINE gigazine.net 「フリーで使えるフォントのまとめ」のまとめ – とりあえず9JP 9jp.info もっとも有名な世界のフォントのエントリーまとめ20選「20 Most Famous Fonts (And How to Get Them)」 | DesignDevelop design-develop.net 細みでスタイリッシュなフリーフォント50 [K’conf] kenz0.s201.xrea.com […]
- pingback from 充実した感 一社に対して95% おまたせしている所5% この差を埋めなくては・・・! 備忘帳2 #DENMI | DENMI.NET_WP 11-10-10 (Mon) 6:33
-
[…] CSSのfont-family […]
- pingback from 充実した感 一社に対して95% おまたせしている所5% この差を埋めなくては・・・! 備忘帳2 #DENMI | DENMI.NET_WP 11-10-10 (Mon) 6:33
-
[…] CSSのfont-family […]
- pingback from CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ » Web Design 11-12-05 (Mon) 3:08
-
[…] CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ […]
- pingback from WP 小粋空間さんのスタイルシートをちょこっと変更 - こうふくねっと・こうふくのえとせとら 12-02-12 (Sun) 22:25
-
[…] ヒントは、こちらでもらいました。 「webデザイナーのナナメガキ」さんの、 CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 しかしここでも問題があって、まずSafari では ‘ヒラギノ角ゴ Pro W3′ などフォント名に日本語が含まれるものは無効になってしまう。なのでSafariでヒラギノ角ゴを指定したい場合は ‘Hiragino Kaku Gothic Pro’ と表記しなくてはならない。 またFirefoxでは ‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには『’ヒラギノ角ゴ Pro W3′ , ‘Hiragino Kaku Gothic Pro’』と両方表記しなくてはいけない。Vistaのメイリオに対応する場合も日本語で指定する必要がある。 […]