スクリプトタグ解説
パラメータについて
スクリプトの動作はパラメータによって決定されます。パラメータは内部デフォルト値、スクリプトタグのデータ属性、スクリプトタグの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を使用して下さい。
現在のスクリプトのバージョンを文字列で取得します。
console.log(RT.version()); // "1.1.0"
現在のスクリプトのサポートメールアドレスを文字列で取得します。
console.log(window.RT.support()); // "support@realtype.co.jp"
パラメーターをオブジェクトで取得します。
{
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"
}
使用できるフォントファミリの一覧をオブジェクトで取得します。
{
'A+RT-xxx YYYYYYYYYY' : "5ad49a07682e15099eb2fc37f0d33594c180271796e5cc55229a1238785b4e3f",
'A+RT-zzz AAAAAAAAAA' : "51c06fdd8e8466ddcbd0898ddfad7e1915918d24d3cce5f5b2164eb146d0108f"
}
パラメータのrt-manualをtrueにする必要があります。
手動で処理を開始します。DOM変更イベント及びテキスト監視が開始されます。catchFuncはエラー(タイムアウト等)により発火します。finalFuncはすべてのフォントが正常に読み込まれた後、もしくはエラー処理の後に発火します。
RT.start(
function(e){
console.log("エラー発生");
},
function(){
console.log("処理が終了した");
}
);
パラメータのrt-manualをtrueにする必要があります。
DOM変更イベント及びテキスト監視を開始します。
RT.observe();
パラメータのrt-manualをtrueにする必要があります。
DOM変更イベント及びテキスト監視を終了します。
RT.release();