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

【2013.7.17 追記】解決したかも？

等幅フォントが使われる要素の扱いがブラウザー間でまちまちな問題 - Weblog - hail2u.net

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 - ＭＳゴシック 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 指定時に適用されます。だから、 pre や code 要素の表示は他のブラウザに比べ明らかに小さい表示となるわけです。 font-size を小さく指定するとイワユル「豆文字」になってしまうのであります。

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

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

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

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

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

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

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

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

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

.kuma {
font-family: 'ＭＳ Ｐゴシック','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で指定したらええねん！」