クライアントからある文字が表示していないという報告をもらい、どの部分かと確認すると、価格表記している円マークが線になっているそう。
確認してみると自分のブラウザではしっかりと円マークがでているけど、クライアントPCでは線なんだとか。これはCSSのfont-familyで指定しているフォントがデバイスでインストールされていない場合、次に指定しているもの順にフォントが適用されていくもので、適用されたフォント次第では半角の円マークがバックスラッシュになることがあるそう。
そこで、今の時代ではGoogle先生から提供されているWebフォントを使う事により、ブラウザ、デバイスどれから見ても同じようにみえるようにしてに誤差を少なくする手法に切り替えてみようと思い、さっそくGoogle先生のウェブフォントを利用してみた。
以下のWebフォントは、Noto Sans Japaneseという日本語表示のWebフォント。
Noto Sansそのものが世界の文字表示に対応している便利なフォントなため、多言語対応しているページには特に便利かもしれません。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Noto Sans JP', sans-serif; }
</style>そして確認してみると、自分のパソコンでも円マークがバックスラッシュになってしまった。
このWebフォントでは円マークはバックスラッシュになるようですｗ
で、半角円マークをどのようにして表記させるかという方法を探してみたら、特殊文字で対処するのが無難らしい。
ということで、すべての円マークを特殊文字コードに変換して終了。
円マーク → ¥Google Web Font Noto Sans Japanese
https://fonts.google.com/noto/specimen/Noto+Sans+JP