justfont網頁字型進階使用技巧 | justfont就是字,中文字型web font服務,中文網頁字型web font,網頁字型,雲端字型,中文字型,字型設計與字型知識,信黑體代理
Step1
註冊會員後,請到右上方點選《新增專案》(1),會跳出視窗請您輸入專案名稱與要啟用的網址(2)。
justfont新增專案
Step2
在字型列表中,選取您要使用的字型(3),選擇後請到右上方點選《管理專案》(4)。
justfont選取要使用的字型
Step3
建議您使用《CSS 方式設定》,處理和顯示速度較快速。
如果不方便用 《font-family》設定,可採用 CSS 設定方式。
Step1
請先建立專案,到專案管理中選擇您要使用的字型(1),並輸入您要設定的css標籤,或使用預設標籤(2)。
justfont css標籤
關於css如何設定,可參考以下說明

html中為<div   class="title">測試</div>,則輸入

html中為<div   id="content">測試</div>,則輸入

也可直接指定標籤,例如html中為<h2>測試</h2>,則輸入

設定成 效力較 來的大,較不易被既有的字型設定覆蓋。


Step2
到右上方點選《JS》按鈕(3) 並複製Javascript程式碼(4)。
justfont複製程式碼
Step3
將取得的程式,加入在您網頁的最前面可加速運作,例如加入於 body 標籤之前(5)。
justfont加入在您網頁的最前面
Step4
將您要使用的字型標籤,加入於網頁文字的html中 (6)
justfont字型標籤設定
Step5
設定完成即可顯示成功!
justfont設定完成
Step1
選擇您要使用的字型,在css中輸入 font-weight(1) 以及 font-name (2)。
justfont font-family設定
Step2
將您網站中的 css 設定成如下,即可正確顯示:

.content {

      font-family: "xingothic-tc";

      font-weight: "400";

}


Step3
到右上方點選《JS》按鈕(3) 並複製Javascript程式碼(4)。
justfont複製程式碼
Step4
將取得的程式,加入在您網頁的最前面可加速運作,例如加入於 body 標籤之前(5)。

Step5
設定完成即可顯示成功!
注意!
如您使用的是《以font-family設定》,可在css中直接設定優先生效之英文字型,例如:

.content {

      font-family: "Times New Roman","xingothic-tc";

      font-weight: "400";

}

Step1
如使用《以css設定》,請先到《專案管理》中選擇您要使用的字型(1),如出現 表示預設歐文搭配 google fonts (2),直接套用即可,或可輸入您自行指定之優先歐文字型名稱。
justfont複製程式碼
Step2
到右上方點選《JS》按鈕(3) 並複製Javascript程式碼(4)。
justfont複製程式碼
Step3
將取得的程式,加入在您網頁的最前面可加速運作,例如加入於 body 標籤之前(5)。
justfont加入在您網頁的最前面
Step4
將您要使用的字型標籤,加入於網頁文字的html中 (6)
justfont字型標籤設定
Step5
設定完成即可顯示成功!
Step1
先瞭解 justfont 運作時,會提供三種不同的css狀態,分別為:

.jf-loading : 運作中

.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;
}
不佔主機頻寬

justfont 的機制是運作瀏覽器中,並且由使用者的瀏覽器直接和 justfont 進行溝通,並不佔用網站本身的頻寬。


有下載字型並使用的計算為 1PV

由 Javascript 與主機溝通成功,並有下載字型到瀏覽端顯示的,即計算一次 PV。


以帳戶所有專案合計

PV的計算,是以您的帳號中 「所有專案」的使用合計。

網頁規範

W3C中的規定,如果 font-family 中第一套指定字型中,並沒有該字型,就往下找第二套指定字型;以此類推。


建議使用 font-family 設定方式
請參考: 
http://www.justfont.com/cheats => font-family設定

舉例來說,您設定王漢宗新宋的 font-family name是 wts55
英文字型要使用 Arial, 日文字型要用 Hiragino Sans
在css中就可以這樣設定

.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-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 觸發事件 API
justfont 提供三個事件觸發函數,讓您可依照狀況來進行處理,請在 justfont 提供的 javaScript 前,加入以下程式碼

<script type="text/javascript">

var _jf = _jf || [];

_jf.push(['_eventPreload',function(){

   //載入前觸發事件

}]);

_jf.push(['_eventActived',function(){

   //成功觸發事件

}]);

_jf.push(['_eventInactived',function(){

   //失敗觸發事件

}])

</script>

Step1
先到您Wordpress中確認您要套用的 css 標籤。
justfont css標籤
如上圖要套用的部分,您可設定成

網頁中標籤為 <h2   class="entry-title"><a href=.....

可在《專案管理》後台中的字型 css中,設定成以下三種方式皆可:

(css優先權較低,如原始theme中有字型設定可能會被覆蓋)

(css 設定優先權較高)

(最推薦,css 設定優先權最高)


Step2
請先建立專案,到專案管理中您要使用的字型(3),並輸入您要設定的css標籤,在這裡設定成 h2.entry-title a (4)。
justfont複製程式碼
Step3
取得 javascript 程式後,到 Wordpress 後台中,進入《外觀》(5)中的《主題編輯器》(6)。
justfont加入在您網頁的最前面
Step4
選取頁首 header.php (7),將 Javascript 放在 body 標籤之前(8)。
justfont字型標籤設定
Step5
設定完成即可顯示成功!
justfont設定完成
以上說明是針對虛擬主機或自行架設 Wordpress 的操作說明。 wordpress.com 因不支援 Javascript 嵌入,無法使用 justfont 機制。
Step1
先到您 Weebly 頁面中確認您要套用的 css 標籤,例如您要套用到 Logo處 (1)。
檢視weebly的標籤
如上圖您要套用的CSS標籤 #logo , #logo a已有預設字型 (2) ,您需要設定成

(此設定優先權較 Weebly 預設字型高,可覆蓋原本設定)


Step2
請先建立專案,到專案管理中您要使用的字型(3),並輸入您要設定的css標籤,在這裡設定成 body #logo a (4)。
justfont複製程式碼
Step3
取得 javascript 程式後,到 Weebly 後台中,進入《建構》左方的《嵌入代碼》(5),並拖曳到頁面的前方處。
justfont加入在您網頁的最前面
Step4
將您的 javascript 貼到此區塊中(6),並做網站發佈。
justfont字型標籤設定
Step5
設定完成即可顯示成功,Logo 正確顯示為信黑體W8(7)!
justfont設定完成