半角英数字と全角(日本語)の書体を切り分ける方法

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: TATU : 2006/07/18(火) 11:26  ID:dlMWWpAy
半角英数字はA書体、それ以外はB書体というようなスクリプトをHEAD内に記述して、そのページ全体に適用するような方法はありますか。

なんでこんなことしたいかというと、MS ゴシックの半角英数字が余りにも見難いためで、しかし、日本語部分は MS ゴシックを使いたいのです。

半角英数字を個別に書体指定するのは骨が折れる文章なんです。

よろしくお願いいたします。

1   名前: 牛若 : 2006/07/18(火) 11:26  ID:8gbyl8DR
JavaScriptの解法ではないので、ここで書くのも気が引けるけど、
IEなら
div.className{font-family:verdana;}

とかではダメ?
ネスケ対応にはカンマでお好みのゴシック系フォント名追加する。
JavaScriptだと、正規表現で半角拾ってそれらにfontFamilyで指定
なのだろうけど、かったるいね。


2   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
ども、です。

これは、class を使って指定するだけですね。

う〜ん、解決にならないです。

3   名前: 通行人B : 2006/07/18(火) 11:26  ID:kysT5Oi0
>う〜ん、解決にならないです。

なんで?
牛若さんが書かれているclassってのは、半角部分に対しての指定じゃなくて、「半角と全角でフォントを替えたい部分全体」への指定って意味だと思いますが。

4   名前: 匿名 : 2006/07/18(火) 11:26  ID:kysT5Oi0
例えば、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
p.fontfamily {
 background-color: fafafa;
 font-family: "Verdana","MS Pゴシック",sans-serif;
 padding: 1em;
}
-->
</style>

<title>TEST</title>
</head>
<body>
<p>
ここは特に指定なし。"hankaku"は無設定のMSIEならMSPゴシックで表示されているはず。
</p>
<p class="fontfamily">
ここが指定部分。どういう文章にしたいのかよく分からんけど、とりあえず"hankaku"はVerdana、全角はMSPゴシックになっているはず。<br>
macの方すんまそん。でも、質問者の方は「MSゴシックの半角を使いたくない」ってことらしいんで、問題ない?
</p>
</body>
</html>

ただし、半角部分に日本語フォントを使いたいなら、牛若さんが書かれたように

> JavaScriptだと、正規表現で半角拾ってそれらにfontFamilyで指定
なのだろうけど

ですね。

5   名前: 通行人B : 2006/07/18(火) 11:26  ID:kysT5Oi0
ありゃ、名前忘れた。失礼しました。
(ID見れば分かるとは思うけれど)

6   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
ども、です。

DIV の指定ですから、全体への指定という意味は分かっています。
多分私の勉強不足で理解していないのでしょう。

全角文字を含む部分にも「verdana」を指定すればその全角文字は文字化けしますが、具体的にはどう記述すればよいのでしょうか。

半角文字書体は、「verdana」。全角文字書体は、「MS ゴシック」として。

7   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
ありゃ、投稿記事を準備している間に通行人Bさんの投稿がありました。
順番が前後したみたいなり、お詫びします。

8   名前: 通行人B : 2006/07/18(火) 11:26  ID:kysT5Oi0
> 全角文字を含む部分にも「verdana」を指定すればその全角文字は文字化けしますが、具体的にはどう記述すればよいのでしょうか。

いや、>>4はちと丁寧に書いてみただけで、本当は牛若さんので充分なんですよ。
(試してみればわかることなんだけどね。別に文字化けしたりしません。)
詳しくは、ここのサイトのCSSの解説でもどうぞ。

9   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
牛若さん、通行人Bさん、おかげさまで解決しました。

MacのGoLiveの編集画面で見ていたため文字化けしていました。WinのGoLiveでは化けないですね。

この化けは書体指定の頭にOsakaを記述して解決しました。ありがとうございました。

一つ質問があります。
sans-serifが指定されていますが、これは何故ですか。


10   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
解決したと思ったんですけど、解決していませんでした。

全角文字の書体は、ブラウザの初期設定してある書体になってしまいます。

「Verdana,"MS ゴシック"」と指定しても、全角文字の書体は、「MS ゴシック」になりませでした。

残念! やっぱりスクリプトでないとダメか。

11   名前: Pid : 2006/07/18(火) 11:26  ID:TDh0RvEz
> 「Verdana,"MS ゴシック"」と指定しても、全角文字の書体は、「MS ゴシック」になりませでした。

そんな WinIE のバグには付き合ってられないというのが正直なところですが。
http://cssbug.at.infoseek.co.jp/detail/winie/b033.html

