スクリプトタグ解説

パラメータについて

スクリプトの動作はパラメータによって決定されます。パラメータは内部デフォルト値、スクリプトタグのデータ属性、スクリプトタグのsrc属性のクエリパラメータ、それに読み込み先ページURLのクエリパラメータを順に結合して決定されます。もし同じパラメータが二か所に存在する場合、後に結合されるほうが優先されます。

スクリプトタグのdata属性

パラメータ名 値(デフォルト値) 分類 説明
src URL 必須 スクリプトのURLです。
data-rt-user ランダムな文字列 必須 ユーザーを識別するIDです。
data-rt-manual 真偽値(false) オプション trueにした場合、ページの読み込み時にWebフォントが適用されません。Webフォントを適用する場合は、javascriptでRT.start、RT.observeを実行してください。
data-rt-emulation 真偽値(false) オプション trueにした場合、外字機能が有効になります。
data-rt-layout 真偽値(false) オプション このオプションをtrueにすると、Webフォントでfont-feature-settingsを利用できます。
Webフォントを縦書きに適用する場合もtureにしてください。
data-rt-input 真偽値(false) オプション trueの場合、ユーザーがtextareaとinputに入力した文字に自動的にWebフォントがあたるようになります。
data-rt-nofliker 真偽値(false) オプション 上記がtrueの場合に、フォントがちらついてしまうのを軽減します。(chromeのみ有効)
data-rt-cache 真偽値(false) オプション ページ表示時にフォントをブラウザに保存することで、そのページの次回以降のWebフォント表示を高速化します。
本オプションを使用する場合は、スクリプトタグはbody部に記述してください。

スクリプトタグのデータ属性で設定した場合の例

<script
  src = "//font.realtype.jp/api/script/v4"
  data-rt-user= "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  data-rt-layout = "true"
></script>

スクリプトタグのsrcのクエリパラメータで設定した場合の例(data-は不要です)

<script src="//font.realtype.jp/api/script/v4?rt-user=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&rt-layout=true"></script>

APIについて

スクリプトの動作を直接的に操作したい場合は、下記のAPIを使用して下さい。

String RT.version()

現在のスクリプトのバージョンを文字列で取得します。

console.log(RT.version()); // "1.1.0"

String RT.support()

現在のスクリプトのサポートメールアドレスを文字列で取得します。

console.log(window.RT.support()); // "support@realtype.co.jp"

Object RT.options()

パラメーターをオブジェクトで取得します。

{
  codeTimeout       : 60000,
  dynamic           : false,
  emulation         : "true",
  eventIntervalTime : 250,
  flikerTime        : 50,
  glyfTimeout       : 60000,
  host              : "//example.com/",
  input             : "true",
  layout            : false,
  listTimeout       : 1000,
  manual            : false,
  metaTimeout       : 60000,
  nofliker          : false,
  user              : "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

Promise RT.list()

使用できるフォントファミリの一覧をオブジェクトで取得します。

{
	'A+RT-xxx YYYYYYYYYY' : "5ad49a07682e15099eb2fc37f0d33594c180271796e5cc55229a1238785b4e3f",
	'A+RT-zzz AAAAAAAAAA' : "51c06fdd8e8466ddcbd0898ddfad7e1915918d24d3cce5f5b2164eb146d0108f"
}

RT.start(catchFunc,finalFunc)

パラメータのrt-manualをtrueにする必要があります。

手動で処理を開始します。DOM変更イベント及びテキスト監視が開始されます。catchFuncはエラー(タイムアウト等)により発火します。finalFuncはすべてのフォントが正常に読み込まれた後、もしくはエラー処理の後に発火します。

RT.start(
  function(e){
    console.log("エラー発生");
  },
  function(){
    console.log("処理が終了した");
  }
);

RT.observe()

パラメータのrt-manualをtrueにする必要があります。

DOM変更イベント及びテキスト監視を開始します。

RT.observe();

RT.release()

パラメータのrt-manualをtrueにする必要があります。

DOM変更イベント及びテキスト監視を終了します。

RT.release();