ここから本文です

iPhone、iPadにおける等幅フォントの扱いについて質問です。 ウェブサイトで記...

bur********さん

2010/7/121:13:17

iPhone、iPadにおける等幅フォントの扱いについて質問です。

ウェブサイトで記号(主に■や□)を使ったアスキーアートを表現しようと思っているのですが、iPhone、iPad内臓のsafariで上手く表示でされません。

CSSのfont-familyでmonospaceなど等幅フォントを指定するとパソコン用のモダンブラウザではちゃんと表示されます。

しかしiPhone、iPad用のSafariだけ、■や□の横幅が狭くなってしまい、くちゃっとなってしまいます。
CSSを切り分けて対応するか、ピンポイントでfont-familyの指定を変更しようと思っているのですが、どのような指定をすれば良いか教えてください。

例)このような図を想定しております。
<span style="font-family:"MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono, monospace;">■■■■■<br />■■■■■<br />■■■■■<br />■■■■■<br />■■■■■<br /></span>

どうぞよろしくお願いします。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
7,313
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

szk********さん

2010/7/809:46:16

恐らく原因はiPhoneのフォントです。
例で指定されているような、MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono, monospaceは、iPhoneにはインストールされていません。

参考:iPhone にインストールされているフォント一覧
http://d.hatena.ne.jp/tanemori/20080811/iPhoneFonts

この中から指定しましょう。

ただ、ヒラギノなどは一般的にはWindows機には入っていないことが多いので、PCとiPhone両用だとキビシイかもしれませんね。その場合はUAで判定して別ページにリダイレクトするとかCSSをわけるとか必要になってくると思います。

あるいは、@font-faceなどでWebフォントを使うのもアリといえばアリですね。

この質問は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる