OpenTypeのフォントで文字の間隔を詰めたい - 游ゴシック・游明朝の文字の間隔がスカスカなのを詰めたい
CSSでOpenTypeのフォントで文字の間隔を詰めるコードを紹介します。
概要
HTMLページで、游ゴシックや游明朝のフォントを利用すると文字の間隔が開き、見た目がスカスカに見えます。スカスカな見栄えを防ぐため、游ゴシックや游明朝の文字間隔を狭めたいことがあります。この記事では、游ゴシックや游明朝のフォント形式であるOpenTypeフォントを利用している場合に文字の間隔を詰めるCSSを紹介します。
OpeyTypeフォントで文字間を詰めるには、CSSの font-feature-settings に"palt"を指定します。paltを指定することで文字のカーニングが有効になります。
書式
font-feature-settings: "palt";
例
HTML
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="palt-style.css" />
</head>
<body>
<h4>font-feature-settings:normal</h4>
<p class="text-normal">
メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。
メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此のシラクスの市にやって来た。
</p>
<h4>font-feature-settings:"palt"</h4>
<p class="text-palt">
メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。
メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此のシラクスの市にやって来た。
</p>
</body>
</html>
.text-normal {
font-family:"Yu Gothic";
font-size:18px;
font-feature-settings:normal;
}
.text-palt {
font-family: "Yu Gothic";
font-size: 18px;
font-feature-settings: "palt";
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。font-feature-settings の値が normal のほうは標準の文字間隔で表示され、文字の間隔が広めです。font-feature-settings の値が "palt" の表示は文字の間隔が詰められて表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
