CSS - input, button, textareaなどのフォントが異なる

input や select, button は OSのUIフォント、textarea は 等幅フォント になります。bodyなど、親のフォント設定は継承されません。

Google Chrome
Google Chrome
Microsoft Edge
Microsoft Edge

フォントを統一させる方法

input, select, button, textarea に次のスタイルを指定します。inherit を指定すると、親要素の設定と同じになります。
font-family: inherit;

サンプルコード

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>input, button, textareaなどのフォントが異なる</title>
    <style>
        body {
            font-family: serif;
        }
        input, select, button, textarea {
            font-family: inherit;
        }
    </style>
</head>
<body>
    <table>
        <tr><td>pなど</td><td>abcdf12345あいうえお</td></tr>
        <tr><td>input</td><td><input value="abcdf12345あいうえお" /></td></tr>
        <tr><td>select</td><td><select><option>abcdf12345あいうえお</option></select></td></tr>
        <tr><td>button</td><td><button>abcdf12345あいうえお</button></td></tr>
        <tr><td>textarea</td><td><textarea>abcdf12345あいうえお</textarea></td></tr>
    </table>
</body>
</html>
サンプルコードの表示結果(Google Chrome)
サンプルコードの表示結果(Google Chrome)
サンプルコードの表示結果(Microsoft Edge)
サンプルコードの表示結果(Microsoft Edge)

検証環境