HTMLでテキストの色々なカーニング設定を整理してみました。
■HTMLでのカーニング適用
<!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 {
background-color: lemonchiffon;
font-family:'ＭＳ Ｐ明朝', 'ＭＳ 明朝';
font-size: 14pt;
font-weight: 700;
}
.kerning-wide {
letter-spacing: 2px; /* 文字間を広げる */
}
.kerning-tight {
letter-spacing: -1px; /* 文字間を狭める */
}
</style>
</head>
<body>
<p>HTML上のテキストカーニングについて（無設定）</p>
<p class="kerning-wide">
HTML上のテキストカーニングについて（広げる）</p>
<p class="kerning-tight">
HTML上のテキストカーニングについて（狭める）</p>
</body>
</html>
HTMLでのカーニング適用の実行結果
（MS P明朝）
■ブラウザの自動カーニング適用（Chromeで実行）
<!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 {
background-color: lemonchiffon;
font-family:'ＭＳ Ｐ明朝', 'ＭＳ 明朝';
font-size: 14pt;
font-weight: 700;
}
p {
font-kerning: normal; /* ブラウザの自動カーニング */
/* auto ブラウザのデフォルト
（フォントにカーニング情報があれば適用）
normal 可能ならカーニングを適用
none カーニングを無効化
*/
}
</style>
</head>
<body>
<p>HTML上のテキストカーニングについて
（ブラウザの自動カーニング）</p>
</body>
</html>
ブラウザの自動カーニング適用の実行結果
（MS P明朝）
■OpenTypeのカーニング適用
<!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 {
background-color: lemonchiffon;
font-family:'ＭＳ Ｐ明朝', 'ＭＳ 明朝';
font-size: 14pt;
font-weight: 700;
}
p {
font-feature-settings: "kern";
/* OpenTypeのカーニング適用 */
}
</style>
</head>
<body>
<p>HTML上のテキストカーニングについて
（OpenTypeのカーニング適用）</p>
</body>
</html>
OpenTypeのカーニング適用の実行結果
（MS P明朝）
