Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What is going on with this article?
@yd_niku

動的にHTMLが変更されるコンテンツにTypeSquareを反映したい

More than 3 years have passed since last update.

TypeSquare とは?

モリサワが提供しているWebフォントのクラウドサービス。
MORISAWA PASSPORTのライセンスとかもってても使える。

仕組み

Script要素を挿入しておくと、ページを読み込んだときにページ内に含まれる文字だけフォントをロードしてくる仕組み。

問題

必要な文字だけ読み込んでくれる仕組みがゆえに、
ページ読み込みよりも後に表示文字を含むHTMLを生成すると、その文字にWebフォントが適応されない。
(すでに読みこんでいる文字については適応されるので、場合よってはまばらな適応具合になる)

解決方法

TypeSquare API を利用すればできる。

Script要素のURI変える

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?{ID}" charset="utf-8"></script>

apiscript にする。

<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?{ID}" charset="utf-8"></script>

JavaScript API でロードさせる。

そうするとグローバルスコープに Ts オブジェクトが定義されるので、用意されたインターフェイスでTypeSquareに関する操作が可能になる。
たとえば、HTMLを append したあとなど、任意のタイミングでロードさせるには下記のメソッドを呼び出す。

Ts.reload();

ロード時の挙動をパラメータで設定する

そのまま変えるだけだとロード時点で適応されなくなるので、自動で適応したければ下記のように loadstart=1 とする。

<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?{ID}&loadstart=1" charset="utf-8"></script>

参考

他にも読み込みを監視したりいろいろできるようです。

13
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
13
Help us understand the problem. What is going on with this article?