{"id":10028,"date":"2025-12-08T18:21:05","date_gmt":"2025-12-08T09:21:05","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=10028"},"modified":"2026-04-02T14:21:42","modified_gmt":"2026-04-02T05:21:42","slug":"font-metrics-analyzer","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/font-metrics-analyzer\/","title":{"rendered":"\u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u89e3\u6790\u30c4\u30fc\u30eb - 2\u3064\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u6bd4\u8f03\u3057\u3066\u3001size-adjust\u306e\u6700\u9069\u5024\u3092\u8a08\u7b97"},"content":{"rendered":"<!-- \u25bc.page -->\r\n\r\n<!-- .mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09 -->\r\n<hr class=\"spacer-mezzala\" \/>\r\n\r\n<hr id=\"ch-SizeAdjustCalculator\" \/>\r\n<div class=\"pg-saracnvtvkaa\">\r\n\r\n  <header class=\"page-header mx-auto\">\r\n    <!-- \u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n\n<nav class=\"breadcrumb leckermaul mx-auto py-0.5r\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">TOOLS\uff08\u30c4\u30fc\u30eb\u4e00\u89a7\uff09<\/a><\/li><li class=\"current_page_item\"><a>\u30c4\u30fc\u30eb<\/a><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n  <\/header><!-- \/\/\/.inheader -->\r\n\r\n  <!-- .section -->\r\n  <section class=\"sect-cnvtVkaA-Intro\" style=\"contain-intrinsic-size:1000px;\">\r\n    <header class=\"section__inheader mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\r\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>\u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u89e3\u6790\u30c4\u30fc\u30eb - 2\u3064\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u6bd4\u8f03\u3057\u3066\u3001size-adjust\u306e\u6700\u9069\u5024\u3092\u8a08\u7b97<\/span><\/h1>\r\n        <p class=\"page-foreword fz-ss\">\r\n          2\u3064\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u6bd4\u8f03\u3057\u3066\u3001CSS\u306e size-adjust \u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6700\u9069\u5024\u3092\u8a08\u7b97\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3002\u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u5024\u3001--font-top-offset \u306e\u5024\u3082\u53d6\u5f97\u3002\r\n        <\/p>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\r\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\r\n      <\/a>\r\n    <\/header><!-- \/\/\/.inheader -->\r\n  <\/section>\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Converter\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Converter\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior fxd-row mx-auto\">\r\n      <figure class=\"section__leftlane\">\r\n        <div class=\"hgroup-wrapper\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e<\/span><\/h3>\r\n        <\/div><!-- \/\/\/.hgroup -->\r\n\r\n        <!-- \u57fa\u6e96\u30d5\u30a9\u30f3\u30c8 -->\r\n        <div class=\"chest-wrapper relatived\">\r\n          <label class=\"mb-0.25r\">\r\n            <span>\u57fa\u6e96\u30d5\u30a9\u30f3\u30c8<\/span>\r\n            <b class=\"badge is-solided is-primary fz-xxs ml-0.25r\">BASE<\/b>\r\n          <\/label>\r\n          <div id=\"endropArea1\" class=\"endrop-area\" style=\"height:8pc;\">\r\n            <div class=\"endrop-inner\">\r\n              <i class=\"endrop-icon\"><\/i>\r\n              <p class=\"endrop-text\">\u30d5\u30a9\u30f3\u30c8\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7<\/p>\r\n              <small class=\"endrop-smock\">\u307e\u305f\u306f \u30af\u30ea\u30c3\u30af\u3057\u3066\u9078\u629e<\/small>\r\n            <\/div>\r\n            <input type=\"file\" id=\"fileInput1\" class=\"file-input\" accept=\".ttf,.otf,.woff\" \/>\r\n          <\/div>\r\n          <div id=\"fileInfo1\"><\/div>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <!-- \u8abf\u6574\u30d5\u30a9\u30f3\u30c8 -->\r\n        <div class=\"chest-wrapper relatived mt-1r\">\r\n          <label class=\"mb-0.25r\">\r\n            <span>\u8abf\u6574\u30d5\u30a9\u30f3\u30c8<\/span>\r\n            <b class=\"badge is-solided is-primary fz-xxs ml-0.25r\">ADJUST<\/b>\r\n          <\/label>\r\n          <div id=\"endropArea2\" class=\"endrop-area\" style=\"height:8pc;\">\r\n            <div class=\"endrop-inner\">\r\n              <i class=\"endrop-icon\"><\/i>\r\n              <p class=\"endrop-text\">\u30d5\u30a9\u30f3\u30c8\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7<\/p>\r\n              <small class=\"endrop-smock\">\u307e\u305f\u306f \u30af\u30ea\u30c3\u30af\u3057\u3066\u9078\u629e<\/small>\r\n            <\/div>\r\n            <input type=\"file\" id=\"fileInput2\" class=\"file-input\" accept=\".ttf,.otf,.woff\" \/>\r\n          <\/div>\r\n          <div id=\"fileInfo2\"><\/div>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <!-- \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\u30a8\u30ea\u30a2\uff08\u5de6\u5074\uff09 -->\r\n        <ins id=\"errorMessage\"><\/ins>\r\n\r\n        <!-- \u5bfe\u5fdc\u5f62\u5f0f -->\r\n        <div class=\"box is-outlined c-gray mt-0.5r\">\r\n          <p class=\"fz-xs c-gray\">\r\n            <i class=\"icon mas ma-info c-gray mr-0.25r\"><\/i>\r\n            \u5bfe\u5fdc\u5f62\u5f0f\uff1aTTF, OTF, WOFF<br>\r\n            <span class=\"fz-xxs\">\u203bWOFF2\u306f <a class=\"link\" href=\"https:\/\/everythingfonts.com\/woff2-to-ttf\" target=\"_blank\" rel=\"noopener\">\u3053\u3061\u3089<\/a> \u3067TTF\u306b\u5909\u63db\u3057\u3066\u304b\u3089\u3054\u5229\u7528\u304f\u3060\u3055\u3044<\/span>\r\n          <\/p>\r\n        <\/div>\r\n      <\/figure><!-- \/\/\/.leftlane -->\r\n\r\n      <figure class=\"section__centerlane\">\r\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:27pc;\">\r\n          <button type=\"button\" id=\"calculateBtn\" class=\"button is-solided is-primary\" disabled><span>\u8a08\u7b97&nbsp;\u00bb<\/span><\/button>\r\n        <\/aside>\r\n      <\/figure><!-- \/\/\/.centerlane -->\r\n\r\n      <figure class=\"section__rightlane\">\r\n        <div class=\"chest-wrapper relatived\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u8a08\u7b97\u7d50\u679c<\/span><\/h3>\r\n          <textarea class=\"textarea\" id=\"decodeArea\" style=\"height:24pc;\" placeholder=\"\u5de6\u5074\u3067\u30d5\u30a9\u30f3\u30c8\u3092\u9078\u629e\u3057\u3066\u300c\u8a08\u7b97\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\" readonly><\/textarea>\r\n          <!-- \u6210\u529f\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\u30a8\u30ea\u30a2\uff08\u53f3\u5074\uff09 -->\r\n          <ins id=\"successMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n      <\/figure><!-- \/\/\/.rightlane -->\r\n    <\/div><!-- \/\/\/.interior.fxd-row -->\r\n  <\/section>\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Explanation\" \/>\r\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"box is-broad is-solided c-text\">\r\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc mt-1r\">\ud83d\udca1 size-adjust \u3068\u306f\uff1f<\/h5>\r\n        <p class=\"fz-ss mb-0.5r\">\r\n          <code>size-adjust<\/code> \u306f\u3001@font-face \u3067\u5b9a\u7fa9\u3057\u305f\u30d5\u30a9\u30f3\u30c8\u306e\u8996\u899a\u7684\u306a\u30b5\u30a4\u30ba\u3092\u8abf\u6574\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002\r\n          \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u3068\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u3092\u4f75\u7528\u3059\u308b\u969b\u3001\u540c\u3058 font-size \u3067\u3082\u30b5\u30a4\u30ba\u611f\u304c\u7570\u306a\u308b\u554f\u984c\u3092\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002\r\n        <\/p>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc mt-1r\">\ud83c\udfaf \u4f7f\u7528\u624b\u9806<\/h5>\r\n        <ol class=\"fz-ss mb-1r\">\r\n          <li><b>\u57fa\u6e96\u30d5\u30a9\u30f3\u30c8<\/b>\uff1a\u30b5\u30a4\u30ba\u306e\u57fa\u6e96\u3068\u306a\u308b\u30d5\u30a9\u30f3\u30c8\uff08\u4f8b\uff1aNoto Sans JP\uff09\u3092\u30c9\u30ed\u30c3\u30d7<\/li>\r\n          <li><b>\u8abf\u6574\u30d5\u30a9\u30f3\u30c8<\/b>\uff1a\u30b5\u30a4\u30ba\u3092\u8abf\u6574\u3057\u305f\u3044\u30d5\u30a9\u30f3\u30c8\uff08\u4f8b\uff1aRoboto\uff09\u3092\u30c9\u30ed\u30c3\u30d7<\/li>\r\n          <li>\u300c\u8a08\u7b97\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af<\/li>\r\n          <li>Markdown\u5f62\u5f0f\u3067\u7d50\u679c\u304c\u51fa\u529b\u3055\u308c\u3001\u81ea\u52d5\u3067\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3059\u3002<\/li>\r\n          <li>\u203b\u5b9f\u969b\u306b\u306f font-size \u3067\u6bd4\u8f03\u3057\u3066\u76ee\u8996\u3067\u78ba\u8a8d\u3059\u308b\u7b49\u3057\u305f\u65b9\u304c\u3001\u5b9f\u969b\u306e\u898b\u305f\u76ee\u306b\u8fd1\u304f\u78ba\u5b9f\u3067\u3059\u3002<\/li>\r\n        <\/ol>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\u2699\ufe0f \u8a08\u7b97\u65b9\u6cd5<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b>x-height\u57fa\u6e96<\/b>\uff1a\u5c0f\u6587\u5b57\u306e\u9ad8\u3055\uff08x\uff09\u3092\u63c3\u3048\u308b<\/li>\r\n          <li><b>Cap Height\u57fa\u6e96<\/b>\uff1a\u5927\u6587\u5b57\u30fb\u6570\u5b57\u306e\u9ad8\u3055\u3092\u63c3\u3048\u308b\uff08\u63a8\u5968\uff09<\/li>\r\n          <li><b>Ascender\u57fa\u6e96<\/b>\uff1a\u4e0a\u7aef\u3092\u63c3\u3048\u308b<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83d\udcd0 --font-top-offset \u3068\u306f\uff1f<\/h5>\r\n        <p class=\"fz-ss mb-0.5r\">\r\n          \u65e5\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u306f\u4e0a\u90e8\u4f59\u767d\uff08Ascender\uff09\u304c\u5e83\u304f\u3001\u30dc\u30bf\u30f3\u5185\u3067\u30c6\u30ad\u30b9\u30c8\u304c\u4e0b\u306b\u30ba\u30ec\u3066\u898b\u3048\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\r\n          <code>--font-top-offset<\/code> \u306f\u3001\u3053\u306e\u30ba\u30ec\u3092\u88dc\u6b63\u3059\u308b\u305f\u3081\u306eCSS\u5909\u6570\u3067\u3059\u3002\r\n          \u8a08\u7b97\u5f0f: <code>(Win Ascent - Win Descent - Cap Height) \/ 2<\/code>\r\n        <\/p>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83d\udccc \u5b9f\u88c5\u4f8b<\/h5>\r\n        <pre class=\"language-css\"><code>@font-face {\r\nfont-family: 'Roboto';\r\nsrc: url('Roboto-Regular.woff2') format('woff2');\r\nsize-adjust: 103%;  \/* Noto Sans JP \u306b\u5408\u308f\u305b\u308b *\/\r\n}\r\n\r\n\/* Noto Sans JP \u306e\u30ba\u30ec\u88dc\u6b63 *\/\r\n:lang(ja-NotoGP) {\r\n--font-top-offset: 0.07em;\r\n}\r\n\r\n.button {\r\npadding: calc(0.5em + var(--font-top-offset, 0em) \/ 2) 1em\r\n         calc(0.5em - var(--font-top-offset, 0em) \/ 2);\r\n}<\/code><\/pre>\r\n      <\/div>\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Relation\" \/>\r\n  <section class=\"sect-cnvtVkaA-Relation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u8a18\u4e8b<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/size-adjust-9463\/\" class=\"linkbox\">\r\n            <h4 class=\"linkbox-title fz-md\">CSS\u306esize-adjust\u3067\u65e5\u672c\u8a9e\u30fb\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u306e\u30b5\u30a4\u30ba\u3092\u63c3\u3048\u308b\u65b9\u6cd5<\/h4>\r\n            <span class=\"linkbox-excerpt\">\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\u89e3\u8aac\u3002<\/span>\r\n          <\/a>\r\n        <\/li>\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/noto-sans-jp-9917\/\" class=\"linkbox\">\r\n            <h4 class=\"linkbox-title fz-md\">Noto Sans JP\u306e\u30dc\u30bf\u30f3\u304c\u30ba\u30ec\u308b\u539f\u56e0\u3068\u89e3\u6c7a\u6cd5<\/h4>\r\n            <span class=\"linkbox-excerpt\">\u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u306e\u4ed5\u7d44\u307f\u3068 --font-top-offset \u3092\u4f7f\u3063\u305f\u6c4e\u7528\u7684\u306a\u89e3\u6c7a\u7b56\u3092\u89e3\u8aac\u3002<\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n<\/div><!-- \/\/\/.pg-saracnvtvkaa -->\r\n\r\n\r\n\r\n\r\n<!-- opentype.js -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/opentype.js@1.3.4\/dist\/opentype.min.js\"><\/script>\r\n\r\n<script>\r\n  (function () {\r\n    'use strict';\r\n\r\n    \/\/ State\r\n    var font1Data = null;\r\n    var font2Data = null;\r\n\r\n    \/\/ DOM Elements\r\n    var endropArea1 = document.getElementById('endropArea1');\r\n    var endropArea2 = document.getElementById('endropArea2');\r\n    var fileInput1 = document.getElementById('fileInput1');\r\n    var fileInput2 = document.getElementById('fileInput2');\r\n    var fileInfo1 = document.getElementById('fileInfo1');\r\n    var fileInfo2 = document.getElementById('fileInfo2');\r\n    var calculateBtn = document.getElementById('calculateBtn');\r\n    var decodeArea = document.getElementById('decodeArea');\r\n    var errorMessage = document.getElementById('errorMessage');\r\n    var successMessage = document.getElementById('successMessage');\r\n\r\n    \/\/ Dropzone Setup\r\n    function setupDropzone(endropArea, fileInput, fileInfoEl, onLoad) {\r\n      endropArea.addEventListener('click', function () { fileInput.click(); });\r\n      fileInput.addEventListener('change', function (e) {\r\n        if (e.target.files.length > 0) handleFile(e.target.files[0], endropArea, fileInfoEl, onLoad);\r\n      });\r\n      endropArea.addEventListener('dragover', function (e) {\r\n        e.preventDefault();\r\n        endropArea.classList.add('dragover');\r\n      });\r\n      endropArea.addEventListener('dragleave', function () { endropArea.classList.remove('dragover'); });\r\n      endropArea.addEventListener('drop', function (e) {\r\n        e.preventDefault();\r\n        endropArea.classList.remove('dragover');\r\n        if (e.dataTransfer.files.length > 0) handleFile(e.dataTransfer.files[0], endropArea, fileInfoEl, onLoad);\r\n      });\r\n    }\r\n\r\n    \/\/ File Handling\r\n    function handleFile(file, endropArea, fileInfoEl, onLoad) {\r\n      var ext = '.' + file.name.split('.').pop().toLowerCase();\r\n\r\n      if (ext === '.woff2') {\r\n        showMessage('WOFF2\u5f62\u5f0f\u306f\u76f4\u63a5\u8aad\u307f\u8fbc\u3081\u307e\u305b\u3093\u3002 <a class=\"link\" href=\"https:\/\/everythingfonts.com\/woff2-to-ttf\" target=\"_blank\" rel=\"noopener\">\u3053\u3061\u3089<\/a> \u3067TTF\u306b\u5909\u63db\u3057\u3066\u304f\u3060\u3055\u3044\u3002', false, 'errorMessage');\r\n        return;\r\n      }\r\n      if (['.ttf', '.otf', '.woff'].indexOf(ext) === -1) {\r\n        showMessage('\u5bfe\u5fdc\u5f62\u5f0f: TTF, OTF, WOFF', false, 'errorMessage');\r\n        return;\r\n      }\r\n\r\n      fileInfoEl.innerHTML = '<div class=\"caption fxd-row bgc-secondary fz-sm\"><span class=\"loading-indicator\"><\/span><span>\u8aad\u307f\u8fbc\u307f\u4e2d...<\/span><\/div>';\r\n\r\n      var reader = new FileReader();\r\n      reader.onload = function (e) {\r\n        try {\r\n          var font = opentype.parse(e.target.result);\r\n          var metrics = extractMetrics(font, file.name);\r\n          endropArea.classList.add('has-file');\r\n          fileInfoEl.innerHTML = '<div class=\"caption fxd-row bgc-secondary fz-sm\"><span class=\"file-name\">' + file.name + '<\/span><span class=\"file-size\">' + (file.size \/ 1024).toFixed(1) + ' KB<\/span><\/div>';\r\n          onLoad(metrics);\r\n          updateCalculateButton();\r\n          clearMessage('errorMessage');\r\n        } catch (err) {\r\n          showMessage('\u30d5\u30a9\u30f3\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557: ' + err.message, false, 'errorMessage');\r\n          fileInfoEl.innerHTML = '';\r\n        }\r\n      };\r\n      reader.readAsArrayBuffer(file);\r\n    }\r\n\r\n    \/\/ Extract Font Metrics\r\n    function extractMetrics(font, fileName) {\r\n      var os2 = font.tables.os2, head = font.tables.head, name = font.tables.name;\r\n      var fontName = fileName.replace(\/\\.[^\/.]+$\/, '');\r\n      if (name && name.fullName) fontName = name.fullName.en || name.fullName.ja || fontName;\r\n      var upm = head.unitsPerEm;\r\n\r\n      return {\r\n        fontName: fontName,\r\n        fileName: fileName,\r\n        upm: upm,\r\n        \/\/ size-adjust\u8a08\u7b97\u7528\uff08OpenType\u63a8\u5968\u5024\uff09\r\n        ascenderEm: os2.sTypoAscender \/ upm,\r\n        descenderEm: os2.sTypoDescender \/ upm,\r\n        capHeightEm: os2.sCapHeight ? os2.sCapHeight \/ upm : null,\r\n        xHeightEm: os2.sxHeight ? os2.sxHeight \/ upm : null,\r\n        \/\/ font-top-offset\u8a08\u7b97\u7528\uff08Windows\u4e92\u63db\u5024 = \u30d6\u30e9\u30a6\u30b6\u63cf\u753b\u306b\u4f7f\u7528\uff09\r\n        winAscentEm: os2.usWinAscent \/ upm,\r\n        winDescentEm: os2.usWinDescent \/ upm\r\n      };\r\n    }\r\n\r\n    \/\/ Calculate font-top-offset\r\n    \/\/ \u8a08\u7b97\u5f0f: (Win Ascent - Win Descent - Cap Height) \/ 2\r\n    \/\/ \u203b\u30d6\u30e9\u30a6\u30b6\u63cf\u753b\u3067\u306fusWinAscent\/usWinDescent\u304c\u4f7f\u7528\u3055\u308c\u308b\u305f\u3081\u3001\u3053\u3061\u3089\u3067\u8a08\u7b97\r\n    function calculateFontTopOffset(fontData) {\r\n      if (!fontData.capHeightEm) return null;\r\n      \/\/ usWinDescent\u306f\u6b63\u306e\u5024\u3068\u3057\u3066\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u307e\u307e\u5f15\u304f\r\n      var offset = (fontData.winAscentEm - fontData.winDescentEm - fontData.capHeightEm) \/ 2;\r\n      return offset;\r\n    }\r\n\r\n    \/\/ Calculate & Generate Markdown\r\n    function calculateSizeAdjust() {\r\n      if (!font1Data || !font2Data) return;\r\n\r\n      var results = {};\r\n      if (font1Data.xHeightEm && font2Data.xHeightEm) results.xHeight = font1Data.xHeightEm \/ font2Data.xHeightEm;\r\n      if (font1Data.capHeightEm && font2Data.capHeightEm) results.capHeight = font1Data.capHeightEm \/ font2Data.capHeightEm;\r\n      if (font1Data.ascenderEm && font2Data.ascenderEm) results.ascender = font1Data.ascenderEm \/ font2Data.ascenderEm;\r\n\r\n      \/\/ font-top-offset \u3092\u8a08\u7b97\uff08usWinAscent\/usWinDescent\u4f7f\u7528\uff09\r\n      results.font1TopOffset = calculateFontTopOffset(font1Data);\r\n      results.font2TopOffset = calculateFontTopOffset(font2Data);\r\n\r\n      var md = generateMarkdown(results);\r\n      decodeArea.value = md;\r\n      copyToClipboard(md);\r\n    }\r\n\r\n    \/\/ Generate Markdown\r\n    function generateMarkdown(results) {\r\n      var recommended = results.capHeight || results.xHeight || 1;\r\n      var recommendedPercent = Math.round(recommended * 100);\r\n\r\n      var md = '# ' + font1Data.fontName + ' \u00d7 ' + font2Data.fontName + ' \u6bd4\u8f03\u7d50\u679c\\n\\n';\r\n      md += '## \u63a8\u5968 size-adjust \u5024\\n**' + recommendedPercent + '%**\\n\\n';\r\n\r\n      \/\/ \u8a08\u7b97\u65b9\u6cd5\u5225\r\n      md += '### \u8a08\u7b97\u65b9\u6cd5\u5225\u306e\u5024\\n| \u57fa\u6e96 | \u5024 | \u7528\u9014 |\\n|---|---|---|\\n';\r\n      if (results.xHeight) md += '| x-height\u57fa\u6e96 | **' + Math.round(results.xHeight * 100) + '%** | \u5c0f\u6587\u5b57\u306e\u9ad8\u3055\u3092\u63c3\u3048\u308b |\\n';\r\n      if (results.capHeight) md += '| Cap Height\u57fa\u6e96 | **' + Math.round(results.capHeight * 100) + '%** | \u5927\u6587\u5b57\u30fb\u6570\u5b57\u306e\u9ad8\u3055\u3092\u63c3\u3048\u308b |\\n';\r\n      if (results.ascender) md += '| Ascender\u57fa\u6e96 | **' + Math.round(results.ascender * 100) + '%** | \u30d5\u30a9\u30f3\u30c8\u4e0a\u7aef\u3092\u63c3\u3048\u308b |\\n';\r\n      md += '\\n';\r\n\r\n      \/\/ \u30e1\u30c8\u30ea\u30af\u30b9\u6bd4\u8f03\r\n      md += '### \u30e1\u30c8\u30ea\u30af\u30b9\u6bd4\u8f03\\n| \u9805\u76ee | ' + font1Data.fontName + ' | ' + font2Data.fontName + ' | \u5dee\u5206 |\\n|---|---|---|---|\\n';\r\n      if (font1Data.xHeightEm && font2Data.xHeightEm) {\r\n        var xDiff = (font1Data.xHeightEm - font2Data.xHeightEm) * 1000;\r\n        md += '| x-Height | ' + font1Data.xHeightEm.toFixed(4) + 'em | ' + font2Data.xHeightEm.toFixed(4) + 'em | ' + (xDiff >= 0 ? '+' : '') + xDiff.toFixed(1) + '\/1000em |\\n';\r\n      }\r\n      if (font1Data.capHeightEm && font2Data.capHeightEm) {\r\n        var capDiff = (font1Data.capHeightEm - font2Data.capHeightEm) * 1000;\r\n        md += '| Cap Height | ' + font1Data.capHeightEm.toFixed(4) + 'em | ' + font2Data.capHeightEm.toFixed(4) + 'em | ' + (capDiff >= 0 ? '+' : '') + capDiff.toFixed(1) + '\/1000em |\\n';\r\n      }\r\n      var ascDiff = (font1Data.ascenderEm - font2Data.ascenderEm) * 1000;\r\n      var descDiff = (font1Data.descenderEm - font2Data.descenderEm) * 1000;\r\n      md += '| Ascender | ' + font1Data.ascenderEm.toFixed(4) + 'em | ' + font2Data.ascenderEm.toFixed(4) + 'em | ' + ascDiff.toFixed(1) + '\/1000em |\\n';\r\n      md += '| Descender | ' + font1Data.descenderEm.toFixed(4) + 'em | ' + font2Data.descenderEm.toFixed(4) + 'em | ' + descDiff.toFixed(1) + '\/1000em |\\n\\n';\r\n\r\n      \/\/ 16px\u3067\u306e\u5dee\r\n      md += '### 16px\u3067\u306e\u5b9f\u969b\u306e\u5dee\\n| \u57fa\u6e96 | \u5dee\u5206 |\\n|---|---|\\n';\r\n      if (font1Data.xHeightEm && font2Data.xHeightEm) md += '| x-height | ' + ((font1Data.xHeightEm - font2Data.xHeightEm) * 16).toFixed(2) + 'px |\\n';\r\n      if (font1Data.capHeightEm && font2Data.capHeightEm) md += '| Cap Height | ' + ((font1Data.capHeightEm - font2Data.capHeightEm) * 16).toFixed(2) + 'px |\\n';\r\n      md += '\\n';\r\n\r\n      \/\/ --font-top-offset \u30bb\u30af\u30b7\u30e7\u30f3\r\n      md += '---\\n\\n';\r\n      md += '## --font-top-offset\uff08\u30d5\u30a9\u30f3\u30c8\u306e\u4e0a\u90e8\u4f59\u767d\uff09\\n\\n';\r\n      md += '| \u30d5\u30a9\u30f3\u30c8 | --font-top-offset | \u5099\u8003 |\\n|---|---|---|\\n';\r\n\r\n      if (results.font1TopOffset !== null) {\r\n        var offset1 = results.font1TopOffset;\r\n        var offset1Rounded = Math.round(offset1 * 1000) \/ 1000; \/\/ 1\/1000em\u5358\u4f4d\u3067\u4e38\u3081\r\n        var offset1Str = offset1Rounded.toFixed(3) + 'em';\r\n        var note1 = offset1 > 0.03 ? '\u26a0\ufe0f \u88dc\u6b63\u63a8\u5968' : (offset1 > 0.015 ? '\u5fae\u8abf\u6574\u63a8\u5968' : '\u88dc\u6b63\u4e0d\u8981');\r\n        md += '| ' + font1Data.fontName + ' | **' + offset1Str + '** | ' + note1 + ' |\\n';\r\n      } else {\r\n        md += '| ' + font1Data.fontName + ' | - | Cap Height\u672a\u5b9a\u7fa9 |\\n';\r\n      }\r\n\r\n      if (results.font2TopOffset !== null) {\r\n        var offset2 = results.font2TopOffset;\r\n        var offset2Rounded = Math.round(offset2 * 1000) \/ 1000;\r\n        var offset2Str = offset2Rounded.toFixed(3) + 'em';\r\n        var note2 = offset2 > 0.03 ? '\u26a0\ufe0f \u88dc\u6b63\u63a8\u5968' : (offset2 > 0.015 ? '\u5fae\u8abf\u6574\u63a8\u5968' : '\u88dc\u6b63\u4e0d\u8981');\r\n        md += '| ' + font2Data.fontName + ' | **' + offset2Str + '** | ' + note2 + ' |\\n';\r\n      } else {\r\n        md += '| ' + font2Data.fontName + ' | - | Cap Height\u672a\u5b9a\u7fa9 |\\n';\r\n      }\r\n      md += '\\n';\r\n\r\n      \/\/ CSS\u5b9f\u88c5\u4f8b\uff08\u88dc\u6b63\u304c\u5fc5\u8981\u306a\u5834\u5408\u306e\u307f\uff09\r\n      var showCssExample = (results.font1TopOffset !== null && results.font1TopOffset > 0.015) ||\r\n                           (results.font2TopOffset !== null && results.font2TopOffset > 0.015);\r\n      if (showCssExample) {\r\n        var exampleOffset = results.font1TopOffset > 0.015 ? results.font1TopOffset : results.font2TopOffset;\r\n        var exampleOffsetRounded = Math.round(exampleOffset * 100) \/ 100; \/\/ \u8868\u793a\u7528\u306b1\/100em\u3067\u4e38\u3081\r\n        md += '### CSS\u5b9f\u88c5\u4f8b\\n';\r\n        md += '```css\\n';\r\n        md += ':lang(ja) {\\n';\r\n        md += '  --font-top-offset: ' + exampleOffsetRounded.toFixed(2) + 'em;\\n';\r\n        md += '}\\n\\n';\r\n        md += '.button {\\n';\r\n        md += '  padding: calc(0.5em + var(--font-top-offset, 0em) \/ 2) 1em\\n';\r\n        md += '           calc(0.5em - var(--font-top-offset, 0em) \/ 2);\\n';\r\n        md += '}\\n';\r\n        md += '```\\n';\r\n      }\r\n\r\n      return md;\r\n    }\r\n\r\n    \/\/ Copy to Clipboard\r\n    function copyToClipboard(text) {\r\n      navigator.clipboard.writeText(text).then(function () {\r\n        showMessage('\u30c6\u30ad\u30b9\u30c8\u304c\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3057\u305f\uff01', true, 'successMessage');\r\n      }, function (err) {\r\n        showMessage('\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u306e\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ' + err, false, 'successMessage');\r\n      });\r\n    }\r\n\r\n    \/\/ UI Helpers\r\n    function updateCalculateButton() { calculateBtn.disabled = !(font1Data && font2Data); }\r\n\r\n    \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\uff08markdown-converter.html \u3068\u540c\u69d8\u306e\u65b9\u5f0f\uff09\r\n    function showMessage(msg, isSuccess, messageAreaId) {\r\n      var messageArea = document.getElementById(messageAreaId);\r\n      var cls = isSuccess ? 'is-primary' : 'is-error';\r\n      var icon = isSuccess ? 'ma-check_circle' : 'ma-error';\r\n      var colorCls = isSuccess ? 'c-primary' : 'c-error';\r\n\r\n      var messageHTML = '<p class=\"alert is-ghosted ' + cls + ' mt-0.5r\">' +\r\n        '<i class=\"icon mas ' + icon + ' ' + colorCls + ' mr-0.5r\"><\/i>' +\r\n        '<span>' + msg + '<\/span><\/p>';\r\n\r\n      messageArea.innerHTML = '';\r\n      messageArea.insertAdjacentHTML('beforeend', messageHTML);\r\n\r\n      setTimeout(function () {\r\n        messageArea.innerHTML = '';\r\n      }, 3000);\r\n    }\r\n\r\n    function clearMessage(messageAreaId) {\r\n      var messageArea = document.getElementById(messageAreaId);\r\n      if (messageArea) messageArea.innerHTML = '';\r\n    }\r\n\r\n    \/\/ Initialize\r\n    setupDropzone(endropArea1, fileInput1, fileInfo1, function (d) { font1Data = d; });\r\n    setupDropzone(endropArea2, fileInput2, fileInfo2, function (d) { font2Data = d; });\r\n    calculateBtn.addEventListener('click', calculateSizeAdjust);\r\n    decodeArea.addEventListener('click', function () {\r\n      if (this.value) {\r\n        this.select();\r\n        copyToClipboard(this.value);\r\n      }\r\n    });\r\n  })();\r\n<\/script>","protected":false},"excerpt":{"rendered":"2\u3064\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u6bd4\u8f03\u3057\u3066\u3001CSS\u306e size-adjust \u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6700\u9069\u5024\u3092\u8a08\u7b97\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3002\u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u5024\u30fb--font-top-offset \u306e\u5024\u3082\u53d6\u5f97\u3002","protected":false},"author":1,"featured_media":10069,"parent":173,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"page\/page-converter.php","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":{"0":"post-10028","1":"page","2":"type-page","3":"status-publish","4":"has-post-thumbnail","6":"category-tool"},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/10028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"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=10028"}],"version-history":[{"count":10,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/10028\/revisions"}],"predecessor-version":[{"id":10106,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/10028\/revisions\/10106"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/10069"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=10028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=10028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=10028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}