画像解像度を変更した時のフォントサイズ確認計算式を作成しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>フォントサイズ計算</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 10px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>解像度変更時のフォントサイズを計算</h3>
<label>元のフォントサイズ(px)：
<input type="number" id="originalSize" value="12">
</label><br>
<label>  元の画像解像度(DPI)：
<input type="number" id="originalDpi" value="72">
</label><br>
<label>   新しい解像度(DPI)：
<input type="number" id="newDpi" value="350"></label>
<br><br>
<button onclick="calculateFontSize()">計算</button>
<h3 style="color: yellow">新しいフォントサイズ:
<span id="newFontSize">-</span> px</h3>
<script>
function calculateFontSize() {
let originalSize = parseFloat(document.
getElementById("originalSize").value);
let originalDpi = parseFloat(document.
getElementById("originalDpi").value);
let newDpi = parseFloat(document.
getElementById("newDpi").value);
if (originalDpi > 0 && newDpi > 0) {
let newSize = originalSize / (newDpi / originalDpi);
document.getElementById("newFontSize").innerText =
newSize.toFixed(2);
} else {
alert("解像度は正の値を入力してください。");
}
}
</script>
</body>
</html>
実行直後の画面。必要な値を入力して［計算］をクリックッすれば・・・
新しい解像度を表示します。
