FONTPLUS|文字詰め機能

Kerning

文字詰め機能

メニュー(目次)

概要

スマートライセンスをご利用されているお客様に、簡単に文字詰めができる機能をご案内します。

通常、Webページ上のテキストは、文字と文字の間隔が不揃いになり美しく表示されない場合があります。例えば、促音(そくおん)「っ」、拗音(ようおん)「ゃ」「ゅ」「ょ」等のような仮名小文字は、文字間の余白が空きすぎる傾向にあり、部分的な文字幅調整に時間がかかることが多いのではないかと思います。

文字詰め機能適用前のWebフォント表示例

そこで、フォントプラスでは、「自動設定(プロポーショナルメトリクス機能)」と「文字間の余白削除機能」の2種類の文字詰め機能をご用意しています。

また、これまではページ全体に対する機能でしたが、2015年10月13日より、指定した箇所(セレクタ)に部分的に適用することが可能となりました。用途に合わせて、お好みの機能をご活用ください。

機能説明

1. 自動設定(プロポーショナルメトリクス機能)

フォントデータに組み込まれているプロポーショナルメトリクス情報を元に、自動的に文字詰めを行います。プロポーショナルメトリクス情報とは、書体デザイナーが設定した各文字の最適な余白情報のことです。

自動設定適用後のWebフォント表示例

 注意事項

◆ 対応書体・・・フォントデータの中にプロポーショナルメトリクス情報が入っている書体
フォントデータによっては、プロポーショナルメトリクス情報が組み込まれていないものもありますので、利用したいフォントにプロポーショナルメトリクス情報が組み込まれているかどうか、フォントリストにてご確認ください。
◆ 対応ブラウザ・・・モダンブラウザ
※IE8以前等の古いブラウザでは反映されない場合があります。

2. 文字間の余白削除機能

それぞれの文字に含まれる左右の余白を一括で取り除くことができます。

余白削除機能適用後のWebフォント表示例

この機能で文字の余白を削除した後に、CSSの「letter-spacing」を設定すれば一文字ずつ細かい設定をすることなく、均一に文字詰めを行うことができます。

余白削除機能適用後のWebフォント表示例2

 注意事項

◆ 文字間の余白削除が動作しない書体
一部の書体において、ブラウザによって機能が動作しない場合がございます。
書体のリストは、こちらからご確認ください。
◆ 例外的に余白幅を残した文字
下記の記号系の文字につきましては、余白を完全に削除するとバランスがよくないため、字面の両サイド、または片側のみに余白を残しています。
両サイドに余白を残している文字 右サイドに余白を残している文字
1 半角数字 , 半角・カンマ
全角数字 . 半角・ピリオド
全角中点 全角・カンマ
全角縦棒 全角・ピリオド
全角縦棒 全角・読点
全角縦棒 全角・句点
左サイドに余白を残している文字 全角・鍵括弧(終)
全角・鍵括弧(始) 全角・二重鍵括弧(終)
全角・二重鍵括弧(始) 全角・山括弧(終)
全角・山括弧(始) 全角・隅付き括弧(終)
全角・隅付き括弧(始) 全角・亀甲括弧(終)
全角・亀甲括弧(始) 全角・隅付き括弧(白)(終)
全角・隅付き括弧(白)(始) 全角・二重亀甲括弧(終)
全角・二重亀甲括弧(始) 全角・二重角括弧(終)
全角・二重角括弧(始) 全角・丸括弧(終)
全角・丸括弧(始) 全角・波括弧(終)
全角・波括弧(始) 全角・大括弧(終)
全角・大括弧(始) 全角・引用符(終)
全角・引用符(始) 全角・二重引用符(終)
全角・二重引用符(始)  

利用方法

A.ページ全体

1. 自動設定(プロポーショナルメトリクス機能)

スマートライセンスの「スクリプト発行」ページよりをスクリプトを取得する際、詳細設定の文字詰め機能で「自動設定」にチェックを入れ、スクリプトタグをhtmlへ記述してください。以上で設定は完了です。

※スマートライセンスの詳しい導入方法はログイン後の「スマート>利用方法」ページをご覧ください。

スクリプト発行画面のキャプチャ画像1

既にスクリプトタグをhtmlへ記述済みの場合

htmlファイルに記述しているフォントプラスのスクリプトタグの後方にパラメータ「&pm=1」を追記してください。

<script type=”text/javascript” src=”http://webfont.fontplus.jp/accessor/script/fontplus.js?xxxxx&aa=1” charset=”utf-8”></script>

<script type=”text/javascript” src=”http://webfont.fontplus.jp/accessor/script/fontplus.js?xxxxx&aa=1&pm=1” charset=”utf-8”></script>

2. 文字間の余白削除機能

【1】スマートライセンスの「スクリプト発行」ページよりをスクリプトを取得する際、詳細設定の文字詰め機能で「文字間の余白削除」にチェックを入れ、スクリプトタグをhtmlへ記述してください。

※スマートライセンスの詳しい導入方法はログイン後の「スマート>利用方法」ページをご覧ください。

スクリプト発行画面のキャプチャ画像2

 既にスクリプトタグをhtmlへ記述済みの場合

htmlファイルに記述しているフォントプラスのスクリプトタグの後方にパラメータ「&t=0」を追記してください。

<script type=”text/javascript” src=”http://webfont.fontplus.jp/accessor/script/fontplus.js?xxxxx&aa=1” charset=”utf-8”></script>

<script type=”text/javascript” src=”http://webfont.fontplus.jp/accessor/script/fontplus.js?xxxxx&aa=1&t=0” charset=”utf-8”></script>

(余白削除機能適用後のWebフォント表示例)

余白削除機能適用後のWebフォント表示例

 

【2】設定後は上記のように文字の余白が削除されますので、CSSの ”letter-spacing” を使って調整してください。

(CSSの記述例)

h1 {
  font-family: "FOT-マティス Pro B";
  letter-spacing: 0.15em;
  }

(CSS調整後のWebフォント表示例)

余白削除機能適用後のWebフォント表示例2

B.指定した部分のみ

1. 自動設定(プロポーショナルメトリクス機能)

文字詰めを適用したいセレクタにCSSでフォントを指定し、フォント名の後に {pm} と追記して下さい。

(例:h1タグに自動設定を適用)

h1 { font-family: "XXXXXX{pm}"; }

★サンプルページ  h1タグに設定 / pタグに設定

2. 文字間の余白削除機能

文字詰めを適用したいセレクタにCSSでフォントを指定し、フォント名の後に {t=0} と追記して下さい。

(例:h1タグに文字間の余白削除機能を適用)

h1 { font-family: "XXXXXX{t=0}"; }

★サンプルページ  h1タグに設定 / pタグに設定