justfont網頁字型進階使用技巧 | justfont就是字,中文字型web font服務,中文網頁字型web font,網頁字型,雲端字型,中文字型,字型設計與字型知識,信黑體代理
Step1
After registered as a member, please click the 'Add a project'(1). After the windows popup, please enter the project name and the assigned website address(2).
justfont新增專案
Step2
Choose the font you want to apply on the font list(3). Then click on the 'project management'(4).
justfont選取要使用的字型
Step3
We suggested you can set the webfont service by CSS, it will provide more performance in display.
Step1
Please create a project first, and go to the project management page to choose the font you want to apply(1). Enter the CSS label you assigned or used the label by default(2).
justfont css標籤
Please refer the content about 'How to set the webfont by CSS'

In the html grammer, ex. <div   class="title">test</div>, please input .

In the html grammer, ex. <div   id="content">test</div>, please input .

And you also can assign the label directly, ex. <h2>test</h2>, please input .

The priority of is more than .


Step2
Click the 'JS' button(3). Then copy all the Javascript code(4).
justfont複製程式碼
Step3
Add the Javascript code in the start of your original code for getting more performance. Ex. Added the code before the 'body' label(5).
justfont加入在您網頁的最前面
Step4
Add the CSS label in your html code(6).
justfont字型標籤設定
Step5
After those procedure finished, the display will be successful!
justfont設定完成
Step1
Please create a project first, and go to the project management page to choose the font you want to apply(1). Enter the font-weight(1) and font-family(2).
justfont font-family setting
Step2
Setting css like:

.content {

      font-family: "xingothic-tc";

      font-weight: "400";

}

Step3
Click the 'JS' button(3). Then copy all the Javascript code(4).
justfont複製程式碼
Step4
Add the Javascript code in the start of your original code for getting more performance. Ex. Added the code before the 'body' label(5).

Step5
After those procedure finished, the display will be successful!
Caution!
If the webfont service is set by font-familiy, you can set the priority of the English font in CSS. Ex.

.content {

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

      font-weight: "400";

}

Step1
If the webfont service is set by CSS, Please choose the font you want to apply in 'project management' first(1), it's defalut used google fonts if have icon (2), or you can setting the other high-priority English font name.
justfont複製程式碼
Step2
Click the 'JS' button(3). Then copy all the Javascript code(4).
justfont複製程式碼
Step3
Add the Javascript code in the start of your original code for getting more performance. Ex. Added the code before the 'body' label(5).
justfont加入在您網頁的最前面
Step4
Add the font label in your html code(6).
justfont字型標籤設定
Step5
After those procedure finished, the display will be successful!
Step1
The three CSS status of the justfont service as follow:

.jf-loading : Loading

.jf-active : Active

.jf-inactive : Inactive


Step2
The developer can design the webpage display function depending those three justfont service status.
Ex. if you want to display the webpage content after the justfont service done:
.jf-loading body { /*The content won't be displayed when the status is 'Loading'.*/
      opacity: 0;
      visibility: hidden;
}
.jf-active body { /*Display the content directly if the status is 'Active'.*/
      opacity: 1;
      visibility: visible;
}
.jf-inactive body {/*Display the content directly if the status is 'Inactive'.*/
      opacity: 1;
      visibility: visible;
}

or can:
display default system fonts,and display opacity when 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;
}
Set by CSS
The three CSS status of the justfont service as follow:

.jf-loading : Loading.

.jf-active : Active.

.jf-inactive : Inactive.


_jf.flush()
Provide _jf.flush() to refresh font。(Above justfont Script v4.7)

<script type="text/javascript">

$('.text').click(function(){

      $('.text').text('變動的文字');

      _jf.flush(); // Call this function to refresh font when change texts.

});

</script>


Javascript evens
The three javascript events be provided by justfont's javascript. The developer can design the website depending on those three javascript events. Please Add those javascript code before the webfont-javascript:

<script type="text/javascript">

var _jf = _jf || [];

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

   //Event triggered before 'Loading' status

}]);

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

   //Event triggered when the status is 'Active'

}]);

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

   //Event triggered when the status is 'Inactive'

}])

</script>

Step1
Please confirm the CSS label in the wordpress webpage first(1)(2).
justfont css tag
As shown above, you can set as:

The class label is <h2   class="entry-title"><a href=.....

The developer can set the CSS configuration in the 'Project management', and choose one of those three ways:

(The priority of CSS is lower, the font settings will be disable in the original theme possibly.)

(The priority of CSS is higher than the former.)

(The prority of CSS is the highest.)


Step2
Please create a project first, and go to the project management page to choose the font you want to apply(3). Enter the CSS label and set as 'h2.entry-title a'(4).
justfont複製程式碼
Step3
Get the Javascript code, and go to the console of the wordpress. Select the 'Appearance'(5) -> 'Edit Themes'(6).
justfont加入在您網頁的最前面
Step4
Select the header.php(7), and paste the Javascript code before the 'body' label(8).
justfont字型標籤設定
Step5
After those procedure finished, the display will be successful!
justfont設定完成
Step1
Please confirm the CSS label in the Weebly webpage first. For example, the webfont will be applied for Logo(1).
檢視weebly的標籤
As shown above, if the developer want to apply the webfont for the logo(the default font is set), the settings as follow:

(The priority of setting is higher than the default, the original setting will be disabled.)


Step2
Please create a project first, and go to the project management page to choose the font you want to apply(3). Enter the CSS label and set as 'body #logo a'(4).
justfont複製程式碼
Step3
Get the Javascript code, and go to the console of the Weebly. Select the 'More'-> 'Embed code'(5). Drag and drop the component to the start of the webpage.
justfont加入在您網頁的最前面
Step4
Paste the Javascript code in this block('CUSTOM HTML' block) and publish the website(Click the 'PUBLISH' button.
justfont字型標籤設定
Step5
After those procedure finished, the display will be successful! The Logo will be displayed as XinGothic W8(7)!
justfont設定完成
Those setting procedure is just for the virtual server or private wordpress web-server only. The offcial wordpress website is disable duo to the javascrip is not allowed.