【悩み中】Safari/Google Chrome(向け)の 等幅フォント設定はどうしたらいいの?【解決かも?】

【2013.7.17 追記】解決したかも?
font-family: monospace
フォント・ファミリーを指定する場合も1つだけではダメで、monospace, serifなどもう一つ必要。normalize.cssでserifが使われているのは単にジェネリック・ネームの中で一番短いからだと思う。

な、なんだってー!(AA略)

  • <pre style="font-family:monospace;font-size:100%;">
aiueoAIUEO
あいうえお
  • <pre style="font-family:monospace,serif;font-size:100%;">
aiueoAIUEO
あいうえお
  • 【2018.12.20 追記】<pre style="font-family:monospace,monospace;font-size:100%;">
aiueoAIUEO
あいうえお
  • div + p + <code style="font-family:monospace;font-size:100%;">

aiueoAIUEO

あいうえお

  • div + p + <code style="font-family:monospace,serif;font-size:100%;">

aiueoAIUEO

あいうえお

  • 【2018.12.20 追記】div + p + <code style="font-family:monospace,monospace;font-size:100%;">

aiueoAIUEO

あいうえお

あらま、2番目指定は無視されますがサイズが他のブラウザと同様になったYO!

なんかバグみたいな裏ワザみたいな気もしますが(笑)。

Windows 版 Safari/Google Chrome の等幅(固定幅)フォントの設定はこんなかんじですよね。

  • Safari - Courier New 13px
  • Google Chrome - MS ゴシック 13px
  • <pre style="font-family:monospace;font-size:100%;">
aiueoAIUEO
あいうえお
  • div + p + <code style="font-family:monospace;font-size:100%;">

aiueoAIUEO

あいうえお

2011.5.14 追記

もしかして仕様変更されてるかな?

  • span style="font-family:monospace;font-size:100%;"

Monospace モノスペース

  • code 要素

Code 要素

  • pre 要素
<li><span style="font-family:monospace;font-size:100%;">Monospace モノスペース</span></li>

pre, code など等幅的(?)要素、あるいは font-family:monospace 指定時に適用されます。だから、 precode 要素の表示は他のブラウザに比べ明らかに小さい表示となるわけです。 font-size を小さく指定するとイワユル「豆文字」になってしまうのであります。

結論から言うと font-size は指定せず(大きく指定したら他のブラウザではデカ表示になっちゃいます)、そのままが楽みたいです。

というわけで、ちょっと実験中...

  • 一般名 (monospace) ではなく、フォント名を指定すれば標準サイズ(16px)となる
  • Safariでは monospace を指定しても和文は標準フォント(MS Pゴシック )13px

フォント名を指定すれば標準サイズになるんで解決策がありそうな気もしますが、monospace が適用されちゃうとだめだしなぁ。

初期設定状態でなんとかなっても、ユーザー側で変更した場合に対応できるかとか。

ちなみに現在のここの設定はこんなかんじで実験中...

【追記】あちゃあちゃあちゃー!、Osaka って等幅ちゃうやん!orz...修正しますた。

pre,
code,
var,
kbd,
em,
.ms,
table.memo,
div.sidebar table.calendar,
div.commentshort span.timestamp a {
font-family: 'MS ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
_font-family: monospace;
}

.backslash {
font-family: 'VL ゴシック','VL Gothic','Courier New',Courier,monospace !important;
}

.kuma {
font-family: 'MS Pゴシック','IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
overflow: auto;
margin: 1em;
padding: 0.5em;
_padding-bottom: 1em;
background-color: #fff0f0 !important;
line-height: 1.1;
font-size: 1em;
border: inset 1px #fff;
}

あうぁぅ、全角混じってたので修正orz

等幅フォントの設定変えてる人、ゴメンナサイゴメンナサイ!

はて、うまい手はないものか。。。

以下追記...

この方法の問題点
  • フォントの指定はイクナイ!、作成者の自己満足ですぅー!

はーい、わかっとりますです。ブラウザの設定で等幅を別フォント指定してる人もいますよね。この方法だとユーザー側の設定を無視しちゃいますですね。

まぁ、ユーザー側の対処としては「ユーザースタイルシート」を使うって手がありますが...

ユーザースタイルシート使用時の問題点 - pre でのAA表示

作成者側の指定(CSSの指定)を無視するには !important を付ける必要がありまする。

アスキー・アートをCSSの pre要素 + class 属性で指定してるページも多いかと。ここでは <pre class="kuma"> なんてしてますが、!important を付けると font-family の設定はユーザースタイルシートの pre 指定が優先されてしまいます。ユーザースタイルシートに追加で pre.kuma の指定が必要になります。

作成者がどんな名前の class 属性使ってるかと事前にわかるわけないので、メンドクサイですよねー。

「そんなん pxで指定したらええねん!」

「IEでテキストの拡大・縮小できひんなるけど、IEだけ別CSSつこたらいけるやん!」

ぶっちゃけ、わかってへん!です。拡大・縮小だけできてもだめだめーなのです。ブラウザ側の大元の設定で大きいサイズ指定していても、作成者CSS指定の px で表示されてしまうのであります。

Safari/Chrome 向けのハックを使うのだ!

色々試しましたが、現在でも通用するようなのありましたっけ?

尚、これはWebデザイナーさんが苦労するレイアウト上(要するに「見た目」)の問題点ではありません。あくまで「アクセシビリティ」に関する悩みです。商用サイトとかで pre や code 要素なんて殆ど使いませんから。

というわけで、解決策なさそうなので「豆文字」問題だけ修正したら元の無指定にもどそかなと考えております。orz