数字のみフォントを変えたい

taktovoi
(@taktovoi)

5年前

質問です。

数字だけフォントを変更してブログ全体に反映したいと考えています。

具体的に、どの辺りをどのように作業すればよろしいでしょうか。
いくつかネット上で散見していたものを読んでみたものの、いまいち理解できずこちらへ質問した次第です。
よろしくお願いいたします。

環境
Wordpress
テーマ　graphy pro
macbookair mojave
Safariブラウザ

ブログで使用しているフォント　noto serif
使用したい数字フォント　menlo

6件の返信を表示中 - 1 - 6件目 (全6件中)

ishitaka
(@ishitaka)

5年前
こんにちは

@font-face で unicode-range 記述子を使用すると文字範囲を指定することができます。
参考ページ: https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/unicode-range

これで独自フォントを指定して、font-family の先頭に指定するとできると思います。

例:
```
@font-face {
  font-family: MenloNum;
  src: local('menlo');
  unicode-range: U+0030-0039; /* 数字 */
}

body {
	font-family: MenloNum, Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
}
```
トピック投稿者 taktovoi
(@taktovoi)

5年前

ishitaka様

早速の回答ありがとうございます。

確認ですが、/* 数字 */の数字部分には、私のようにブログ全体に反映させる場合、
どのような数字を記述するのが適当でしょうか？

さらに、これら記述はCSSのどの辺りに配置するのが妥当でしょうか？

천궁 메텔
(@digitmaetel)

5年前

「U+0030-0039」が数字です。unicode-range: U+0030-0039, U+0041-007A;この記述で、フォントを適応する文字を指定しています。

ishitaka
(@ishitaka)

5年前

上記の例では、@font-face で MenloNum フォントを指定したので、あとは通常のフォントと同じように font-family で MenloNum を指定してください。

munyagu
(@munyagu)

5年前

今回は数字のみですので、digitmaetel さんの unicode-range の記述は無視してください。

トピック投稿者 taktovoi
(@taktovoi)

5年前

皆様ありがとうございます。

CSSに追加してみたものの反映されませんでした。
原因を探りつつ引き続き頑張ってみます。
ありがとうございます。