Step1
註冊會員後,請到右上方點選《新增專案》(1),會跳出視窗請您輸入專案名稱與要啟用的網址(2)。
Step2
在字型列表中,選取您要使用的字型(3),選擇後請到右上方點選《管理專案》(4)。
Step3
建議您使用《CSS 方式設定》,處理和顯示速度較快速。
如果不方便用 《font-family》設定,可採用 CSS 設定方式。
Step1
請先建立專案,到專案管理中選擇您要使用的字型(1),並輸入您要設定的css標籤,或使用預設標籤(2)。
關於css如何設定,可參考以下說明
Step2
到右上方點選《JS》按鈕(3) 並複製Javascript程式碼(4)。
Step3
將取得的程式,加入在您網頁的最前面可加速運作,例如加入於 body 標籤之前(5)。
Step4
將您要使用的字型標籤,加入於網頁文字的html中 (6)
Step5
設定完成即可顯示成功!
Step1
選擇您要使用的字型,在css中輸入 font-weight(1) 以及 font-name (2)。
Step2
將您網站中的 css 設定成如下,即可正確顯示:
.content {
font-family: "xingothic-tc";
font-weight: "400";
}
Step3
到右上方點選《JS》按鈕(3) 並複製Javascript程式碼(4)。
Step4
將取得的程式,加入在您網頁的最前面可加速運作,例如加入於 body 標籤之前(5)。
Step5
設定完成即可顯示成功!
注意!
如您使用的是《以font-family設定》,可在css中直接設定優先生效之英文字型,例如:
.content {
font-family: "Times New Roman","xingothic-tc";
font-weight: "400";
}
Step1
如使用《以css設定》,請先到《專案管理》中選擇您要使用的字型(1),如出現 表示預設歐文搭配 google fonts (2),直接套用即可,或可輸入您自行指定之優先歐文字型名稱。
Step2
到右上方點選《JS》按鈕(3) 並複製Javascript程式碼(4)。
Step3
將取得的程式,加入在您網頁的最前面可加速運作,例如加入於 body 標籤之前(5)。
Step4
將您要使用的字型標籤,加入於網頁文字的html中 (6)
Step5
設定完成即可顯示成功!
Step1
先瞭解 justfont 運作時,會提供四種不同的css狀態,分別為:
.jf-loading : 初次載入中
.jf-reloading : 呼叫_jf.flush() 重新載入中
.jf-active : 執行完成
.jf-inactive : 執行失敗
Step2
利用justfont所提供的狀態,就可以設定在未處理完成前不做顯示,等處理完畢後再顯示的功能。
下面範例為設定 body 整個內容於處理完成前不顯示:
.jf-loading body { /*載入中不顯示*/
opacity: 0;
visibility: hidden;
}
.jf-active body { /*如果處理成功,直接顯示*/
opacity: 1;
visibility: visible;
}
.jf-inactive body {/*如果處理失敗,直接顯示*/
opacity: 1;
visibility: visible;
}
或是採用
先出現預設預設字型,但利用 jf-active 和 jf-inactive 以漸變顯示:
.jf-active *, .jf-inactive * { /*處理成功或失敗,都以漸變顯示*/
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-o-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
預設載入新內容後,執行 _jf.flush() 的閃爍問題
先參考 justfont API 取消載入時的程式執行,設定在 _jf.flush() 未處理完成前不做顯示,等處理完畢後再顯示的功能。
下面範例為設定 body 整個內容於處理完成前不顯示:
.jf-reloading body{ /* _jf.flush() 執行中不顯示*/
opacity: 0;
visibility: hidden;
}
.jf-active body { /*如果處理成功,直接顯示*/
opacity: 1;
visibility: visible;
}
.jf-inactive body {/*如果處理失敗,直接顯示*/
opacity: 1;
visibility: visible;
}
不佔主機頻寬
justfont 的機制是運作瀏覽器中,並且由使用者的瀏覽器直接和 justfont 進行溝通,並不佔用網站本身的頻寬。
有下載字型並使用的計算為 1PV
由 Javascript 與主機溝通成功,並有下載字型到瀏覽端顯示的,即計算一次 PV。
以帳戶所有專案合計
PV的計算,是以您的帳號中 「所有專案」的使用合計。
網頁規範
W3C中的規定,如果 font-family 中第一套指定字型中,並沒有該字型,就往下找第二套指定字型;以此類推。
建議使用 font-family 設定方式
.title {
font-family: "Arial" , "wts55" , "Hiragino Sans";
}
因為wts55中沒有日文字,會往後顯示出 Hiragino 的日文
這樣就可以了。
已有日文字體的中文字型
遇到這種狀況,就需要去設定 unicode-range
可以參考這裡的文章:
http://blog.yorkxin.org/posts/2012/06/17/assign-fonts-for-specific-characters
CSS 狀態
justfont提供四種css狀態,分別為
.jf-loading : 初次運作中
.jf-reloading : 呼叫_jf.flush() 重新載入中
.jf-active : 執行完成
.jf-inactive : 執行失敗
_jf.flush() 刷新
提供 _jf.flush() 函數,支援網頁的動態載入。(justfont Script v4.7 以上支援)
<script type="text/javascript">
$('.text').click(function(){
/* Html 內容變更*/
$('.text').text('變動的文字');
/*內容變動後,呼叫此函數刷新字型*/
_jf.flush();
});
</script>
載入時預設為不執行
justfont javascript 載入時預設為不執行,需要修改 Production Javascript 方能支援,Development 版本不能支援 (justfont Script v5.0.4 以上支援)
/*修改 justfont 提供的 Production javascript 碼*/
<script type="text/javascript">
var _jf = _jf || [];
_jf.push(['p','1234']);
/*將 initAction 值從 true 變更為 false 即可*/
_jf.push(['initAction',false]);
.......
</script>
justfont 觸發事件 API
justfont 提供四個事件觸發函數,讓您可依照狀況來進行處理,請在 justfont 提供的 javaScript 後加入以下程式碼
<script type="text/javascript">
var _jf = _jf || [];
_jf.push(['_eventPreload',function(){
//初次載入前觸發事件
}]);
_jf.push(['_eventReload',function(){
//呼叫 _jf.flush() 前觸發事件
}]);
_jf.push(['_eventActived',function(){
//成功觸發事件
}]);
_jf.push(['_eventInactived',function(){
//失敗觸發事件
}])
</script>
Step1
先到您Wordpress中確認您要套用的 css 標籤。
如上圖要套用的部分,您可設定成
Step2
請先建立專案,到專案管理中您要使用的字型(3),並輸入您要設定的css標籤,在這裡設定成 h2.entry-title a (4)。
Step3
取得 javascript 程式後,到 Wordpress 後台中,進入《外觀》(5)中的《主題編輯器》(6)。
Step4
選取頁首 header.php (7),將 Javascript 放在 body 標籤之前(8)。
Step5
設定完成即可顯示成功!
以上說明是針對虛擬主機或自行架設 Wordpress 的操作說明。 wordpress.com 因不支援 Javascript 嵌入,無法使用 justfont 機制。
Step1
先到您 Weebly 頁面中確認您要套用的 css 標籤,例如您要套用到 Logo處 (1)。
如上圖您要套用的CSS標籤 #logo , #logo a已有預設字型 (2) ,您需要設定成
Step2
請先建立專案,到專案管理中您要使用的字型(3),並輸入您要設定的css標籤,在這裡設定成 body #logo a (4)。
Step3
取得 javascript 程式後,到 Weebly 後台中,進入《建構》左方的《嵌入代碼》(5),並拖曳到頁面的前方處。
Step4
將您的 javascript 貼到此區塊中(6),並做網站發佈。
Step5
設定完成即可顯示成功,Logo 正確顯示為信黑體W8(7)!