1

Chromeではデフォルトのフォントがメイリオになってるのですが、メイリオは日本語は斜体が存在しないためemタグで囲んでも斜体になりません。
日本語の時のみ別のフォントに変更したいと思うのですが、通常のCSSでは単純にどのフォントを優先するかしか指定できないようです。
ただ、もし英数などは存在せず日本語だけ存在するフォントがあれば、それを最優先にして2番目にメイリオを指定すれば日本語だけ別のフォントに変更することが可能だと思います。

font-family: '<日本語しか存在しないフォント>', 'メイリオ', Meiryo;

そのようなフォントは何があるでしょうか?

※元は以下の問題を解決するためのものです。
日本語もイタリック体に出来るようにして欲しい - https://github.com/increments/qiita-discussions/discussions/267

2
  • softel.co.jp/blogs/tech/archives/5673 に書いてあるように CSS の transform で対応するというのダメなのですか? ダメならそのことと理由を質問欄に追記してください。
    – WebSurfer
    Commented 2022年8月6日 0:48
  • Webには詳しくないのと最終的にはQiita側が決めることなのでちょっとわからないです。
    – Lamron
    Commented 2022年8月8日 3:18

2 件の回答 2

5

全く英数字を含まないフォントの需要が無いのか、見当たりませんでした。たぶん、既存のフォントを自分でカスタマイズする以外は存在しないと思います。

では、CSSでやりたいことはできないかというとできましたので、下記にサンプルを置いておきます。

@font-face {
  font-family: "MS PGothic JP";
  src: local("MS PGothic");
  unicode-range: U+2E80-10FFFF;
}

.jp {
  font-family: "MS PGothic JP", Meiryo;
}

.meiryo {
  font-family: Meiryo;
}
<div class="jp">
  <h3>日本語のみフォントとMeiryo</h3>
  <p>
    通常
    <em>強調</em>
    <strong>強い重要性</strong>
    <strong><em>強い重要性と強調</em></strong>
  </p>
  <p>
    normal
    <em>em</em>
    <strong>strong</strong>
    <strong><em>strong&amp;em</em></strong>
    <p>
      <em>αβΓ абв abc アイウ</em>
    </p>
</div>
<div class="meiryo">
  <h3>Meiryoのみ</h3>
  <p>
    通常
    <em>強調</em>
    <strong>強い重要性</strong>
    <strong><em>強い重要性と強調</em></strong>
  </p>
  <p>
    normal
    <em>em</em>
    <strong>strong</strong>
    <strong><em>strong&amp;em</em></strong>
    <p>
      <em>αβΓ абв abc アイウ</em>
    </p>
</div>

MS PGothicとの組合せにしていますが、Yu GothicやBIZ UDPGothicでもできると思います。フォントの範囲はCJK部署補助以降(U+2E80以上)としています。ギリシャ文字やキリール文字は含まれませんが、全角英数字は含まれます。どちらがどちらのフォントになっているのかはMeiryoのみと見比べてみてください。仕組みは単純で、@font-faceを使って新しく日本語のみの範囲のフォントを宣言しているだけです。CSSの詳しい内容はMDNなどで調べてみてください。

0

フォントで対応するのは大変そう。
条件付きですが下記のCSSで何でも斜体にできます。

em {
    display: inline-block;
    transform: skewX(-20deg);
    font-style: normal;
}

これで1行の場合のみきれいな斜体にできます。
但し、自動改行や<br>による改行で複数行になると全体が傾斜するので上手く表示されません。
1行毎に<em>で囲めばいいのだけど、ちょっと面倒ですよね。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。