※本APIの利用規約はTypeSquareの利用規約に準じます。
URLタグオプションは配信利用タグのtypesquare.js にパラメータを追加することで、ロード時の動作を変更できるオプションです。
Webフォントが適用される前に、サイト内のテキストがブラウザのデフォルトフォントで表示されていると、適用時に画面がちらついて見えてしまうことがあります。このちらつきを抑えるためのフェードイン機能がご利用いただけます。
※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。
<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?q76O1i4KMzo%3D" charset="utf-8"></script>
<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?q76O1i4KMzo%3D&fadein=10" charset="utf-8"></script>
画面ロード時ではなく任意のタイミングでフォントをロードする場合、このオプションを利用して初期のフォントロードを止めて下さい。 非同期に動作するアプリケーションなどで、初期ページロード時にフォントを読み込む必要がない場合などにご利用いただくと便利です。
※ リロード機能を利用することで、任意のタイミングでフォントの配信をおこなうことができます。
※ 本機能を利用するには、プラン専用タグの「/accessor/script」を「/accessor/apiscript」に変更して下さい。
※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D&loadstart=0" charset="utf-8"></script> <style type="text/css" rel="stylesheet"> #nonload_text { font-family: 'Kaimin Tsuki Bold'; } </style> </head> <body> <span id="nonload_text">最初はフォントがロードされません。</span> <button type="button" onclick="Ts.reload();">フォントをロード</button> </body> </html>
TypeSquare JavaScript APIはフォント配信の拡張機能です。Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。任意のタイミングでWebフォントを取得したり、Webフォントの適用をセレクタ単位で指定することが可能です。
拡張機能を利用するには、プラン専用タグの「/accessor/script」を「/accessor/apiscript」に変更して下さい。
メソッド
|
Ts.onComplete(callback)
|
機能
|
Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
|
引数
|
callback (必須) : コールバック関数
|
戻り値(XML)
|
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー |
備考
|
callback(res)
res.code : 0:正常, -1:ロードエラー, 1:変換対象なし res.font[n].name : フォント名 res.font[n].status : ステータス: true/false |
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <style type="text/css" rel="stylesheet"> body { font-family: 'Maru Folk Heavy'; } #callback { color: blue; visibility: hidden; } </style> <script type="text/javascript"> callback = function(res) { var css = document.getElementById('callback'); if (res.type == 'css') { css.textContent = res.data; } if (res.code == 0) { css.style.visibility = 'visible'; } } Ts.onComplete(callback); </script> </head> <body> <p>コールバックなし</p> <p id="callback">コールバックあり</p> </body> </html>
Webフォントのダウンロードが完了したらコールバックします。リロードして下さい。
メソッド
|
Ts.onPreComplete(callback)
|
機能
|
1書体毎にWebフォント取得前の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
|
引数
|
callback (必須) : コールバック関数
|
戻り値(XML)
|
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー |
備考
|
callback(res)
res.code : 0:正常, -1:ロードエラー, 1:変換対象なし res.font[0].name : フォント名 res.font[0].status : ステータス: true/false |
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <style type="text/css" rel="stylesheet"> body { font-family: 'Maru Folk Heavy'; } #callback { color: blue; visibility: hidden; } </style> <script type="text/javascript"> callback = function(res) { var css = document.getElementById('callback'); if (res.type == 'css') { css.textContent = res.data; } if (res.code == 0) { alert('フォントの適用前です'); css.style.visibility = 'visible'; } } Ts.onPreComplete(callback); Ts.setLoadStart(0); </script> </head> <body> <p>コールバックなし</p> <p id="callback">コールバックあり(適用前)</p> <button onclick="Ts.reload();">フォントをロード</button> </body> </html>
Webフォントのダウンロードが完了したら適用前にコールバックします。サンプルをリロードしてお試し下さい。
メソッド
|
Ts.onPostComplete(callback)
|
機能
|
1書体毎にWebフォント適用後の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
|
引数
|
callback (必須) : コールバック関数
|
戻り値(XML)
|
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー |
備考
|
callback(res)
res.code : 0:正常, -1:ロードエラー, 1:変換対象なし res.font[0].name : フォント名 res.font[0].status : ステータス: true/false |
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <style type="text/css" rel="stylesheet"> body { font-family: 'Maru Folk Heavy'; } #callback { color: blue; visibility: hidden; } </style> <script type="text/javascript"> callback = function(res) { var css = document.getElementById('callback'); if (res.type == 'css') { css.textContent = res.data; } if (res.code == 0) { css.style.visibility = 'visible'; alert('フォントの適用後です'); } } Ts.onPostComplete(callback); Ts.setLoadStart(0); </script> </head> <body> <p>コールバックなし</p> <p id="callback">コールバックあり(適用後)</p> <button onclick="Ts.reload();">フォントをロード</button> </body> </html>
Webフォントのダウンロードが完了したら適用後にコールバックします。サンプルをリロードしてお試し下さい。
メソッド
|
Ts.dynamicCss(callback, text, font, name, key, hint)
|
機能
|
指定した文字列に対するWebフォントをCSSで返します。
|
引数
|
callback (必須) : コールバック関数
text (必須) : 指定文字列 font (必須) : フォント名 name (必須) : 任意の書体名 key (必須) : 識別キー hint (必須) : ヒント有無の設定 (0:設定なし、1:ヒント付与、2:ヒント強制除去) |
備考
|
callback(res)
res.code : 0:正常, -1:ロードエラー, 1:変換対象なし res.type : 'css' res.font : フォント名 res.name : 任意の書体名 res.text : 指定文字列 res.key : 識別キー res.data : CSSデータ CSSデータ : @font-face { font-family: '任意の書体名'; src: url(data:font/woff;base64,d09GRgA...); } |
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <style type="text/css" rel="stylesheet" id="dynamic_css"></style> <script type="text/javascript"> callback = function(res) { var css = document.getElementById('dynamic_css'); if (res.type == 'css') { css.textContent = res.data; } } dynamicRequest = function() { var el = document.getElementById('dynamic_text'); el.style.fontFamily = 'dynamic_font'; Ts.dynamicCss(callback, el.value, 'Folk Heavy', 'dynamic_font', '', ''); } </script> </head> <body> <input id="dynamic_text" type="text" style="width: 100px;"> <button type="button" onclick="dynamicRequest();">適用</button> </body> </html>
何か文字列を入力して「適用」をクリックしてください。
メソッド
|
Ts.dynamicJson(callback, text, font, name, key, hint)
|
機能
|
指定した文字列に対するWebフォントをJSON形式で返します。
|
引数
|
callback (必須) : コールバック関数
text (必須) : 指定文字列 font (必須) : フォント名 name (必須) : 任意の書体名 key (必須) : 識別キー hint (必須) : ヒント有無の設定(デフォルト:0、強制付与:1、強制除去:2) |
備考
|
callback(res)
res.code : 0:正常, -1:ロードエラー, 1:変換対象なし res.type : 'json' res.font : フォント名 res.name : 任意の書体名+ランダム文字列 res.text : 指定文字列 res.key : 識別キー res.data : JSONデータ JSONデータ : { "fontFamily":"任意の書体名+ランダム文字列", "format":"woff", "src":"d09GRgABAAAAAC4kABEAAAAAQ..." } |
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <script type="text/javascript"> callback = function(res) { if (res.type == 'json') { var json = document.createElement('div'); json.textContent = res.data; document.body.appendChild(json); } } dynamicRequest = function() { var el = document.getElementById('dynamic_text'); el.style.fontFamily = 'dynamic_font'; Ts.dynamicJson(callback, el.value, 'Folk Heavy', 'dynamic_font', '', ''); } </script> </head> <body> <input id="dynamic_text" type="text" style="width: 100px;"> <button type="button" onclick="dynamicRequest();">適用</button> </body> </html>
何か文字列を入力して「適用」をクリックしてください。
メソッド
|
Ts.setSelector(selector)
|
機能
|
文字を抽出するセレクタを指定します。
|
引数
|
selector (必須) : セレクタ
|
備考
|
検索優先順位は id > name > jQuery(ロード時) > querySelectorAll > original となります。
|
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <script type="text/javascript"> Ts.setSelector('#setselector'); </script> <style type="text/css" rel="stylesheet"> #nonselector { font-family: 'Kaimin Sora Regular'; } #setselector { font-family: 'Kaimin Sora Heavy'; color: blue; } </style> </head> <body> <p id="nonselector">セレクタ指定なし</p> <p id="setselector">セレクタ指定あり</p> </body> </html>
メソッド
|
Ts.setLoadStart(use)
|
機能
|
ロード時のフォント配信の有無を切り替えます。
|
引数
|
use (必須) : ロード時のフォント配信の有無(配信なし:0、配信あり:1)
|
備考
|
なし
|
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <script type="text/javascript"> Ts.setLoadStart(0); </script> <style type="text/css" rel="stylesheet"> #nonload_text { font-family: 'Kaimin Tsuki Bold'; } </style> </head> <body> <span id="nonload_text">最初はフォントがロードされません。</span> <button type="button" onclick="Ts.reload();">フォントをロード</button> </body> </html>
メソッド
|
Ts.reload()
|
機能
|
フォントの配信を実行する。
|
引数
|
なし
|
備考
|
プラン専用タグに指定したフェードなどのオプション動作を継承します。
|
※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script> <script type="text/javascript"> changeText = function() { document.getElementById('reload_text').innerHTML = 'それはシンプルなテキストですか?'; } </script> <style type="text/css" rel="stylesheet"> #reload_text { font-family: 'Kaimin Tsuki Heavy'; } </style> </head> <body> <span id="reload_text">これはサンプルのテキストです。</span> <button type="button" onclick="changeText();">テキスト変更</button> <button type="button" onclick="Ts.reload();">リロード</button> </body> </html>