#80 Webフォントであれこれやってみる

Noto Serifでローマ数字を書いてみる

ユニコードのローマ数字を、google font読み込み時にサブセットで読み込む

ユニコードのローマ数字一覧

Unicode 数字に準じるもの - CyberLibrarian

コードは下記、　&text=ⅠⅡⅢ のように読み込む

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap&text=ⅠⅡⅢ" rel="stylesheet">

デモ

句読点やカッコ類などのいわゆる約物を文字詰めしたい

約半フォント（Webフォント）を読む

Yaku Han JP - 約物半角専用のフォント

コード：約半フォントの読み込み

<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で表示されているように見える。