TypeSquare JavaScript API v3 參考

※本API的使用約款適用TypeSquare的使用約款。

1. URL標籤選項

概述

在URL標籤引用 typesquare.js 時，可以加上額外參數，調整載入時的動作。

淡入設定

功能

設定套用Web字型時，漸漸顯示出字型的時間。

※ 若要顯示預設字型則指定-1（負1）

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

啟用淡入效果: 在標籤參數指定「fadein=1500」（以1500毫秒淡入）

<script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=1500" charset="utf-8"></script>

關閉淡入效果: 在標籤參數指定「fadein=-1」（負1）

<script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=-1" charset="utf-8"></script>

設定自動載入字型

功能

自動偵測頁面，當發生文字內容改變時載入網頁字型。

※ 為了避免讀取過於頻繁，連續偵測到有改變情形時，會間隔1秒進行載入。

※ 每次載入字型都會消耗PV數，若您使用此功能，請小心傳輸PV數可能會被用完。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

啟用自動載入: 在標籤參數指定「auto_load_font=true」

<script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&auto_load_font=true" charset="utf-8"></script>

設定載入時的動作

功能

可以設定不要在頁面載入時就套用Web字型

※ 若使用本功能，需要搭配其他功能才能套用字型。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

不載入: 在標籤參數指定「onload=false」

<script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>

設定是否要載入隱藏元素內的字型

功能

指定對hidden屬性內的文字載入字型。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

載入隱藏文字: 在標籤參數指定「apply_to_hidden=true」

<script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_hidden=true" charset="utf-8"></script>

設定是否要載入虛擬元素內的字型

功能

您可指定是否不要載入「after」、「before」等虛擬元素內文字的字型。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

不要載入: 在標籤參數指定「apply_to_pseudo=false」

<script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_pseudo=false" charset="utf-8"></script>

2. API Method

取得字型

方法
Ts.loadFontAsync(FontObj)
功能
取得參數指定之字串的Web字型。
參數
FontObj : 字型物件
備註
字型物件的結構如下
欄位 必要 說明
cssName 必要 CSS指定名稱
text 必要 字串
callback 必要 回呼函式: function
fontFamily - 任意的font-family名: cssName設定值
outputType - 輸出形式 (css/json): css
callbackId - 回呼ID: 時間戳記
每次載入字型都會消耗PV數，若您使用此功能，請小心傳輸PV數可能會被用完。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'AR Yenti B5 Bold';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const fontasync = function() {
        const callbackId = Date.now();
        Ts.loadFontAsync({
          'cssName': 'AR Yenti B5 Bold',
          'text': document.getElementById("target").innerText,
          'hasHint': false,
          'outputType': 'json',
          'callbackId': callbackId,
          'callback': callbackJson
        });
      }
      const callbackJson = function(params) {
        const styleElement = document.createElement('style');
        styleElement.setAttribute('type', 'text/css');
        styleElement.setAttribute('rel', 'stylesheet');
        const data = JSON.parse(params.data);
        const data_object = JSON.parse(data.res);
        styleElement.innerHTML = "@font-face {font-family: '" + data_object['fontFamily'] + "'; font-weight: " + data_object['font-weight'] + ";src: url(data:font/woff;base64," + data_object['src'] +");}";
        document.head.appendChild(styleElement);
      }
    </script>
  </head>
  <body>
    <div>
      <input class="btn" type="button" onclick="fontasync();" value="透過API Method的取得字型功能進行載入" />
      <input class="btn" type="button" onclick="document.location.reload();" value="重新載入此範例" />
      <p id="target" class="t1">TypeSquare讓您的網站設計煥然一新</p>
    </div>
  </body>
</html>

讀取整頁字型

方法
Ts.loadFont()
功能
重新對整個頁面的文字載入網頁字型。
備註
每次載入字型都會消耗PV數，若您使用此功能，請小心傳輸PV數可能會被用完。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'AR Yenti B5 Light';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="透過API Method的載入字型功能進行載入" />
    <input class="btn" type="button" onclick="document.location.reload();" value="重新載入此範例" />
    <p class="t1">TypeSquare讓您的網站設計煥然一新</p>
  </body>
</html>

設定字型套用的範圍

