【29】文字間を自動調整してくれる font-kerningプロパティ

最終更新日:2018年04月21日  (初回投稿日:2018年04月21日)

font-kerningプロパティは、フォントが持っている「カーニング情報」を使って文字間を自動調整します。
kerning はそのままズバリ「カーニング」。

「カーニング」とは 印刷・エディトリアル用語で、字間(アキ)の調整をすること。
フォントのフォルムによって空いて見えるところ(W と A の間とか)を詰めたりすることです。

このプロパティは、IE11, Edge 以外は ほぼ実装IOS Safari にはベンダープレフィックス(-webkit-)が要るようです(2018年4月記 / 参考:Can I Use

本日のINDEX
  1. font-kerningプロパティの値
  2. font-kerningプロパティの使い方
    1. letter-spacing との併用もできます
  3. font-feature-settingsなら日本語もカーニング

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation
font-kerning - CSS | MDN

font-kerningプロパティの値

font-kerningプロパティの値
キーワード auto normal none
auto がデフォルト値。カーニングする・しないはブラウザに任せる。
normal は、カーニングする。
none は、カーニングしない。
グローバル値 font-kerning: inherit; 親の値を継承(コレ書かなくても継承するけど)
font-kerning: initial; 継承した親の値を解消しデフォルト値に戻す
font-kerning: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

font-kerningプロパティの使い方

フォントに含まれるカーニングデータを使うので、カーニングデータが元々無いフォントだと、このプロパティを使っても何も起こりません。
カーニングデータを持つフォント形式は、OpenType(OTF)WOFF(Web Open Font Format)です。

では、試してみます。(IE11, Edge は未対応です)
Google Fonts の Lato というフォントを使っています。
このプロパティ、日本語(全角)フォントには無関係なようです。

font-kerning: auto P. Wa, WAV, To, Yo

font-kerning: normal P. Wa, WAV, To, Yo

font-kerning: none P. Wa, WAV, To, Yo

Firefox(Mac)で見たら、こんなかんじ。
none 以外では「P と . 」の間、「W と a」の間などが詰まっています。

ヘディング(<h1>〜<h6>)で使う場合などでは、 autoでブラウザ任せにするんじゃなく、font-kerning: normal と指定したほうがイイかも。ただし IE11, Edge が未実装ですが(2018年4月記)。スマホ用ならすぐにでも使えますね。

上のサンプルのソースコードです。

<div class="mihon">
  <p class="k-auto">
  <span>font-kerning: auto</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-normal">
  <span>font-kerning: normal</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none">
  <span>font-kerning: none</span>
  P. Wa, WAV, To, Yo</p>
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Lato:900');
.mihon p {
	font-family:'Lato', sans-serif;
	margin:20px 0;
	font-size:3rem;
	line-height:1.2
	}
.k-auto {
	-webkit-font-kerning: auto;
	font-kerning: auto}
.k-normal {
	-webkit-font-kerning: normal;
	font-kerning: normal}
.k-none {
	-webkit-font-kerning: none;
	font-kerning: none}
.mihon p span {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-weight:normal;
	font-size:15px;
	color:#579961;
	display:block;
	margin:0}
</style>

letter-spacing との併用もできます

letter-spacingプロパティも同時に使っている場合、font-kerningの適用後に letter-spacing が行われるそうです。

letter-spacingプロパティは、文字間の間隔を指定するもの。1文字ずつ一定の間隔で開けたり詰めたりできます。このプロパティはフォントモジュールが終わってから記事にする予定です。

試してみます。

font-kerning: normal のみ P. Wa, WAV, To, Yo

font-kerning: なし、letter-spacing: -0.03em P. Wa, WAV, To, Yo

font-kerning: normal; letter-spacing: -0.03em; P. Wa, WAV, To, Yo

どっちもなし P. Wa, WAV, To, Yo

letter-spacing は1文字ずつ固定値で調整しますが、font-kerning は臨機応変に詰めてくれます。で、font-kerning だけでは物足りない時に、letter-spacing も併用できるので便利かもね。

上のサンプルのソースコードです。

<div class="mihon">
  <p class="k-normal">
  <span style="letter-spacing:0">font-kerning: normal のみ</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none-spacing">
  <span style="letter-spacing:0">font-kerning: なし、letter-spacing: -0.03em</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-normal-spacing">
  <span style="letter-spacing:0">font-kerning: <b>normal</b>; letter-spacing: -0.03em;</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none">
  <span>どっちもなし</span>
  P. Wa, WAV, To, Yo</p>
</div>
<style>
.k-none-spacing {
	-webkit-font-kerning: none;
	font-kerning: none;
	letter-spacing: -0.03em}
.k-normal-spacing {
	-webkit-font-kerning: normal;
	font-kerning: normal;
	letter-spacing: -0.03em}
</style>

font-feature-settingsなら日本語もカーニング

font-kerningプロパティによるカーニング調整は、日本語フォント(全角)では使えないようです。
日本語のカーニングは font-feature-settingsプロパティで可能で、こちらは IE11, Edge でも実装しています。

font-feature-settingsプロパティについては後日詳細な記事にまとめます。

下記のように書きます。

font-feature-settings: "palt";

サンプルビューです。

(未指定)昨日、今日、あした

(font-feature-settings: "palt")昨日、今日、あした

次回予告

次回から、font-variant に関するプロパティを見ていきましょう。

初回は font-variant-capsプロパティ
このプロパティは、CSS 2 のときは font-variantプロパティとして、スモールキャップを指定するためのものでした。
CSS 3(Fonts Module Level 3)からは、値がもっと増えて font-variant-capsプロパティと名前も変わりました。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2018/05 | 06
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.