webフォントの混植でフォントサイズを微調整する
和文：システムフォント
約物：約猫
一部の記号：Noto Sans JP
欧文：Fira Sans
ただしちょっと見た目小さい
ぐぐったら一発だったyuyuko.icon
和欧混植 font-sizeの微調整 #CSS - Qiita
Claudeに聞いてみたyuyuko.icon
/icons/hr.icon
yuyuko.icon
個人サイトで、和文フォントはほぼシステムフォントのまま、欧文フォントはGoogle FontsでFira Sansを使おうとしています。ただ、混植だと欧文フォントの部分がちょっと小さく見えてバランスが悪いです。調べたところ、CSSの@font-faceでsize-adjustを使えばいい感じに見た目の大きさを調整できるみたいなんですが、わたしはこのプロパティを使ったことがありません。プロではなく趣味でHTMLやCSSを書いている人向けに、分かりやすく解説しつつ導入のサポートをお願いします。
Claude.icon
欧文フォントと日本語フォントの混植、バランスが気になりますよね。size-adjustは本当に便利なプロパティですよ :)
size-adjustって何?
size-adjustは、フォントの見た目のサイズを調整できるプロパティです。実際のフォントファイルは変えずに、表示される大きさだけを拡大・縮小できます。
例えば、size-adjust: 110%と指定すると、そのフォントが10%大きく表示されます。
/icons/hr.icon
実際のコード：
code:style.css
/* Google Fontsの読み込み：欲しいウェイトだけ読み込む */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600&display=swap');
/* size-adjustで調整 */
/* 本文用：上記のURLにアクセスして、latinのfont-weight:400のファイルのURLをコピーしてくる */
@font-face {
font-family: "Fira Sans Adjusted";
src: url(https://fonts.gstatic.com/s/firasans/v18/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2');
size-adjust: 106%; /* 開発者ツールで確認して、いい感じの数値に設定 */
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 見出し用：700だと太すぎる気がするので600にする */
@font-face {
font-family: "Fira Sans Adjusted";
src: url(https://fonts.gstatic.com/s/firasans/v18/va9B4kDNxMZdWfMOD5VnSKzeRhf6Xl7Glw.woff2) format('woff2');
size-adjust: 106%;
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}