![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
現在会社のWebをリニュ-アル製作中です。主な製作作業自体はプロの方に行ってもらっております。そこで、これ(Web)に使用するFONTについて只今試行錯誤、判断に苦しんでおり、部外からも色々なご意見をお聞きし勉強、参考にしたく質問させていただきます。
Webは閲覧者のブラウザの種類、バ-ジョン或いはOSの種類等の環境によってモニターに表示される見え方が異って来ることは何となく知っていたのですが、その差異が場合によってはかなりのレベルになるという事を思い知りました。例えばFONTが「MSゴシック」の場合、「MSPゴシック」の場合、「メイリオの場合」等で前記のブラウザやOSによって部分的に改行位置や表示に違いが出てくるようです。従って製作段階で細かな部分まで(改行位置や見た目のバランス、枠の大きさ」等々を)必死で綺麗に調整しても、結局ブラウザ等の環境によってはこの努力が無駄なものになります。こういったことはWeb製作の業界では当然のテ-マでしかしなかなか決定的な対策がない厄介な部分らしいのですが、新しくするWebなので今後を見据えた最善な方法を施工しておきたいと思うのです。
現在多くの種類のブラウザやそのバ-ジョンそしてOSが存在するので、全てにおいて同じ表示をするように調整したり(製作段階で)確認作業を取り入れていてはいくらでも手間と工賃がかかって仕方ないので有る程度「無難」な仕様にしておこうとした場合、色々と調べるとやはり基本セオリ-的には「MSPゴシック」又は最近では「メイリオ」を選定するという事になるようなので、一応「メイリオ」を選定してみたのですが、確かにこのFONTは綺麗で良いのですが、問題はWin XPユ-ザ-でIE8以前を使用しているユ-ザ-なのです。メイリオはXPには標準装備されていないのでメイリオを本来の容で見えるようにしようとすると自分でメイリオFONTをOSにインストしなければなりません。おまけにそれをしただけでは見た目が非常に荒く汚いため、OSの「画面デザインをClearTypeに」設定変更しなければなりません。ここまでしてやっとXPユ-ザ-は「メイリオ使用のWeb」を正しい容で見ことが出来る訳ですが、実際現実的にメイリオという言葉自体一般の人は知らないでしょうし、ましてやFONTをいんすとして、設定して・・・というような事を一般的ユ-ザ-の大多数はしない/できないと思います。XPは今や古い部類のOSなので今後を見据えたWebにすると言う事であれば、この際二の次と捉えるという考え方もあるかも知れませんが、しかしXPユ-ザーはまだまだ多いように感じますので、これらのユ-ザ-の事を無視できないのではとも思い、悩んでいます。実際最前線の(Web製作)現場では使用FONTとしてメイリオはどのような需要、というか標準化しているのでしょうか? やはりおとなしく無難に「MSPゴシック」を使ったほうが良いでしょうか?
アドバイス頂けるととても助かります。 宜しく御願い致します。
No.4ベストアンサー
- 回答日時:
こんばんは。
素人ですが文字が好きで、ブログをつくってみたら想像以上に表示が崩れてしまい、ウェブって試行錯誤の連続だなぁ――と思っている者です。* {
font-family:
メイリオ, Meiryo,
'MS Pゴシック',
sans-serif;
}
さて、ウェブの書体は CSS で指定していきますが、必ずしも一種類に絞る必要はありません。たとえば上記の CSS では、メイリオがあればメイリオで、メイリオがなければMS Pゴシックで、MS Pゴシックがなければ sans-serif(何らかのゴシック体)で表示されます。このように複数書体を順番に並べておけば、Vista 以降ならメイリオ、XP 以前ならMS Pゴシックと振りわけられます。
* {
font-family:
メイリオ, Meiryo,
'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
HiraKakuProN-W3,
'MS ゴシック',
monospace;
}
ただし、メイリオとMS Pゴシックとでは字幅が異なるため、見た目が崩れるかもしれません。また、アップル製品には【ヒラギノ】という書体がついてくるため、メイリオを指定しても無意味です。このような点も考慮した結果、私は上記のような CSS を書いています。もちろん、拡大・縮小などでズレますが、何もしないよりはマシかと。逆にいえば、少しくらい拡大されても平気なように、ゆとりのあるレイアウトが必要なのかな――と思います。
なお、世間的には「ウェブの字なんて読めれば何でもいい」という意見が多く、質問者さんのようにこだわる方は滅多にいません。これは非常に残念なことで、ウェブが出版に追いつけない原因のひとつだと考えています。
そこで昨今では、Web フォント(下記のフォントプラスなど)や、CSS3 といった新しいレイアウト技術も始まりつつあります。もっとも、日本語は複雑なことばであるため、これらの技術は発展途上です。しかしながら、将来的には紙の書籍と同等の見た目がウェブでも保証されてほしいし、ウェブだからズレて当然といった考えも、過去のものになってほしいなと願っています。
◆標準の日本語フォント / もうパンツはかない
http://rinrin.saiin.net/~aor/fonts/fonts
◆font-family-スタイルシートリファレンス
http://htmq.com/style/font-family.shtml
◆FONTPLUS|フォントプラス
http://webfont.fontplus.jp/
はじめまして。このたびは非常に貴重な知識をご教授下さり。誠に有りがたく感謝しています。書いて頂いた内容は全て私にとって参考、勉強になりました。 ご自分の努力で試行錯誤しながらも生きた知識を身につけていっておられる様子が伝わります。見習いたいと思うばかりです。どうもありがとうございました。
No.3
- 回答日時:
ご存知の情報かもしれませんが、念のため。
モリサワ「TypeSquare」(クラウドフォント)
http://www.morisawa.co.jp/font/products/typesqua …
グラフィックデザインのイメージが強い方や文字へのこだわり
(ブランディング)がある会社は導入するかな、と思い一応
デモなどで見た製品です(確か今年リリ-スしたものです)。
わかりやすい解説
http://web-tan.forum.impressrd.jp/e/2012/09/03/1 …
個人的には(お金を払ってまでなぁ)と思うのですが、
上記のようなこだわりがある企業さんで予算的に問題
がないなら良いのかな、と思います。
(技術的には悪くないと思うので、上記URLにあるように
今後普及していく可能性もあるとは思います)
以上、参考まで。
No.2
- 回答日時:
サーバーへインストールするウェブフォントという手段もありますが、表示が遅くなります・・・
-----------------
一般的には、
無指定が一番多く、正攻法です。
次にメイリオ+複数指定で、MS Pゴシックのみ(単独)の指定はアマちゃんです。
CSSフォント指定では、複数フォントを順に指定できますので、
環境に無いフォントがあれば、次順のフォントを表示する仕様です。
なので、macユーザー用フォントも絡めて羅列すればよいです。
最後に、ゴシック指定の(sans-serif)を入れます。
但し、
メイリオ指定で、旧OSのClear Type(アンチエイリアシング)問題もありますが、
仰る通り、
メイリオをインストールするような人なのに、この問題を知らない方が少ないです。
(まあ、XPは2014年迄に一気に減るでしょうが)
また、
「メイリオ 悩ましい問題」があります。
↑↑語句で検索するとわかるでしょうから割愛しますが、
MS Pゴシック以外の問題もあり、正解はありません。
当方でのメイリオ指定の場合は、
~~~{ font-family: "メイリオ",~,~,~,~,~,~,~,sans-serif}
* html ~~~{ font-family: "MS Pゴシック";}
としています。1つの手段です。
因みに、改行位置がずれる問題は、ウェブでの改行の認識が間違っています・・・
#1さんもご指摘の通り、文字サイズ変更の問題があるので、何処で改行されるかは貴方が決める問題ではないのです。
ユーザーが見やすいように変更するのです。
>只今試行錯誤、判断に苦しんでおり、
この辺の話は、その業者が十分検証しているはずですので、お任せすれば良いです。
(知らなければ、その業者への依頼は辞めましょう)
悩む必要があるのでしょうか?
悩み処が間違っています・・・ 貴方の知らないレンダリング問題でもこのような差異問題が多々あってフォント程度で悩んでいたら、これらの全ての差異を知ったら過労死しますよ。
コンテンツで悩んでください。
こんにちは。早々に的確且つ詳細なコメント頂きまして誠にありがとうございます。
とても勉強、参考になる内容です。 そうですね、大げさに執拗に拘る部分でもないのかも知れませんね。プロがすべき領域にまで素人クライアントが絡んでくると、お互いにとってろくな事がありませんよね。仰る通りコンテンツが大事ですので私はそこに集中していきたいと思います。良いコメントどうもありがとうございます。
No.1
- 回答日時:
WEBサイトでは、OS別に利用するフォントをCSSなどでフォント指定をすれば可能なのですが、ブラウザでの「拡大」「縮小」によって横幅などがずれてしまいますので、ずれることを前提に設計をしたほうがいいと思います。
また、どうしてもフォントがもつイメージなどからフォント指定をしたい場合には、文字をPNGにて表示し、ALTタグに文字を設定するのが通常の使われ方です。
御世話になります。早速のコメント、誠にありがとうございました。
なるほどユ-ザ-側での設定(拡大縮小)でも横幅がずれたりしますよね。
仰る通り「ずれることを前提に」設計をという事ですね。そうします。
全文とても参考になりました。どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
CSS SafariでMS P ゴシックを表...
-
似ているフォント(Win⇔Mac)
-
Wordで、指定したフォント...
-
MsgBoxについて
-
このフォントはなんというフォ...
-
英語版OSでの遊明朝、游ゴシック
-
Eclipseで文字がずれます。
-
Excel:一部のフォントでセルの...
-
gvimでフォント、色テーマ設定...
-
VB.NETでフォントのカラーを変...
-
VB6 LISTVIEWで項目の色分...
-
ホームページをTeraPadで日本語...
-
なぜ「ろ」には「¥」がないの...
-
Webサイトのフォント
-
携帯(i-mode)でも使える無料カ...
-
UNICODE
-
作成済みのホームページのフォ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
MsgBoxについて
-
似ているフォント(Win⇔Mac)
-
「MS Pゴシック」と同じ幅の...
-
英語版OSでの遊明朝、游ゴシック
-
C# Font GdiCharSet
-
font-family の記載方法
-
メールで、榊の文字を木辺に神...
-
ワードでゴシックの文字を太く...
-
Excel:一部のフォントでセルの...
-
CommonDialogでの、キャンセル...
-
逆向き/(スラッシュ)の入力方法
-
エクセルの代替フォントを指定...
-
Visual C++ 6.0 行番号の表示
-
CSS SafariでMS P ゴシックを表...
-
ホームページをTeraPadで日本語...
-
printf("文字列\\n")が円マーク...
-
このフォントはなんというフォ...
おすすめ情報