#80 Webフォントであれこれやってみる
Noto Serifでローマ数字を書いてみる
ユニコードのローマ数字を、google font読み込み時にサブセットで読み込む
ユニコードのローマ数字一覧
コードは下記、 &text=ⅠⅡⅢ のように読み込む
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap&text=ⅠⅡⅢ" rel="stylesheet">
デモ
句読点やカッコ類などのいわゆる約物を文字詰めしたい
約半フォント(Webフォント)を読む
コード:約半フォントの読み込み
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">
CSSでfont-familyを指定
句読点は少し余白開けたいからletter-spacingで調整
p {
font-family: Arial, YakuHanJP, "メイリオ", "ヒラギノ角ゴシック", sans-serif;
letter-spacing: 1px;
}
デモ
font-feature-setting:paltを使う
メイリオなどでは使えないけれど、Noto SansのようなOpenTypeFontはカーニングのメトリクスが効く
コード 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@300&display=swap" rel="stylesheet">
p {
font-family: "Noto Sans JP", sans-serif;
font-feature-settings: "palt";
letter-spacing: 1.4px;
}
デモ 句読点は詰まりすぎかも
英数字と日本語でフォントを変更して、さらにfont-weightもそれぞれ変更したい。
英数字用にWork sansのRegularとSemibold、日本語用にNoto sansのLightとMediumを読んでみる
<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=Work+Sans:wght@400;600&family=Noto+Sans+JP:wght@300;500&display=swap" rel="stylesheet">
pタグにfont-weight:300(Noto SansのLight)をかけた時と、font-weight:500(Noto SansのMedium)をかけた時に、Work sansのweightは何になるか見てみる
デモ
pタグだとNoto Sansのweightが300だろうが、500だろうが、Work Sans部分(デモの[7number])は、Regularの400で表示されているように見える。
この記事が気に入ったらサポートをしてみませんか?