p {
  /* マトモなブラウザにはこれで十分 */
  font-family: Verdana, "MS 明朝", sans-serif;
  
  /* WinIE を何とかする(以下は「あ〜ん」のみ MS 明朝) */
  _font-family: expression((function (o) {
      if (! o.__________applyFontHack__________)
          o.innerHTML = o.innerHTML.replace (/([あ-ん])/g, '<font face="MS 明朝">$1<\/font>');
      o.__________applyFontHack__________ = true;
  } )(this));
}


上記は font 要素を使いますから,Transitional DTD が必要です。まあ,ただでさえ重い(IE 独自拡張の)expression 関数で,通常でも重い大量の文字列変換をするわけですから,IE 利用者は不幸なことになるかもしれません。

12   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
Pidさん、ありがとうございます。

これに関して(通行人Bさんの方法)、IEのバクという事ですが、Operaでも同じ結果だったので、そうでもないようです。

Pidさんの方法は、IE専用という事ですか、Operaでは機能しなかったもので。

13   名前: Pid : 2006/07/18(火) 11:26  ID:5RkuFYu.
> Operaでも同じ結果だったので、そうでもないようです。

いえ,バグです。「本来どうなるべきなのか」と「実際どうなるのか」を,きちんと区別して下さい。
http://www.y-adagio.com/public/standards/tr_css2/fonts.html#font-family-prop
http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-family


> Pidさんの方法は、IE専用という事ですか

まず,font-family をきちんと解釈するブラウザには何もする必要がないでしょう。WinIE に関しては,アンダースコアハック+expression 関数の二重チェックで,他のブラウザに影響を与えないようにしています。

Opera も同様のバグを抱えているのは認識していますが,>>11 の応用で何とでもなるはずなので,特に何も書きませんでした。頑張って下さい。

ちなみに,一文字ずつ font 要素の内容にするのはあまりに非効率ではありますが,要素の入れ子関係を崩さないようにする最も簡単な(安易とも言う)方法でした。もっと良い方法があると思うので,思い付いたらぜひ教えて下さい。

14   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
Pid さん こんにちは。ご教示ありがとうございます。でも、スキルがないので、チンプンカンプンのところもあります。

リンク先に書かれていることはよく分ります。このとおりには、IEもOpera動かないということですね。そこで正しく動くブラウザをご紹介ください。

Pid さんのCSSをIEで動くことは確認しましたが、その他の動かないブラウザにはそれぞれ対応しなければならないということで、私には無理なので諦めました。

一応、確認したCSSを書いて置きます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html;charset=Shift_JIS">
<TITLE></TITLE>
<style type="text/css">
<!--
H2.fontfamily{
  /* マトモなブラウザにはこれで十分 */
  font-family: Osaka, Verdana, "MS 明朝", sans-serif;
  
  /* WinIE を何とかする(以下は全角のみ MS 明朝) */
  _font-family: expression((function (o) {
      if (! o.__________applyFontHack__________)
          o.innerHTML = o.innerHTML.replace (/([ -^,a-z])/g, '<font face="MS 明朝">$1<\/font>');
      o.__________applyFontHack__________ = true;
  } )(this));
}
-->
</style>
</HEAD>
<BODY>
<H2 class="fontfamily">伊藤博文 大隈重信 原敬 犬養毅 近衞文麿 東條英機 吉田茂 鳩山一郎 岸信介 池田勇人 田中角榮 中曽根康弘 橋本龍太郎 小泉純一郎<BR>あぁいうえお アァイウエオ<BR>АБВГД ABCabc123 ABCabc123<BR>、。,.・:;?!゛゜´`¨^ ̄_ヽヾゝゞ〃仝々〆〇ー―‐/\〜‖|…‥‘’“”()〔〕[]{}〈〉《》「」『』【】+−±×÷=≠<>≦≧∞∴♂♀°′″℃¥$¢£%#&*@§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯</H2>
<H2 class="fontfamily">[注意事項] [注意事項] 「注意事項」<BR>
1、このスクリプトはフリーソフトです。このスクリプトを使用したいかなる損害に対して作者は一切の責任を負いません。<BR>
2、送信フォームのHTMLページの作成に関しては、HTML文法の範疇となるため、サポート対象外となります。<BR>
3、設置に関する質問はサポート掲示板にお願いいたします。直接メールによる質問はお受けいたしておりません。</H2>
</BODY>
</HTML>


15   名前: TATU : 2006/07/18(火) 11:26  ID:BpOm/61k
その後調べたところ、Firefoxが切り分けて表示しました。

IEやOperaではこの切り分けができませんが、これは仕様のようです。
下記サイトでバクのような表現がされていましたが、そうでないと思いました。

> 「Verdana,"MS ゴシック"」と指定しても、全角文字の書体は、「MS ゴシック」になりませでした。
そんな WinIE のバグには付き合ってられないというのが正直なところですが。
http://cssbug.at.infoseek.co.jp/detail/winie/b033.html


一覧へ戻る