{"id":9463,"date":"2025-10-09T11:36:17","date_gmt":"2025-10-09T02:36:17","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=9463"},"modified":"2026-02-02T11:49:32","modified_gmt":"2026-02-02T02:49:32","slug":"size-adjust-9463","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/size-adjust-9463\/","title":{"rendered":"CSS\uff1asize-adjust\u3067\u65e5\u672c\u8a9e\u3068\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u306e\u30d0\u30e9\u30f3\u30b9\u3092\u8abf\u6574\u3059\u308b <br>-\u5b9f\u4f8b\u3067\u5b8c\u5168\u89e3\u8aac-"},"content":{"rendered":"<p>CSS\u306esize-adjust\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u306e\u898b\u305f\u76ee\u306e\u30b5\u30a4\u30ba\u3092\u63c3\u3048\u308b\u65b9\u6cd5\u3092\u5b9f\u4f8b\u4ed8\u304d\u3067\u89e3\u8aac\u3002<\/p>\r\n\r\n<ul class=\"mt-1r\" style=\"list-style-type:bullet;\">\r\n  <li>\u2705 \u65e5\u672c\u8a9e\u3068\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u3067\u30b5\u30a4\u30ba\u611f\u304c\u7570\u306a\u308b\u7406\u7531<\/li>\r\n  <li>\u2705 size-adjust\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4f7f\u3044\u65b9<\/li>\r\n  <li>\u2705 \u8abf\u6574\u5024\u306e\u6c7a\u3081\u65b9\uff08\u5b9f\u8df5\u7684\u306a\u65b9\u6cd5\uff09<\/li>\r\n  <li>\u2705 \u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u4f8b\u3068\u30d3\u30d5\u30a9\u30fc\u30fb\u30a2\u30d5\u30bf\u30fc<\/li>\r\n  <li>\u2705 \u3088\u304f\u3042\u308b\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/li>\r\n<\/ul>\r\n<p>\u540c\u3058font-size\u3067\u3082\u7570\u306a\u308b\u30b5\u30a4\u30ba\u306b\u898b\u3048\u308b\u554f\u984c\u3092\u3001HTML\u3092\u5909\u66f4\u305b\u305a\u89e3\u6c7a\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<!-- \u2605\u76ee\u6b21\u30ea\u30b9\u30c8 -->\r\n<ul class=\"tocList mt-1r\" data-toc-id=\"js-tocBWGD\" style=\"height:28rem\"><\/ul>\r\n<ins class=\"tocBtn is-fixed\" data-toc-id=\"js-tocBWGD\"><\/ins>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<hr class=\"rule-hory mt-3r\">\r\n\r\n<h2 class=\"fz-xl\">1. \u554f\u984c\uff1a\u306a\u305c\u30d5\u30a9\u30f3\u30c8\u306e\u30b5\u30a4\u30ba\u611f\u304c\u5408\u308f\u306a\u3044\u306e\u304b<\/h2>\r\n<h3 class=\"fz-ml\">\u3088\u304f\u3042\u308b\u60a9\u307f<\/h3>\r\n<pre><code class=\"language-css\">body {\r\nfont-family: &quot;Overused Grotesk&quot;, &quot;Noto Sans JP&quot;, sans-serif;\r\nfont-size: 16px;\r\n}\r\n<\/code><\/pre>\r\n\r\n<p class=\"mt-1r\">\u3053\u306e\u3088\u3046\u306b\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3092\u4f75\u7528\u3059\u308b\u3068\uff1a<\/p>\r\n<picture class=\"bd-bounds\">\r\n\t<img decoding=\"async\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Overused_Grotesk-2025-10-09-11.53.45.png\" alt=\"\" width=\"1514\" height=\"526\" class=\"alignnone size-medium wp-image-9485\" \/>\r\n<\/picture>\r\n\r\n<pre class=\"mt-1r\"><code class=\"language-\">\u82f1\u8a9e: The quick brown fox  \u2190 15px\u304f\u3089\u3044\u306b\u898b\u3048\u308b\uff08\u5c0f\u3055\u3044\uff01\uff09\r\n\u65e5\u672c\u8a9e: \u3042\u306e\u30a4\u30fc\u30cf\u30c8\u30fc\u30f4\u30a9\u306e \u2190 16px\u306b\u898b\u3048\u308b\r\n<\/code><\/pre>\r\n<p><b class=\"bold\">\u554f\u984c:<\/b><\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u540c\u3058 <code>font-size: 16px<\/code> \u306a\u306e\u306b<\/li>\r\n  <li>\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u306e\u65b9\u304c\u5c0f\u3055\u304f\u898b\u3048\u308b<\/li>\r\n  <li>\u8996\u899a\u7684\u306b\u30d0\u30e9\u30f3\u30b9\u304c\u60aa\u3044<\/li>\r\n<\/ul>\r\n<hr class=\"rule-hory mt-3r\">\r\n<h3 class=\"fz-ml\">\u306a\u305c\u3053\u3046\u306a\u308b\u306e\u304b\uff1f<\/h3>\r\n<h4 class=\"fz-md\">x-height\uff08\u30a8\u30c3\u30af\u30b9\u30cf\u30a4\u30c8\uff09\u306e\u9055\u3044<\/h4>\r\n<pre><code class=\"language-\">Overused Grotesk (\u6b27\u6587\u30d5\u30a9\u30f3\u30c8):\r\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 cap height (\u5927\u6587\u5b57\u306e\u9ad8\u3055)\r\nxxx          \u2190 x-height \u304c\u5c0f\u3055\u3044\r\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 baseline\r\n\r\nNoto Sans JP (\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8):\r\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 \u4eee\u60f3\u30dc\u30c7\u30a3\u306e\u9ad8\u3055\r\n\u3042\u3042\u3042         \u2190 \u5b9f\u969b\u306e\u5b57\u9762\u304c\u5927\u304d\u3081\r\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501 baseline\r\n<\/code><\/pre>\r\n<p><b class=\"bold\">\u539f\u56e0:<\/b><\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>Overused Grotesk\u306a\u3069\u306e\u30d5\u30a9\u30f3\u30c8\u306f x-height \u304c\u5c0f\u3055\u3081<\/li>\r\n  <li>\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08Noto Sans JP\u7b49\uff09\u306f\u5b57\u9762\u304c\u6bd4\u8f03\u7684\u5927\u304d\u3044<\/li>\r\n  <li>\u7d50\u679c\u3068\u3057\u3066\u3001\u540c\u3058 <code>font-size<\/code> \u3067\u3082\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u304c\u5c0f\u3055\u304f\u898b\u3048\u308b<\/li>\r\n<\/ul>\r\n\r\n<p class=\"mt-1r\"><b class=\"bold\">\u30d5\u30a9\u30f3\u30c8\u306b\u3088\u308b\u9055\u3044:<\/b><\/p>\r\n<p class=\"mt-1r\">Overused_Grotesk<\/p>\r\n<picture class=\"bd-bounds\">\r\n\t<img decoding=\"async\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Overused_Grotesk-2025-10-09-11.53.45.png\" alt=\"\" width=\"1514\" height=\"526\" class=\"alignnone size-medium wp-image-9485\" \/>\r\n<\/picture>\r\n\r\n<p class=\"mt-1r\">Hanken Grotesk<\/p>\r\n<picture class=\"bd-bounds\">\r\n<img decoding=\"async\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Hanken_Grotesk-2025-10-09-11.51.50.png\" alt=\"\" width=\"1529\" height=\"523\" class=\"alignnone size-full wp-image-9470\" \/>\r\n<\/picture>\r\n\r\n<p class=\"mt-1r\">Poppins<\/p>\r\n<picture class=\"bd-bounds\">\r\n\t<img decoding=\"async\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Poppins-2025-10-09-11.57.38.png\" alt=\"\" width=\"1512\" height=\"527\" class=\"alignnone size-medium wp-image-9486\" \/>\r\n<\/picture>\r\n\r\n<p class=\"mt-1r\">Kumbh Sans<\/p>\r\n<picture class=\"bd-bounds\">\r\n\t<img decoding=\"async\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Kumbh_Sans-2025-10-09-11.56.08.png\" alt=\"\" width=\"1514\" height=\"522\" class=\"alignnone size-full wp-image-9483\" \/>\r\n<\/picture>\r\n\r\n<p class=\"mt-1r\">Noto Sans<\/p>\r\n<picture class=\"bd-bounds\">\r\n\t<img decoding=\"async\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Noto_Sans-2025-10-09-11.52.51.png\" alt=\"\" width=\"1512\" height=\"528\" class=\"alignnone size-medium wp-image-9484\" \/>\r\n<\/picture>\r\n\r\n<table class=\"table tbl-responsive mt-1r\">\r\n  <thead>\r\n    <tr class=\"rung\">\r\n      <th>\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8<\/th>\r\n      <td>\u65e5\u672c\u8a9e\u3068\u306e\u6bd4\u8f03<\/td>\r\n      <td>size-adjust\u53c2\u8003\u5024<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">Overused Grotesk<\/b><\/th>\r\n      <td>\u304b\u306a\u308a\u5c0f\u3055\u304f\u898b\u3048\u308b<\/td>\r\n      <td>106-110%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">Hanken Grotesk<\/b><\/th>\r\n      <td>\u3084\u3084\u5c0f\u3055\u304f\u898b\u3048\u308b<\/td>\r\n      <td>103-106%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">Poppins<\/b><\/th>\r\n      <td>\u5c11\u3057\u5c0f\u3055\u304f\u898b\u3048\u308b<\/td>\r\n      <td>101-103%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">Kumbh Sans<\/b><\/th>\r\n      <td>\u307b\u307c\u63c3\u3063\u3066\u3044\u308b<\/td>\r\n      <td>100-101%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">Noto Sans<\/b><\/th>\r\n      <td>\u63c3\u3063\u3066\u3044\u308b<\/td>\r\n      <td>100%<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\r\n<hr class=\"rule-hory mt-3r\">\r\n<h2 class=\"fz-xl\">2. size-adjust\u3068\u306f\uff1f<\/h2>\r\n<h3 class=\"fz-ml\">\u5b9a\u7fa9<\/h3>\r\n<p><b class=\"bold\">size-adjust<\/b> \u306f\u3001@font-face \u3067\u5b9a\u7fa9\u3057\u305f\u30d5\u30a9\u30f3\u30c8\u306e<b class=\"bold\">\u8996\u899a\u7684\u306a\u30b5\u30a4\u30ba\u3092\u8abf\u6574<\/b>\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3002<\/p>\r\n<pre><code class=\"language-css\">@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk.woff2&#39;) format(&#39;woff2&#39;);\r\nsize-adjust: 106%;  \/* 6%\u62e1\u5927\u3057\u3066\u65e5\u672c\u8a9e\u3068\u63c3\u3048\u308b *\/\r\n}\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-ml\">\u7279\u5fb4<\/h3>\r\n<table class=\"table tbl-responsive\">\r\n  <thead>\r\n    <tr class=\"rung\">\r\n      <th>\u9805\u76ee<\/th>\r\n      <td>\u8aac\u660e<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">\u9069\u7528\u5834\u6240<\/b><\/th>\r\n      <td><code>@font-face<\/code> \u5185\u306e\u307f<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">\u52b9\u679c<\/b><\/th>\r\n      <td>\u30d5\u30a9\u30f3\u30c8\u306e\u8868\u793a\u30b5\u30a4\u30ba\u3092\u8abf\u6574<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">\u5024<\/b><\/th>\r\n      <td>\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\uff08\u4f8b: 100%, 106%, 110%\uff09<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">\u30c7\u30d5\u30a9\u30eb\u30c8<\/b><\/th>\r\n      <td>100%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th><b class=\"bold\">\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8<\/b><\/th>\r\n      <td>Chrome 92+, Firefox 92+, Safari 17+<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\r\n<h3 class=\"fz-ml\">\u4f55\u304c\u5909\u308f\u308b\u306e\u304b<\/h3>\r\n<pre><code class=\"language-css\">\/* \u8abf\u6574\u524d *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk.woff2&#39;) format(&#39;woff2&#39;);\r\n}\r\n\r\n\/* \u8abf\u6574\u5f8c *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk.woff2&#39;) format(&#39;woff2&#39;);\r\nsize-adjust: 106%;  \/* \u2190 \u3053\u308c\u3092\u8ffd\u52a0 *\/\r\n}\r\n<\/code><\/pre>\r\n<p><b class=\"bold\">\u7d50\u679c:<\/b><\/p>\r\n<pre><code class=\"language-\">\u8abf\u6574\u524d: font-size: 16px \u2192 \u8996\u899a\u7684\u306b 15px\uff08\u82f1\u8a9e\u304c\u5c0f\u3055\u3044\uff09\r\n\u8abf\u6574\u5f8c: font-size: 16px \u00d7 106% = \u8996\u899a\u7684\u306b 16.96px \u2248 17px\uff08\u63c3\u3063\u305f\uff01\uff09\r\n<\/code><\/pre>\r\n<hr class=\"rule-hory mt-3r\">\r\n<h2 class=\"fz-xl\">3. \u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h2>\r\n<h3 class=\"fz-ml\">\u30b9\u30c6\u30c3\u30d71: @font-face \u3067\u5b9a\u7fa9<\/h3>\r\n<pre><code class=\"language-css\">\/* \u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08\u8abf\u6574\u304c\u5fc5\u8981\uff09 *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Regular.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 400;\r\nfont-style: normal;\r\nfont-display: swap;\r\nsize-adjust: 106%;  \/* \u2190 6%\u62e1\u5927\u3057\u3066\u65e5\u672c\u8a9e\u3068\u63c3\u3048\u308b *\/\r\n}\r\n\r\n\/* \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08\u57fa\u6e96\uff09 *\/\r\n@font-face {\r\nfont-family: &#39;Noto Sans JP&#39;;\r\nsrc: url(&#39;NotoSansJP-Regular.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 400;\r\nfont-style: normal;\r\nfont-display: swap;\r\n}\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u30b9\u30c6\u30c3\u30d72: \u30d5\u30a9\u30f3\u30c8\u30b9\u30bf\u30c3\u30af\u3067\u4f7f\u7528<\/h3>\r\n<pre><code class=\"language-css\">body {\r\nfont-family: &quot;Overused Grotesk&quot;, &quot;Noto Sans JP&quot;, sans-serif;\r\nfont-size: 16px;\r\nline-height: 1.66;\r\n}\r\n<\/code><\/pre>\r\n<p><b class=\"bold\">\u30dd\u30a4\u30f3\u30c8:<\/b><\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08\u8abf\u6574\u6e08\u307f\uff09\u3092\u5148\u306b\u6307\u5b9a<\/li>\r\n  <li>\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08\u57fa\u6e96\uff09\u3092\u5f8c\u306b\u6307\u5b9a<\/li>\r\n  <li>HTML\u306f\u4e00\u5207\u5909\u66f4\u4e0d\u8981\uff01<\/li>\r\n<\/ul>\r\n<hr class=\"rule-hory mt-3r\">\r\n<h2 class=\"fz-xl\">4. \u8abf\u6574\u5024\u306e\u6c7a\u3081\u65b9<\/h2>\r\n<h3 class=\"fz-ml\">\u65b9\u6cd51: \u8996\u899a\u7684\u306a\u6bd4\u8f03<\/h3>\r\n<h4 class=\"fz-md\">\u30c6\u30b9\u30c8HTML\u3092\u4f5c\u6210<\/h4>\r\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;ja&quot;&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;style&gt;\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk Test&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Regular.woff2&#39;) format(&#39;woff2&#39;);\r\nsize-adjust: 100%;  \/* \u2190 \u3053\u3053\u3092\u5909\u66f4\u3057\u3066\u30c6\u30b9\u30c8 *\/\r\n}\r\n\r\n.english {\r\nfont-family: &quot;Overused Grotesk&quot;, sans-serif;\r\n}\r\n\r\n.japanese {\r\nfont-family: &quot;Noto Sans JP&quot;, sans-serif;\r\n}\r\n\r\np {\r\nfont-size: 16px;\r\nline-height: 1.66;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;p class=&quot;english&quot;&gt;The quick brown fox jumps over the lazy dog&lt;\/p&gt;\r\n&lt;p class=&quot;japanese&quot;&gt;\u3042\u306e\u30a4\u30fc\u30cf\u30c8\u30fc\u30f4\u30a9\u306e\u3059\u304d\u3068\u304a\u3063\u305f\u98a8\u3001\u590f\u3067\u3082\u5e95\u306b\u51b7\u305f\u3055\u3092\u3082\u3064\u9752\u3044\u305d\u3089&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\r\n<h4 class=\"fz-md\">\u8abf\u6574\u624b\u9806<\/h4>\r\n<ol style=\"list-style-type:decimal;\">\r\n  <li>\r\n    <p><b class=\"bold\">100%\u304b\u3089\u59cb\u3081\u308b<\/b><\/p>\r\n    <pre><code class=\"language-css\">size-adjust: 100%;  \/* \u82f1\u8a9e\u304c\u5c0f\u3055\u304f\u898b\u3048\u308b *\/\r\n<\/code><\/pre>\r\n  <\/li>\r\n  <li>\r\n    <p><b class=\"bold\">5%\u523b\u307f\u3067\u5897\u3084\u3057\u3066\u30c6\u30b9\u30c8<\/b><\/p>\r\n    <pre><code class=\"language-css\">size-adjust: 103%;  \/* \u5c11\u3057\u5927\u304d\u304f *\/\r\nsize-adjust: 106%;  \/* \u3082\u3046\u5c11\u3057 *\/\r\nsize-adjust: 110%;  \/* \u3055\u3089\u306b\u5927\u304d\u304f *\/\r\n<\/code><\/pre>\r\n  <\/li>\r\n  <li>\r\n    <p><b class=\"bold\">\u8996\u899a\u7684\u306b\u63c3\u3046\u30dd\u30a4\u30f3\u30c8\u3092\u63a2\u3059<\/b><\/p>\r\n    <ul style=\"list-style-type:bullet;\">\r\n      <li>\u5927\u6587\u5b57\u306e\u9ad8\u3055\u3092\u6bd4\u8f03<\/li>\r\n      <li>\u5c0f\u6587\u5b57x\u306e\u9ad8\u3055\u3092\u6bd4\u8f03<\/li>\r\n      <li>\u5168\u4f53\u7684\u306a\u5370\u8c61\u3092\u78ba\u8a8d<\/li>\r\n    <\/ul>\r\n  <\/li>\r\n  <li>\r\n    <p><b class=\"bold\">\u6700\u9069\u5024\u3092\u6c7a\u5b9a<\/b><\/p>\r\n    <pre><code class=\"language-css\">size-adjust: 106%;  \/* \u2190 \u3061\u3087\u3046\u3069\u826f\u3044\uff01 *\/\r\n<\/code><\/pre>\r\n  <\/li>\r\n<\/ol>\r\n\r\n<hr class=\"rule-hory mt-3r\">\r\n<h3 class=\"fz-ml\">\u65b9\u6cd52: \u8a08\u7b97\u306b\u3088\u308b\u6c7a\u5b9a<\/h3>\r\n<h4 class=\"fz-md\">x-height\u306e\u6e2c\u5b9a<\/h4>\r\n<pre><code class=\"language-javascript\">\/\/ \u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u3092\u53d6\u5f97\u3059\u308b\u30c4\u30fc\u30eb\r\n\/\/ https:\/\/opentype.js.org\/ \u306a\u3069\u3092\u4f7f\u7528\r\n\r\nconst notoSansJP = {\r\nunitsPerEm: 1000,\r\nxHeight: 536,  \/\/ \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08\u57fa\u6e96\uff09\r\n};\r\n\r\nconst overusedGrotesk = {\r\nunitsPerEm: 1000,\r\nxHeight: 505,  \/\/ \u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\uff08\u5c0f\u3055\u3081\uff09\r\n};\r\n\r\n\/\/ \u8abf\u6574\u5024\u306e\u8a08\u7b97\r\nconst sizeAdjust = (notoSansJP.xHeight \/ overusedGrotesk.xHeight) * 100;\r\n\/\/ 536 \/ 505 \u2248 106.14%\r\n<\/code><\/pre>\r\n<p><b class=\"bold\">\u7d50\u679c:<\/b><\/p>\r\n<pre><code class=\"language-css\">@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsize-adjust: 106%;\r\n}\r\n<\/code><\/pre>\r\n<p><b class=\"bold\">\u30d5\u30a9\u30f3\u30c8\u5225\u306e\u8a08\u7b97\u4f8b:<\/b><\/p>\r\n<table class=\"table tbl-responsive\">\r\n  <thead>\r\n    <tr class=\"rung\">\r\n      <th>\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8<\/th>\r\n      <td>x-height<\/td>\r\n      <td>\u8a08\u7b97\u5f0f<\/td>\r\n      <td>\u53c2\u8003\u5024<\/td>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr class=\"rung\">\r\n      <th>Overused Grotesk<\/th>\r\n      <td>505<\/td>\r\n      <td>536\u00f7505<\/td>\r\n      <td>106%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th>Hanken Grotesk<\/th>\r\n      <td>516<\/td>\r\n      <td>536\u00f7516<\/td>\r\n      <td>104%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th>Poppins<\/th>\r\n      <td>524<\/td>\r\n      <td>536\u00f7524<\/td>\r\n      <td>102%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th>Kumbh Sans<\/th>\r\n      <td>534<\/td>\r\n      <td>536\u00f7534<\/td>\r\n      <td>100%<\/td>\r\n    <\/tr>\r\n    <tr class=\"rung\">\r\n      <th>Noto Sans<\/th>\r\n      <td>536<\/td>\r\n      <td>536\u00f7536<\/td>\r\n      <td>100%<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<p>*x-height\u5024\u306f\u4f8b\u3067\u3059\u3002\u5b9f\u969b\u306e\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u53d6\u5f97\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\r\n<hr class=\"rule-hory mt-3r\">\r\n<h3 class=\"fz-ml\">\u65b9\u6cd53: \u30d6\u30e9\u30a6\u30b6DevTools\u3067\u5fae\u8abf\u6574<\/h3>\r\n<ol style=\"list-style-type:decimal;\">\r\n  <li><b class=\"bold\">Chrome\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u3092\u958b\u304f<\/b><\/li>\r\n  <li><b class=\"bold\">Elements\u30bf\u30d6\u3067@font-face\u3092\u7de8\u96c6<\/b>\r\n    <pre><code class=\"language-css\">@font-face {\r\n...\r\nsize-adjust: 106%;  \/* \u2190 \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u5909\u66f4 *\/\r\n}\r\n<\/code><\/pre>\r\n  <\/li>\r\n  <li><b class=\"bold\">\u5024\u3092\u5909\u66f4\u3057\u306a\u304c\u3089\u78ba\u8a8d<\/b><\/li>\r\n  <li><b class=\"bold\">\u6700\u9069\u5024\u3092CSS\u30d5\u30a1\u30a4\u30eb\u306b\u53cd\u6620<\/b><\/li>\r\n<\/ol>\r\n\r\n<hr class=\"rule-hory mt-3r\">\r\n<h2 class=\"fz-xl\">5. unpkg.com\u3067\u306e\u914d\u4fe1\u65b9\u6cd5<\/h2>\r\n<h3 class=\"fz-ml\">\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\r\n<pre><code class=\"language-\">font-overused-grotesk-adjusted\/\r\n\u251c\u2500\u2500 package.json\r\n\u251c\u2500\u2500 README.md\r\n\u251c\u2500\u2500 font-face.css           # \u30aa\u30ea\u30b8\u30ca\u30eb\u7248\uff08\u8abf\u6574\u306a\u3057\uff09\r\n\u251c\u2500\u2500 font-face.adjusted.css  # size-adjust\u7248\uff08\u63a8\u5968\uff09\r\n\u251c\u2500\u2500 OverusedGrotesk-Light.woff2\r\n\u251c\u2500\u2500 OverusedGrotesk-Regular.woff2\r\n\u251c\u2500\u2500 OverusedGrotesk-Medium.woff2\r\n\u2514\u2500\u2500 OverusedGrotesk-Bold.woff2\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">package.json<\/h3>\r\n<pre><code class=\"language-json\">{\r\n&quot;name&quot;: &quot;@your-username\/font-overused-grotesk-adjusted&quot;,\r\n&quot;version&quot;: &quot;1.0.0&quot;,\r\n&quot;description&quot;: &quot;Overused Grotesk with size-adjust for Japanese fonts&quot;,\r\n&quot;main&quot;: &quot;font-face.adjusted.css&quot;,\r\n&quot;files&quot;: [\r\n&quot;*.woff2&quot;,\r\n&quot;font-face.css&quot;,\r\n&quot;font-face.adjusted.css&quot;\r\n],\r\n&quot;keywords&quot;: [&quot;font&quot;, &quot;overused-grotesk&quot;, &quot;size-adjust&quot;, &quot;japanese&quot;],\r\n&quot;license&quot;: &quot;OFL-1.1&quot;\r\n}\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-ml\">font-face.css\uff08\u30aa\u30ea\u30b8\u30ca\u30eb\u7248\uff09<\/h3>\r\n<pre><code class=\"language-css\">\/* Light *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Light.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 300;\r\nfont-style: normal;\r\nfont-display: swap;\r\n}\r\n\r\n\/* Regular *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Regular.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 400;\r\nfont-style: normal;\r\nfont-display: swap;\r\n}\r\n\r\n\/* Bold *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Bold.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 700;\r\nfont-style: normal;\r\nfont-display: swap;\r\n}\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-ml\">font-face.adjusted.css\uff08\u8abf\u6574\u7248\u30fb\u63a8\u5968\uff09<\/h3>\r\n<pre><code class=\"language-css\">\/* Light *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Light.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 300;\r\nfont-style: normal;\r\nfont-display: swap;\r\nsize-adjust: 106%;  \/* \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u306e\u30d0\u30e9\u30f3\u30b9\u8abf\u6574 *\/\r\n}\r\n\r\n\/* Regular *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Regular.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 400;\r\nfont-style: normal;\r\nfont-display: swap;\r\nsize-adjust: 106%;  \/* \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u306e\u30d0\u30e9\u30f3\u30b9\u8abf\u6574 *\/\r\n}\r\n\r\n\/* Bold *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk-Bold.woff2&#39;) format(&#39;woff2&#39;);\r\nfont-weight: 700;\r\nfont-style: normal;\r\nfont-display: swap;\r\nsize-adjust: 106%;  \/* \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u306e\u30d0\u30e9\u30f3\u30b9\u8abf\u6574 *\/\r\n}\r\n<\/code><\/pre>\r\n\r\n<h4 class=\"fz-ml\">\u516c\u958b<\/h4>\r\n<pre><code class=\"language-bash\">npm publish --access public\r\n<\/code><\/pre>\r\n\r\n<h4 class=\"fz-ml\">\u4f7f\u7528<\/h4>\r\n<pre><code class=\"language-html\">&lt;!-- \u30aa\u30ea\u30b8\u30ca\u30eb\u7248\uff08\u8abf\u6574\u306a\u3057\uff09 --&gt;\r\n&lt;link href=&quot;https:\/\/unpkg.com\/@your-username\/font-overused-grotesk-adjusted@1.0.0\/font-face.css&quot; rel=&quot;stylesheet&quot;&gt;\r\n\r\n&lt;!-- \u8abf\u6574\u7248\uff08\u63a8\u5968\uff09 --&gt;\r\n&lt;link href=&quot;https:\/\/unpkg.com\/@your-username\/font-overused-grotesk-adjusted@1.0.0\/font-face.adjusted.css&quot; rel=&quot;stylesheet&quot;&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-css\">body {\r\nfont-family: &quot;Overused Grotesk&quot;, &quot;Noto Sans JP&quot;, sans-serif;\r\n}\r\n<\/code><\/pre>\r\n\r\n<hr class=\"rule-hory mt-3r\">\r\n\r\n<h2 class=\"fz-xl\">\ud83d\udcca \u307e\u3068\u3081<\/h2>\r\n\r\n<p><b class=\"bold\">\u554f\u984c:<\/b><\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3067\u30b5\u30a4\u30ba\u611f\u304c\u7570\u306a\u308b<\/li>\r\n  <li>\u7279\u306b\u3001Overused Grotesk\u7b49\u306f\u5c0f\u3055\u304f\u898b\u3048\u308b<\/li>\r\n<\/ul>\r\n<p><b class=\"bold\">\u89e3\u6c7a\u7b56:<\/b><\/p>\r\n<pre><code class=\"language-css\">\/* \u5c0f\u3055\u304f\u898b\u3048\u308b\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u3092\u62e1\u5927 *\/\r\n@font-face {\r\nfont-family: &#39;Overused Grotesk&#39;;\r\nsrc: url(&#39;OverusedGrotesk.woff2&#39;) format(&#39;woff2&#39;);\r\nsize-adjust: 106%;  \/* \u2190 \u3053\u308c\u3067\u89e3\u6c7a\uff01 *\/\r\n}\r\n\r\n\/* \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u306f\u8abf\u6574\u4e0d\u8981 *\/\r\n@font-face {\r\nfont-family: &#39;Noto Sans JP&#39;;\r\nsrc: url(&#39;NotoSansJP.woff2&#39;) format(&#39;woff2&#39;);\r\n}\r\n<\/code><\/pre>\r\n\r\n<p><b class=\"bold\">\u30e1\u30ea\u30c3\u30c8<\/b><\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u2705 HTML\u3092\u5909\u66f4\u305b\u305a\u306b\u30b5\u30a4\u30ba\u8abf\u6574<\/li>\r\n  <li>\u2705 \u3059\u3079\u3066\u306e\u30a6\u30a7\u30a4\u30c8\u306b\u4e00\u62ec\u9069\u7528\u53ef\u80fd<\/li>\r\n  <li>\u2705 \u30d6\u30e9\u30a6\u30b6\u306e\u6a19\u6e96\u6a5f\u80fd\uff08\u8ffd\u52a0JS\u306a\u3057\uff09<\/li>\r\n  <li>\u2705 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3067\u3082\u6709\u52b9<\/li>\r\n  <li>\u2705 \u62e1\u5927\u306a\u306e\u3067\u8996\u8a8d\u6027\u3092\u4fdd\u3066\u308b<\/li>\r\n<\/ul>\r\n\r\n<p><b class=\"bold\">\u6ce8\u610f\u70b9<\/b><\/p>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u26a0\ufe0f \u30d5\u30a9\u30f3\u30c8\u3054\u3068\u306b\u6700\u9069\u5024\u304c\u7570\u306a\u308b<\/li>\r\n  <li>\u26a0\ufe0f \u53e4\u3044\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u7121\u8996\u3055\u308c\u308b\uff08\u5b89\u5168\uff09<\/li>\r\n  <li>\u26a0\ufe0f \u8996\u899a\u7684\u306a\u78ba\u8a8d\u304c\u5fc5\u9808<\/li>\r\n  <li>\u26a0\ufe0f \u7e2e\u5c0f\u3088\u308a\u62e1\u5927\u3092\u63a8\u5968<\/li>\r\n<\/ul>\r\n\r\n<hr class=\"rule-hory mt-3r\">\r\n<h2 class=\"fz-xl\">\ud83d\udcdd \u95a2\u9023\u8a18\u4e8b<\/h2>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li><a href=\"https:\/\/code-plus.jp\/gp\/webfonts-otf-vs-ttf-9411\/\" class=\"link\">Google Fonts\u3060\u3068\u5b57\u8a70\u3081\u304c\u52b9\u304b\u306a\u3044\u7406\u7531 <del>OTF\u3068TTF\u306e\u9055\u3044<\/del><\/a><\/li>\r\n  <li><a href=\"https:\/\/code-plus.jp\/gp\/unpkg-upload-9404\/\" class=\"link\">\u3010\u5b8c\u5168\u30ac\u30a4\u30c9\u3011Web\u30d5\u30a9\u30f3\u30c8\u3092npm\/unpkg.com\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u65b9\u6cd5<\/a><\/li>\r\n  <li><a href=\"https:\/\/code-plus.jp\/gp\/python-fonttools-8332\/\" class=\"link\">FontTools\u306e\u4f7f\u3044\u65b9\uff1aOTF\u304b\u3089woff2\u3078\u306e\u5909\u63db<\/a><\/li>\r\n  <li><a href=\"https:\/\/code-plus.jp\/gp\/font-feature-settings-9455\/\" class=\"link\">font-feature-settings\u306e\u5b8c\u5168\u30ac\u30a4\u30c9<\/a><\/li>\r\n<\/ul>\r\n<hr class=\"rule-hory mt-3r\">\r\n<h2 class=\"fz-xl\">\ud83d\udd17 \u53c2\u8003\u30ea\u30f3\u30af<\/h2>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/size-adjust\" class=\"link\">size-adjust - MDN<\/a><\/li>\r\n  <li><a href=\"https:\/\/www.w3.org\/TR\/css-fonts-5\/#size-adjust-desc\" class=\"link\">CSS Fonts Module Level 5<\/a><\/li>\r\n<\/ul>","protected":false},"excerpt":{"rendered":"CSS\u306esize-adjust\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u306e\u898b\u305f\u76ee\u306e\u30b5\u30a4\u30ba\u3092\u63c3\u3048\u308b\u65b9\u6cd5\u3092\u5b9f\u4f8b\u4ed8\u304d\u3067\u89e3\u8aac\u3002 \u2705 \u65e5\u672c\u8a9e\u3068\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u3067\u30b5\u30a4\u30ba\u611f\u304c\u7570\u306a\u308b\u7406\u7531 \u2705 size-adjust\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4f7f\u3044\u65b9 \u2705 \u8abf\u6574[...]","protected":false},"author":1,"featured_media":9467,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[11],"tags":[],"class_list":["post-9463","post","type-post","status-publish","format-standard","has-post-thumbnail","category-html-css"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/9463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=9463"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/9463\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/9467"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=9463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=9463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=9463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}