商品説明文・販売説明文内のテキストの文字間について

Question

ご存じでしたら教えてください。
楽天の商品説明文中に
文章を画像化せずテキスト要素で掲載する場合、
HTMLやCSSで文字間を詰める（カーニングの様なイメージです）ことは出来ますか？

Answer

ECマスターズの伊藤です。

> 文章を画像化せずテキスト要素で掲載する場合、
> HTMLやCSSで文字間を詰める（カーニングの様なイメージです）ことは出来ますか？

Macでの表示となりますが
下記の通りカーニングの設定が可能です。
https://ec-masters.gyazo.com/bbc3df3aef6ed2648b5656bb9e8b5f06

なお、モバイルはCSSの利用ができませんので、
PCのみご対応可能となります。

使用したCSSもご案内いたしますので、
お試しください。

letter-spacingについては、
数値（0.2em）は任意に変更が可能です。
例:18pxなど


.palt{
  font-feature-settings: "palt" 1;
}
.halt{
  font-feature-settings: "halt";
}
.pwid{
  font-feature-settings: "pwid";
}
.pkna{
  font-feature-settings: "pkna";
}
.lspacing-02 {
   letter-spacing: -0.2em;
}
.lspacing02 {
   letter-spacing: 0.2em;
}


■ 指定なし
【あぁいぃうぅえぇおぉ、「か」『き』［く］《け》こ。】

■ font-feature-settings: "pkna";
【あぁいぃうぅえぇおぉ、「か」『き』［く］《け》こ。】
■ font-feature-settings: "pwid";
【あぁいぃうぅえぇおぉ、「か」『き』［く］《け》こ。】
■ font-feature-settings: "halt";
【あぁいぃうぅえぇおぉ、「か」『き』［く］《け》こ。】

■ spacing(-0.2em)
【あぁいぃうぅえぇおぉ、「か」『き』［く］《け》こ。】
■ spacing(0.2em)
【あぁいぃうぅえぇおぉ、「か」『き』［く］《け》こ。】

Answer

迅速なご回答ありがとうございます。
スマホ商品説明文の方はCSSが使えないから不可、ということですね。

ありがとうございました。