先日、Facebookを眺めていたら、たまたまシェアされていたこんな記事がありました。
https://ics.media/entry/14087/
かつては、HTMLやCSSのことばかりやってきていたのに、現場からはすっかり遠のいてしまったこともあり、このあたりを全くキャッチアップできていませんでした。そして、これを読んだすぐ後に、いわゆるウェブフォントサービスでfont-feature-settingって適用されるのだろうか?という疑問を覚えました。
いてもたってもいられなくなったため、早速自分のサイト(Jimdoで制作してます)で試してみることにしました。
https://www.t-studio.com/2016/12/15/jimdo-font-test1/
以下のイメージは、実際に段落にfont-feature-settingを適用していない文章と適用した文章を比較したものなのです。この文章に定義されているフォントは、Jimdoの「スタイル」設定でサイト内の本文を「UD新ゴL」にしたものです。
コンテンツの追加で「文章」を選び、文章を流し込んだ後に、ウィジェットからpタグにたいしてstyle属性でfont-feature-settingを定義しています。
文章にfont-feature-settingを設定していない文章と設定している文章を比較している画像。結構詰まってますね。
文字詰めなし、ありを見比べるとすぐにわかるのですが、句読点の余白だけでなく、各文字の間がそれぞれイイ感じで詰まっています。サンプルサイトではスタイル属性で付与していますが、ヘッダー編集機能を使って、グローバルに文字詰めの指定をすることも、もちろん可能です。
サンプルテキストの上段が詰めなし。下段が詰めあり。
サイトでも紹介した詰め具合がわかる拡大画像なのですが、font-feature-settingを設定した文章では、この範囲だけでも1文字強分、文字が詰まっているのがわかりますね。
Jimdo Pro / Jimdo Businessお使いの方で、モリサワ日本語フォントを指定されている方は、ぜひ試してみてはいかがですか?