方法
Ts.setQuerySelector(selector)
功能
設定要套用網頁字型的selector。
參數
selector : CSS Selector

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        margin: 15px;
        font-size: 25px;
      }
      .font01 {
        font-family: "AR Mingti B5 Ultra";
      }
      .font02 {
        font-family: "AR Sheide B5 Medium";
      }
    </style>
    <script type="text/javascript">
      Ts.setQuerySelector(".target");
    </script>
  </head>
  <body>
    <p class="target font01">TypeSquare讓您的網站設計煥然一新</p>
    <p class="font02">TypeSquare讓您的網站設計煥然一新</p>
  </body>
</html>

設定要自動載入字型的範圍

方法
Ts.setAutoLoadFontSelector(selector, sleep)
功能
指定CSS Selector後，本功能會自動監視該selector指定的元素，若發生文字變動時，將自動載入字型。當間隔時間內發生多次文字變動，經過間隔時間後才會進行下一次載入動作。
參數
selector : CSS Selector
sleep : 載入間隔時間（毫秒）
備註
每次載入字型都會消耗PV數，若您使用此功能，請小心傳輸PV數可能會被用完。

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?vHGgRVPKRz8%3D" charset="utf-8"></script>
    <style type="text/css">
      body {
        font-family: "AR Sheide B5 Medium";
        margin: 15px;
        line-height: 1;
      }
      .t1 {
        font-size: 18px;
      }
      .t2 {
        font-size: 26px;
        line-height: 1;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        $("#word").keyup(function() {
          $("#target").text($(this).val());
        });
      });
      function autoLoadStart() {
        Ts.setAutoLoadFontSelector("#target", 1000);
      }
    </script>
  </head>
  <body onload="autoLoadStart();">
    <input class="btn" type="button" onclick="document.location.reload();" value="重新載入此範例" />
    <p class="t1">使用Web字型顯示喜歡的句子</p>
    <input type="text" maxlength="18" style="width:40%;" placeholder="請輸入想要顯示的文句" id="word">
    <p class="t2" id="target"></p>
  </body>
</html>

3. API Event

字型套用前

方法
Ts.onFontDownloaded(function)
功能
在讀取每個Web字型前會觸發此事件，可使用JavaScript決定接下來要進行什麼動作。請登錄事件發生時要呼叫的函式。
參數
function : 函式

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Hiragino Sans TC W6';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const sample = function (params) {
        const css = document.getElementById("target");
        if (params.fonts[0].status == false) {
          css.style.color = "#22559C";
          alert('攔截字型套用事件，並修改文字顏色。');
        }
      }
      Ts.onFontDownloaded(sample);
    </script>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="載入字型" />
    <input class="btn" type="button" onclick="document.location.reload();" value="重新載入此範例" />
    <p id="target" class="t1">TypeSquare讓您的網站設計煥然一新</p>
  </body>
</html>

當Web字型下載完成後，在套用之前，會觸發此回呼函式。

字型套用後

方法
Ts.onFontRendered(function)
功能
在每個Web字型完成套用後會觸發此事件，可使用JavaScript決定接下來要進行什麼動作。請登錄事件發生時要呼叫的函式。
參數
function : 函式

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Hiragino Sans TC W6';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const sample = function (params) {
        const css = document.getElementById("target");
        if (params.fonts[0].status == true) {
          css.style.color = "#F27370";
          alert('攔截字型套用事件，並修改文字顏色。');
        }
      }
      Ts.onFontRendered(sample);
    </script>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="載入字型" />
    <input class="btn" type="button" onclick="document.location.reload();" value="重新載入此範例" />
    <p id="target" class="t1">TypeSquare讓您的網站設計煥然一新</p>
  </body>
</html>

當Web字型下載完成並完成套用後，會觸發此回呼函式。

所有字型套用後

方法
Ts.onFontLoaded(function)
功能
在所有Web字型完成套用後會觸發此事件，可使用JavaScript決定接下來要進行什麼動作。請登錄事件發生時要呼叫的函式。
參數
function : 函式

範例

※範例程式碼裡的HTML語法中的參數，請換成客戶您所專屬的ID。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/zh_tw/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Hiragino Sans TC W6';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const sample = function (params) {
        const css = document.getElementById("target");
        if (params.fonts[0].status == true) {
          css.style.color = "#FA9856";
          alert('攔截字型套用事件，並修改文字顏色。');
        }
      }
      Ts.onFontLoaded(sample);
    </script>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="載入字型" />
    <input class="btn" type="button" onclick="document.location.reload();" value="重新載入此範例" />
    <p id="target" class="t1">TypeSquare讓您的網站設計煥然一新</p>
  </body>
</html>

當Web字型下載完成並完成套用後，會觸發此回呼函式。