- ベストアンサー
【スタイルシート】 半角と全角で異なるフォントを指定できますか？
スタイルシートでフォントを指定しています。 半角英数はArial,全角はHG丸ゴシックM-PROを使いたいと考えています。 font familyの指定で、 Arialを最初に記載すると、全角がなぜかＭＳ Ｐゴシックで表示されてしまいます。 HG丸ゴシックM-PROを最初に記載すると、半角英数もHG丸ゴシックM-PROで表示されてしまいます。 スタイルシートを使って、全角と半角英数のフォントを別のものに指定することはできないのでしょうか？
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<p>愛のことを英語で <span class="nanraka">love</span> といいます。 </p> みたいに、１バイト文字に何らかの論理的意味づけを行なう。 すべての１バイト文字を<span class="nanraka">でくくる。 bodyにはHG丸ゴシックM-PROを指定し span.nanrakaにArialを指定する これしかないのでは？ デザインが先行するHTMLは本末転倒だけど <span>の意味づけがしっかりしていれば許容範囲かな。
その他の回答 (5)
- Bo_Bo
- ベストアンサー率65% (97/149)
#4 です。訂正します。 「lang属性」をCSSで指定するには、 [属性名 |= "属性値"] がより正しい指定方法のようです。
お礼
わざわざ訂正していただきありがとうございます。 了解いたしました。
- steel_gray
- ベストアンサー率66% (1052/1578)
ちょっと中途半端な回答だったようですいません。 要するに font-family:Arial HG丸ゴシックM-PRO で、 書き方はあっています。 第一候補のArialで表示できる文字はArialで、 Arialで表示できない文字は第二候補のHG丸ゴシックM-PROで表示する。 と、いうのが仕様だけど現状のブラウザは 第一候補のArialで表示できる文字はArialで Arialで表示できない文字は第二候補ではなく、ブラウザのデフォルトフォントを適用してしまいます。 なので、#2さんのように個別にマークアップしないと無理です。
お礼
再度のご回答ありがとうございます。 やはり個別にタグをつけないとできないということですね。了解しました。
- Bo_Bo
- ベストアンサー率65% (97/149)
「lang属性」でCSSの切り分け 要素の属性値、及び、テキストの言語を指定する。(HTML4.01) <span lang="ja">日本語</span> <span lang="en">English</span> 対応する「lang属性」は、「言語コードと国コード」 http://www.kanzaki.com/docs/html/lang.html などを参照のこと。 下記のソースで実験。 <html><head><title>TEST</title> <style type="text/css"><!-- body { color: #000; } span[lang="en"] { color: #f00; } --></style> </head><body> <p>日本語と<span lang="en">English</span>。</p> </body></html> ---- 残念ながら、Firefox, Operaで有効なCSS指定も、Internet Explorerでは 有効ではありません。結局、 .en { ... } ： <span lang="en" class="en">English</span> に落ち着くのかな！？ 【蛇足】 クライアントの環境を規定できる社内LANなどでの運用でないのなら、一般的 でないフォントを指定するのは控えた方が良いと思います。 私のコンピュータに「HG丸ゴシックM-PRO」が入ったのものは皆無です！
お礼
うーん。やっはりspanをCSSで行うのがベストっぽいですね。 HG丸ゴシックM-PROは一般的ではなかったんですね？ 自分のPCには入っていたもので一般的かと勘違いしていました。 使わない方が無難ですね。 ありがとうございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
本来のCSSでは 「英字フォント、日本語フォント」 の順で指定すると英字は英字フォント、英字フォントにない文字（日本語）は後で指定した日本語フォントで表示されることになっています。 特別に他のプロパティがあるわけではありません。 （逆の「日本語フォント、英字フォント」の順で指定した場合は、日本語フォントが英字も持っているので全て日本語フォントで表示されます。） このようにある程度は複数のフォントの指定も有効なはずなんですが、お試しのように今のブラウザでは指定順をなぞって複数のフォントを使い分けることはしてくれないようです。
お礼
リンクを貼っていただきありがとうございます。 サイトに行ってみたのですが、僕の日本語レベルが足りないのか、スタイルシートの知識不足なのか、ちんぷんかんぷんでした・・・。 ＜！－－引用－－ CSS2のより充実した選択子構文を使用して，言語に応じた活字を生成することができる。例えば，単一化されて同じUnicodeコード番号となる中国語及び日本語も存在するが，両者の抽象グリフは異なる。 *:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif } これにより，一定の言語，即ち，日本語又は中国語を有する要素を選択し，適切なフォントを要求する。 －－引用－－＞ 上の文章は、「*:lang(ja-jp) ～} 」をどこか(各htmlファイルの<head>にスタイルとして？)に入力すれば日本語は別フォントを指定できるということですか？ ＞今のブラウザでは指定順をなぞって複数のフォントを使い分けることはしてくれないようです。 しかし、そのルールに即していないブラウザばかりなので、結局は無理なのでしょうか・・・？ それとも、「*:lang(ja-jp) ～} 」を正しい場所に記載すればちゃんと動くのでしょうか？ 再質問で申し訳ありませんが、お時間のある時にお答えいただけると幸いです。
- うぃず（@Wizard_Zero）
- ベストアンサー率69% (344/495)
Wizard_Zeroと申します。 それは出来ないと思います。 仮に、スタイルシートで複数のフォントを指定したとしても、一番最初に一致したフォントが使われます。そのフォントが英字フォントの場合、全角文字はブラウザで設定されている標準フォントで表示されます。 出来るなら私も使いたい...。
お礼
やっぱりできないんですね。残念です。 ＞そのフォントが英字フォントの場合、全角文字はブラウザで設定されている標準フォントで表示されます。 なるほど、だからMS Pゴシックだったんですね。 この部分について納得できました。ありがとうございました。 ＞出来るなら私も使いたい...。 このサイトで一応検索かけたのですが、同等の質問がなかったので、あまりニーズがないのかと思われます。 Wizard_Zeroさん、少数派仲間ですね！（笑）
お礼
半角の前後をfontタグで囲えば目的は達するとは思っていましたが、spanをスタイルシートで規定して呼び出すということは考えていませんでした。 手間として変わらないので微妙ではありますが（笑）、「やっぱarialイマイチ」と思った時はラクなので、こちらの方がベターですね。 ありがとうございました。