90396


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

[code]

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

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

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


CC BY-SA 4.0
2022-08-05T22:29:50.010
90391
2022-08-08T17:59:50.567
2022-08-08T17:59:50.567
44531
816
question
css google-chrome font
CSSで日本語の文字のみ別のフォントにしたい


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

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

[code]

    @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;
    }
[/code]

[code]

    <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>αβΓ абв ａｂｃ ｱｲｳ</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>αβΓ абв ａｂｃ ｱｲｳ</em>
        </p>
    </div>
[/code]

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


CC BY-SA 4.0
2022-08-06T00:58:17.483
90396
2022-08-06T00:58:17.483
7347
90391
answer


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

[code]

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

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


CC BY-SA 4.0
2022-08-06T01:41:57.687
90398
2022-08-06T01:41:57.687
53579
90391
answer