Cntlog > スキルアップ・ノウハウ > コーディング > 【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた

【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた

TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。
そのCSSは「font-feature-settings」というものです。

詳しい事は下記記事よりご確認ください。

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

簡単にCSSでカーニング出来るんだーやったーとか思ってたのですが、また興味深いツイートがありました。

どんなときにも自動詰め組みが良いかと言われるとそうではないよなー。
なので考えるよりも実際に比べたほうが早いかなと思って比較をするページを作成しました。
また自分なりに「font-feature-settings」の使い方で試したい事があったのでそれも並べてみました。

サンプルを作ってみた

 .default-block { padding: 1em; background: #e8f5e9; } .sample-block { font-feature-settings: "palt"; background: #eceff1; padding: 1em; } .custom-block { font-feature-settings: "palt"; letter-spacing: .1em; background: #e3f2fd; padding: 1em; } 

font-feature-settings比較ページ

自分で作ったサンプルでは単純にfont-feature-settingsを入れるより、文字詰めしていないほうが読みやすいかなーという印象です。
ただ、「」の部分(サンプルだと「弱虫やーい。」のところ)とかが文字詰めされているので、この点は読みやすいかな思ってます。

なので「letter-spacing」を使うと文字間もいい感じに合わさりつつ、余白も詰まって読みやすいのかなと思ってサンプルに加えました。

いかがでしょう。

結論

font-feature-settingsはすごく魅力的なプロパティには変わりないので私は使っていきます。特に見出し周り。
Web上で出来ることがどんどん増えて僕は見てて楽しいです。

関連記事

コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...