サイトを模写しているのですが、<p></p>中の文章中の句読点だけ幅が違っていて、同じにしたいです。

前提・実現したいこと

現在某サイトの模写をしているのですが、<p></p>の文章中の｢。｣と｢、｣だけが本サイトと比べて幅が広くなっており(文字自体も少し太い)文章の間隔が合わず、合わせ方が分かりません。同じ幅にしたいです。

発生している問題・エラーメッセージ

文章中のfont-size,letter-spacing,font-family,line-height等は本サイトと合っている(検証で同じにしました)のですが、句読点が何故か本サイトよりも幅が広く、文字も若干太いです(自分の模写サイトは普通の全角幅で、本サイトは半角ではなく全角なのに若干幅が狭い。)。

エラーメッセージ

該当のソースコード

｛本サイト｝
html
<p class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">テキストテキスト。テキストテキスト、テキストテキスト。テキストテキスト？</p>

css
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.class p {
    margin-bottom: 1em;
}

body {
    font-size: 15px;
    font-family: YakuHanJP, "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
                  游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
    font-weight: 400;
    line-height: 1.75;
    color: rgb(0, 0, 0);
    letter-spacing: 0.05em;
    text-align: justify;
}


｛模写｝
html
<p>テキストテキスト、テキストテキスト。</p>

css
 
p {
    font-family: YakuHanJP, "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
                  游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
    color: #000;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 1.75;

}

試したこと

検証を見てｐタグの中で句読点のみspanで囲っているかとも思って合わせようとしたのですが合わず(本サイトはspanで囲ってもなかったです)、全角の｢。｣と｢、｣を某サイトにて半角にして埋め込んだのですがそれもやはり幅が狭すぎて合わず、行き詰まってます。

補足情報

![
↑本サイトです(分かりにくくすみません)

　
模写です(分かりにくくすみません)

yoshinavi

2019/07/02 04:36

適用フォントの種類は確認されてますか？

hatomgi

2019/07/02 04:59

ブラウザはgoogle-Chromeで本サイトでは該当箇所のフォントが"Yu Gothic Medium" - 400となっており、自分もgoogle-Chromeのwhatフォントで同じ"Yu Gothic Medium" - 400になっているのは確認している状態です。当方の勉強不足で適用フォントの確認の仕方が曖昧です。申し訳ありません。他に補足するべき点などありましたらご返答していただきたく思います。よろしくお願いいたします

x_x

2019/07/02 05:29 編集

本当に｢。｣ですか？半角の「｡」(+スペース)だったりしませんか？

hatomgi

2019/07/02 05:28

説明欄にあります通り、半角に直して埋め込んだのですがやはり幅が狭く合致しませんでした。(幅が本サイトよりも狭くなりました) 検証にて本サイトを見たところ、本サイトも全角でした。(chromeでサイト検証したとき、文字がすべて全角に表示されるシステムにしてあったりするのであればそうであるかもしれません) ご返答ありがとうございます。

x_x

2019/07/02 05:34

Chrome はデベロッパーツールに実際に使っているフォントが何か表示されます。それで確認したのでしょうか？

hatomgi

2019/07/02 06:02

デベロッパーツールから本サイトのフォントファミリーを引っ張ってきました。おそらくあっていると思います。bodyについているのと p についているのでは優先順位的なもので合わなかったりするということでしょうか？解決済みではありますが、再度確認して今一度検証してみたいと思います。非常に為になりました、ありがとうございました。

x_x

2019/07/02 06:11

見るのは Computed の最後の Rendered Fonts です。解決したようなので YakuHanJP が使われていたようですが、その場合は Yu Gothic Medium—Local file(200 glyphs) Yaku Han JP—Network resource(3 glyphs) などと表示され、別のフォントが混在していることがはっきりします。

yoshinavi

2019/07/02 13:59

フォントの確認は、Firefoxのツールで見ると、Googleより適用範囲等が分かりやすいので試してみてください。

行動規範の内容に同意します

回答1件

ベストアンサー

YakuHanJPってhttps://yakuhanjp.qranoko.jp/であってますか？

「約物」と呼ばれる区読点や括弧などを半角にしてくれるフォントのようです。
CDNを用意してくれているようなので
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css">
を読み込んでみてください。

投稿2019/07/02 05:27

dit.

総合スコア3235

hatomgi

2019/07/02 05:46

ご回答ありがとうございます。見事に解決しました。このようなものがあるんですね、初めて知りました。勉強になりました、他に回答してくださった方々もありがとうございました。

dit.

2019/07/02 05:59

解決したようで何よりです。 font-familyで指定したものはまず頭から「このパソコン上で表示できる書体か」を判断し、なければ次の候補へと進んでいきます。 https://developer.mozilla.org/ja/docs/Web/CSS/font-familyにありますがこれは1文字単位で判断されます。（「このパソコン上で表示できる書体か」というのは、パソコンにインストール済みとかスタイルシートなどでwebフォントを読み込んでいるとかです） YakuHanJPを調べたらおそらく質問内容と関係しそうなフォントでしたので「読み込まれていないだけかな」と判断しました。（私も初めて知りました）明朝や丸ゴの場合読み込むものが変わるようなのでご注意ください。

hatomgi

2019/07/10 02:14

更に詳しく説明していただきありがとうございます。フォントによって反応が変わったりもするんですね(驚)奥が深いですね。返事が遅くなり申し訳ございませんでした、ありがとうございました。

行動規範の内容に同意します